Honour reduced motion preference 🏎️.

gmarty · Mar 29, 2024 · da553bd · da553bd
1 parent 78c56b5
commit da553bd
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 4 deletions.
diff --git a/src/components/Card.astro b/src/components/Card.astro
@@ -20,7 +20,7 @@ const { index, title, year, description, imgSrc, imgType, href } = Astro.props
 ---
 
 <div
-  class:list={`${imgSrc ? 'h-full ' : ''} group relative overflow-hidden rounded-lg transition bg-primary-100 dark:bg-gray-900 hover:bg-primary-200 hover:dark:bg-gray-800`}
+  class:list={`${imgSrc ? 'h-full ' : ''} group relative overflow-hidden rounded-lg transition motion-reduce:transition-none bg-primary-100 dark:bg-gray-900 hover:bg-primary-200 hover:dark:bg-gray-800`}
 >
   {
     imgSrc && (
@@ -30,7 +30,7 @@ const { index, title, year, description, imgSrc, imgType, href } = Astro.props
           alt={title}
           src={imgSrc}
           class:list={[
-            'object-cover object-center aspect-[21/9] w-full transition group-hover:scale-105',
+            'object-cover object-center aspect-[21/9] w-full transition group-hover:scale-105 motion-reduce:group-hover:transform-none',
             { pixelated: imgType === 'pixelated' },
           ]}
           width={720}

diff --git a/src/components/social-icons/index.astro b/src/components/social-icons/index.astro
@@ -32,6 +32,6 @@ const sizeClass = size === 8 ? 'size-8' : 'size-6'
 
 <a class="text-sm" target="_blank" rel="noopener noreferrer" {href}
   ><span class="sr-only">{kind}</span><SocialSvg
-    class={`${sizeClass} fill-current transition themed-link hover:scale-110`}
+    class={`${sizeClass} fill-current transition motion-reduce:transition-none themed-link hover:scale-110 motion-reduce:hover:transform-none`}
   /></a
 >
diff --git a/src/components/solidjs/MobileNav.tsx b/src/components/solidjs/MobileNav.tsx
@@ -43,7 +43,7 @@ export default function MobileNav(props: {
       </button>
       <div
         ref={menuRef}
-        class="translate-x-full fixed left-0 top-0 h-full w-full transform opacity-95 bg-white duration-300 ease-in-out dark:bg-gray-950 z-20"
+        class="translate-x-full fixed left-0 top-0 h-full w-full opacity-95 bg-primary-50 dark:bg-gray-950 transition motion-reduce:transition-none z-20"
       >
         <div class="flex justify-end">
           <button

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -17,6 +17,10 @@
 body {
   transition-duration: 150ms;
   transition-property: color, background-color;
+
+  @media screen and (prefers-reduced-motion: reduce), (update: slow) {
+    transition-duration: 0s;
+  }
 }
 
 /* Slightly dim the images to avoid heavy contrast. */