fix: Improved reduced motion

src/components/my-marquee.js

@@ -44,6 +44,12 @@ function getTemplate() {
             transform: translateX(25%);
         }
     }
+
+    @media (prefers-reduced-motion: reduce) {
+        .marquee-content {
+            animation-play-state: paused;
+        }
+    }
 </style>
 
 <div class="marquee-wrapper">

style.css

@@ -615,36 +615,42 @@ h1::after {
     flex-direction: column;
 }
 
+/* URL animations */
 /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion */
+
+/* URL animation on hover
+   Draw a line from left to right when hovering over the link */
+a {
+    /* Reset to default text color */
+    color: inherit;
+    position: relative;
+}
+
+a::before {
+    content: '';
+    position: absolute;
+    /* Height of the line */
+    bottom: -1px;
+    height: var(--line-thickness);
+    left: 0;
+    width: 0;
+    background-color: var(--primary-color);
+}
+
+a:hover::before {
+    width: 100%;
+}
+
+/* Don't underline img/icons with urls */
+a:has(.icon)::before {
+    display: none;
+}
+
 @media (prefers-reduced-motion: no-preference) {
-    /* URL animation on hover
-       Draw a line from left to right when hovering over the link */
-    a {
-        /* Reset to default text color */
-        color: inherit;
-        position: relative;
-    }
-
     a::before {
-        content: '';
-        position: absolute;
-        /* Height of the line */
-        bottom: -1px;
-        height: var(--line-thickness);
-        left: 0;
-        width: 0;
-        background-color: var(--primary-color);
         transition: width var(--animation-duration) ease;
     }
 
-    a:has(.icon)::before {
-        display: none;
-    }
-
-    a:hover::before {
-        width: 100%;
-    }
-
     button:hover {
         transition: background-color var(--animation-duration) ease, color var(--animation-duration) ease;
     }