diff --git a/MYXXfm/pages/legal.html b/MYXXfm/pages/legal.html index 67283b76..26c90fa4 100644 --- a/MYXXfm/pages/legal.html +++ b/MYXXfm/pages/legal.html @@ -65,24 +65,50 @@ border-bottom-color: transparent; text-decoration: underline; } + /* Spinner styles */ + .fade-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: black; + opacity: 1; /* Initially visible */ + transition: opacity 0.5s ease-out; /* Adjust timing and easing as needed */ + z-index: 9999; /* Ensure it sits on top of other content */ + display: flex; + align-items: center; + justify-content: center; + } + .spinner { + border: 8px solid rgba(0, 0, 0, 0.1); /* Light grey border */ + border-radius: 50%; + border-top: 8px solid #EFD500; /* Spinner color */ + width: 10vw; /* Responsive width (10% of viewport width) */ + height: 10vw; /* Responsive height (10% of viewport width) */ + max-width: 100px; /* Maximum width */ + max-height: 100px; /* Maximum height */ + animation: spin 1s linear infinite; /* Adjust animation duration */ + margin-top: 40px; /* Adjust margin to move spinner down */ + } + @keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } + } @media (max-width: 768px) { - .container { - padding: 20px 40px; /* Adjusted padding for smaller screens */ - margin: 10px; /* Adjusted margin for smaller gap on mobile */ - } - h1 { - font-size: 22px; - } - h2 { - font-size: 20px; - } - p { - font-size: 14px; + .spinner { + width: 10vw; /* Adjust size for smaller screens */ + height: 10vw; + max-width: 80px; /* Maximum width */ + max-height: 80px; /* Maximum height */ } }
+Last updated: August 5, 2024
@@ -147,5 +173,18 @@