implement prefers-reduced-motion css

fedi-guide/index.html

@@ -43,7 +43,7 @@
     <p aria-hidden="true" class="nav-base nav-systray"><i class="ph-bold ph-bell"></i> <i class="ph-bold ph-speaker-high"></i> <i class="ph-bold ph-network"></i> <i class="ph-bold ph-battery-full"></i> <i class="ph-bold ph-power"></i></p>
 </div>
 
-<!-- introduction -->
+<!-- fedi guide introduction -->
 <div id="do-not-interact" class="terminal">
     <div aria-hidden="true" class="term-titlebar">
         <i class="ph-fill ph-terminal"></i>

script.js

@@ -1,6 +1,6 @@
-/* dropdown menu for mobile users, used https://www.w3schools.com/howto/howto_js_dropdown.asp
-When the user clicks on the button,
-toggle between hiding and showing the dropdown content */
+// dropdown menu for mobile users, used https://www.w3schools.com/howto/howto_js_dropdown.asp
+// When the user clicks on the button,
+// toggle between hiding and showing the dropdown content
 function mobileDropdown() {
     document.getElementById("dropdown-box").classList.toggle("show-dropdown");
 }
@@ -19,11 +19,12 @@ window.onclick = function(event) {
     }
 } 
 
-/* snippet that copies the html for my button(s) */
+// snippet that copies the html for my button(s)
 function copyButtonRegular() {
     navigator.clipboard.writeText ('<a href="https://sneexy.pages.gay"><img src="https://sneexy.pages.gay/assets/buttons/sneexy.png" alt="Sneexy" title="Sneexy"></a>');
     alert("button html copied!");
 }
+
 function copyButtonCatppuccin() {
     navigator.clipboard.writeText ('<a href="https://sneexy.pages.gay"><img src="https://sneexy.pages.gay/assets/buttons/sneexy_cat.png" alt="Sneexy" title="Sneexy"></a>');
     alert("button html copied!");

style.css

@@ -7,7 +7,7 @@ body {
     -moz-animation: bg-gradient 10s ease infinite;
     -webkit-animation: bg-gradient 10s ease infinite;
     font-family: "JetBrains Mono";
-    font-size: 18px;
+    font-size: 1.125rem;
     margin: unset !important; /* idk why it does that */
 }
 
@@ -220,28 +220,28 @@ h1, h1 a {
 but i prefer how it looks so i just use the same styling again */
 h2, h2 a {
     color: var(--text);
-    font-size: 32px;
+    font-size: 2rem;
     text-decoration: none;
 }
 
 h3 {
-    font-size: 20px
+    font-size: 2rem;
 }
 
 /* text */
 p, li, button {
-    font-size: 20px;
+    font-size: 1.125rem;
 }
 
 /* links should look good i think */
 a {
-    font-size: 18px;
+    font-size: 1.125rem;
     color: var(--green);
 }
 
 /* smol text */
 small, small a {
-    font-size: 14px;
+    font-size: 0.875rem;
 }
 
 /* lists need some styling */
@@ -644,7 +644,7 @@ footer {
     .fediring {
         a {
             display: inline-grid;
-            font-size: 24px;
+            font-size: 1.5rem;
             color: var(--green);
             margin-bottom: .5em;
             vertical-align: bottom;
@@ -687,7 +687,7 @@ footer {
     }
     p, a {
         text-align: center;
-        font-size: 15px;
+        font-size: 0.938rem;
         margin: .2em 0px .2em;
         text-decoration: none;
     }
@@ -800,6 +800,21 @@ footer {
     100% { background-position: 0% 27% }
 }
 
+/* disable certain animations if user has animations disabled on their system */
+
+@media (prefers-reduced-motion) {
+    body {
+        background: var(--base) !important;
+        animation: unset !important;
+        -moz-animation: unset !important;
+        -webkit-animation: unset !important;
+    }
+
+    #sneexy > section > #pfp {
+        animation: unset !important;
+    }
+}  
+
 /* modify widths and spacing depending on the size of the display */
 
 @media screen and (max-width: 59em) {