Added support for prefers-reduced-transparency, prefers-contrast, and prefers-reduced-motion

README.md

@@ -37,6 +37,12 @@ Accord's Library v3.0 (shorten to AL3.0) follows the Metamodernist Web model des
   - Keyboard navigation
   - Hotkeys when applicable
 
+- Respect user preferences
+
+  - Support for prefers-reduced-transparency, prefers-contrast, and prefers-reduced-motion
+  - Theme switch: light, dark, auto
+  - Language and currency selection
+
 - Multilingual
 
   - Contents can be available in any number of languages

TODO.md

@@ -2,6 +2,7 @@
 
 ## Ongoing
 
+- [Bugs] Keziah reported some lag spikes when scrolling on the home page (Firefox on Windows)
 - [Feat] [Analytics] Add analytics
 - [Bugs] [Tooltips] Tooltip in under next element (example in timeline)
 - [Bugs] [Language override] Maso actor is not focusable with keyboard nav
@@ -28,6 +29,7 @@
 
 ## Long term
 
+- [Feat] Add reduce motion to element that zoom when hovering
 - [Bugs] [iOS] Video doesn't seem to start
 - [Feat] [Folders] Provide a list view, and a list/grid toggle
 - [Feat] [Payload] Endpoints should provide a simple text-based version of the content (for OG purposes)

src/components/AppLayout/AsideLayout.astro

@@ -100,6 +100,16 @@ const { reducedAsideWidth = false } = Astro.props;
 
     background-color: color-mix(in srgb, var(--color-elevation-0) 65%, transparent) !important;
     backdrop-filter: blur(15px);
+
+    @media (prefers-reduced-transparency) or (prefers-contrast: more) {
+      background-color: var(--color-elevation-0) !important;
+      backdrop-filter: unset;
+    }
+
+    @media print {
+      background-color: var(--color-base-0) !important;
+    }
+
     padding: 2em;
   }
 </style>

src/components/AppLayout/components/AppLayoutBackgroundImg.astro

@@ -20,7 +20,7 @@ const uniqueId = getRandomId();
 
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
-<div inert>
+<div inert class="when-no-print">
   <img
     id={uniqueId}
     src={url}
@@ -29,7 +29,6 @@ const uniqueId = getRandomId();
     width={width}
     height={height}
     loading="lazy"
-    class="when-no-print"
     decoding="async"
     alt=""
   />
@@ -75,15 +74,22 @@ const uniqueId = getRandomId();
     object-fit: cover;
     object-position: 50% 0;
 
+    --starting-opacity: 20%;
+    @media (prefers-reduced-transparency) or (prefers-contrast: more) {
+      --starting-opacity: 0%;
+    }
+
     mask-image: linear-gradient(to bottom, rgba(0 0 0 / 100%) min(50vh, 50%), transparent),
-      linear-gradient(to right, rgba(0 0 0 / 20%) 640px, black 1200px);
+      linear-gradient(to right, rgba(0 0 0 / var(--starting-opacity)) 640px, black 1200px);
     mask-composite: intersect;
 
-    @supports (animation-timeline: scroll(root)) {
-      --parallax-amount: 0.4;
-      animation-name: parallax;
-      animation-timing-function: linear;
-      animation-timeline: scroll(root);
+    @media (prefers-reduced-motion: no-preference) {
+      @supports (animation-timeline: scroll(root)) {
+        --parallax-amount: 0.4;
+        animation-name: parallax;
+        animation-timing-function: linear;
+        animation-timeline: scroll(root);
+      }
     }
   }
 </style>

src/components/AppLayout/components/Html.astro

@@ -610,6 +610,9 @@ const { currentTheme } = Astro.locals;
       &:focus-visible {
         color: var(--color-base-850);
         text-decoration-color: var(--color-base-750);
+      }
+
+      &:focus-visible {
         outline: 3px solid var(--color-base-750);
         outline-offset: 2px;
       }
@@ -704,6 +707,14 @@ const { currentTheme } = Astro.locals;
     border: 2px solid var(--foreground-color);
     background-color: color-mix(in srgb, var(--color-elevation-0) 60%, transparent);
 
+    @media (prefers-reduced-transparency) or (prefers-contrast: more) {
+      background-color: var(--color-elevation-0);
+    }
+
+    @media print {
+      background-color: var(--color-base-0);
+    }
+
     transition-duration: 250ms;
     transition-property: padding-top, box-shadow, background-color, color, border-color;
 

src/components/Card.astro

@@ -44,6 +44,11 @@ const { href, disableRoundedTop = false, class: className, ...otherProps } = Ast
     box-shadow: 0 1px 2px 0 var(--color-shadow-2);
     background-color: color-mix(in srgb, var(--color-elevation-2) 30%, transparent);
 
+    @media (prefers-reduced-transparency) or (prefers-contrast: more) {
+      background-color: var(--color-elevation-1);
+      border: 2px solid var(--color-base-650);
+    }
+
     &a {
       transition-duration: 150ms;
       transition-property: border-color, box-shadow, background-color;