Disable transitions for users who don’t want them

Author: csswizardry

css/_components.site-nav.scss

@@ -138,12 +138,21 @@ $_logo-height:   64px;
     contain: layout;
     content-visibility: hidden;
 
+    /**
+     * Disable transitions when the battery is low or critical, or if the user
+     * preferences reduced motion.
+     */
     .has-battery-low &,
     .has-battery-critical & {
       transition: none;
       will-change: auto;
     }
 
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+      will-change: auto;
+    }
+
     @supports (backdrop-filter: blur(5px)) {
       background-color: rgba($color-gray, 0.8);
       backdrop-filter: blur(5px);