Respect prefers-reduced-motion when adding motion.

frjo · Jan 5, 2024 · 4bd1e30 · 4bd1e30
1 parent 5c62458
commit 4bd1e30
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/assets/sass/_reset.scss b/assets/sass/_reset.scss
@@ -12,8 +12,6 @@ html {
   min-height: 100%;
   // Use the saner border-box model.
   box-sizing: border-box;
-  // Use smooth scrolling.
-  scroll-behavior: smooth;
   // Improve text rendering.
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

diff --git a/assets/sass/base/links/_links.scss b/assets/sass/base/links/_links.scss
@@ -38,6 +38,14 @@ a:active {
   text-decoration: none;
 }
 
+// Use smooth scrolling unless user prefer less motion.
+@media (prefers-reduced-motion: no-preference) {
+  :has(:target) {
+    scroll-behavior: smooth;
+    scroll-padding-block-start: var(--gutters);
+  }
+}
+
 .link-nav,
 %link-nav {
   a {

diff --git a/assets/sass/mobile.scss b/assets/sass/mobile.scss
@@ -151,10 +151,13 @@
   &__toggle,
   &__hamburger rect,
   &__sheet {
-    transition: all 130ms ease-in;
+    // Add some transitions unless user prefer less motion.
+    @media (prefers-reduced-motion: no-preference) {
+      transition: all 130ms ease-in;
 
-    .js-nav-open & {
-      transition: all 330ms ease-out;
+      .js-nav-open & {
+        transition: all 330ms ease-out;
+      }
     }
   }
 }