From da553bd4d5786634e3a7b2e037f99ce10ff4d72c Mon Sep 17 00:00:00 2001
From: edo999 <edo999@gmail.com>
Date: Fri, 29 Mar 2024 11:06:58 +0000
Subject: [PATCH] =?UTF-8?q?Honour=20reduced=20motion=20preference=20?=
 =?UTF-8?q?=F0=9F=8F=8E=EF=B8=8F.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Card.astro               | 4 ++--
 src/components/social-icons/index.astro | 2 +-
 src/components/solidjs/MobileNav.tsx    | 2 +-
 src/styles/global.css                   | 4 ++++
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/Card.astro b/src/components/Card.astro
index 38797ea..e592a8b 100644
--- 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
index cb4dacd..e7f949f 100644
--- 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
index 150d6c4..6b64622 100644
--- 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
index ac57bf2..820a065 100644
--- 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. */