Merge pull request #117 from henriksommerfeld/reduces-motion

Reduce motion in more concise way

assets/styles/_animation-variables.scss

@@ -0,0 +1,36 @@
+body {
+  --theme-switcher-speed: 500ms;
+  --nav-open-speed: 400ms;
+  --nav-close-speed: 500ms;
+  --hamburger-speed: 400ms;
+  --hamburger-bar-speed: 150ms;
+  --lightbox-speed: 300ms;
+  --background-animation-speed: 300ms;
+  --link-outline-speed: 60ms;
+  --link-speed: 200ms;
+  --comments-button-speed: 200ms;
+  --comments-button-margin-speed: 150ms;
+  --image-maximizer-speed: 200ms;
+  --searchbox-open-speed: 300ms;
+  --page-numbers-speed: 200ms;
+  --page-numbers-margin-speed: 150ms;
+  --modal-speed: 300ms;
+  @media (prefers-reduced-motion: reduce) {
+    --theme-switcher-speed: 1ms;
+    --nav-open-speed: 1ms;
+    --nav-close-speed: 1ms;
+    --hamburger-speed: 1ms;
+    --hamburger-bar-speed: 1ms;
+    --lightbox-speed: 1ms;
+    --background-animation-speed: 1ms;
+    --link-outline-speed: 1ms;
+    --link-speed: 1ms;
+    --comments-button-speed: 1ms;
+    --comments-button-margin-speed: 1ms;
+    --image-maximizer-speed: 1ms;
+    --searchbox-open-speed: 1ms;
+    --page-numbers-speed: 1ms;
+    --page-numbers-margin-speed: 1ms;
+    --modal-speed: 1ms;
+  }
+}

assets/styles/_comments-button.scss

@@ -16,7 +16,9 @@
   border: 1px solid var(--paging-border-color);
   color: var(--paging-color);
   font-size: 1.05rem;
-  transition: all 200ms ease, margin 150ms ease;
+  transition:
+    all var(--comments-button-speed) ease,
+    margin var(--comments-button-margin-speed) ease;
   box-shadow: 0 5px 10px var(--paging-box-shadow-color);
   outline: none;
   &:focus,

assets/styles/_hamburger-icon.scss

@@ -1,7 +1,6 @@
 $bar-width: 27px;
 $bar-height: 4px;
 $bar-spacing: $bar-height * 2;
-$animation-speed: 150ms;
 
 .hamburger-menu {
   width: $bar-width;
@@ -35,7 +34,7 @@ $animation-speed: 150ms;
   padding: $default-spacing;
   outline: none;
   border-bottom: transparent solid 1px;
-  transition: border 400ms ease;
+  transition: border var(--hamburger-speed) ease;
   font-size: 1.1rem;
   letter-spacing: 0.1rem;
   cursor: pointer;
@@ -55,8 +54,9 @@ $animation-speed: 150ms;
   left: 0;
   bottom: $bar-spacing;
   background: var(--white);
-  transition: bottom $animation-speed $animation-speed cubic-bezier(0.23, 1, 0.32, 1),
-    transform $animation-speed cubic-bezier(0.23, 1, 0.32, 1);
+  transition:
+    bottom var(--hamburger-bar-speed) var(--hamburger-bar-speed) cubic-bezier(0.23, 1, 0.32, 1),
+    transform var(--hamburger-bar-speed) cubic-bezier(0.23, 1, 0.32, 1);
 }
 
 .bar::after {
@@ -65,8 +65,9 @@ $animation-speed: 150ms;
   left: 0;
   top: $bar-spacing;
   background: var(--white);
-  transition: top $animation-speed $animation-speed cubic-bezier(0.23, 1, 0.32, 1),
-    transform $animation-speed cubic-bezier(0.23, 1, 0.32, 1);
+  transition:
+    top var(--hamburger-bar-speed) var(--hamburger-bar-speed) cubic-bezier(0.23, 1, 0.32, 1),
+    transform var(--hamburger-bar-speed) cubic-bezier(0.23, 1, 0.32, 1);
 }
 
 .bar.animate {
@@ -77,14 +78,16 @@ $animation-speed: 150ms;
   visibility: visible;
   top: 0;
   transform: rotate(45deg);
-  transition: top $animation-speed cubic-bezier(0.23, 1, 0.32, 1),
-    transform $animation-speed $animation-speed cubic-bezier(0.23, 1, 0.32, 1);
+  transition:
+    top var(--hamburger-bar-speed) cubic-bezier(0.23, 1, 0.32, 1),
+    transform var(--hamburger-bar-speed) var(--hamburger-bar-speed) cubic-bezier(0.23, 1, 0.32, 1);
 }
 
 .bar.animate:before {
   visibility: visible;
   bottom: 0;
   transform: rotate(-45deg);
-  transition: bottom $animation-speed cubic-bezier(0.23, 1, 0.32, 1),
-    transform $animation-speed $animation-speed cubic-bezier(0.23, 1, 0.32, 1);
+  transition:
+    bottom var(--hamburger-bar-speed) cubic-bezier(0.23, 1, 0.32, 1),
+    transform var(--hamburger-bar-speed) var(--hamburger-bar-speed) cubic-bezier(0.23, 1, 0.32, 1);
 }

assets/styles/_header.scss

@@ -126,7 +126,9 @@ nav {
       .header-content &:focus,
       .header-content &:active {
         background-color: transparent;
-        text-shadow: 0 0 2px var(--header-text-shadow), 0 0 30px var(--header-color);
+        text-shadow:
+          0 0 2px var(--header-text-shadow),
+          0 0 30px var(--header-color);
       }
       .header-content &:focus {
         outline: none;
@@ -147,7 +149,9 @@ nav {
       }
     }
     &:focus {
-      text-shadow: 0 0 1px var(--header-color), 0px 3px 5px rgba(black, 0.5);
+      text-shadow:
+        0 0 1px var(--header-color),
+        0px 3px 5px rgba(black, 0.5);
       outline: transparentize(#555, 0.5) solid 1px;
       outline-offset: 0;
     }
@@ -159,14 +163,14 @@ nav {
   &.open {
     opacity: 1;
     pointer-events: painted;
-    animation: fold-in 400ms forwards;
+    animation: fold-in var(--nav-open-speed) forwards;
     display: flex;
     border-bottom: 1px solid var(--mobile-nav-border-color);
   }
 
   &.closing {
     pointer-events: painted;
-    animation: fold-out 500ms forwards;
+    animation: fold-out var(--nav-close-speed) forwards;
   }
 }
 

assets/styles/_links.scss

@@ -1,7 +1,11 @@
 a {
   color: var(--link-color);
   text-decoration: none;
-  transition: color, text-shadow, background 200ms ease-out, outline 60ms;
+  transition:
+    color,
+    text-shadow,
+    background var(--link-speed) ease-out,
+    outline var(--link-outline-speed);
   outline: none;
   display: inline;
   background: linear-gradient(to bottom, var(--link-underline) 0%, var(--link-underline) 98%);

assets/styles/_modal.scss

@@ -37,7 +37,7 @@ body.modal-open {
   opacity: 1;
   visibility: visible;
   @include background;
-  animation: modalOpen 300ms ease-in-out;
+  animation: modalOpen var(--modal-speed) ease-in-out;
   @media screen and (prefers-reduced-motion: reduce) {
     animation: none;
   }
@@ -47,7 +47,7 @@ body.modal-open {
   visibility: hidden;
   opacity: 0;
   @include background;
-  animation: modalClose 300ms ease-in-out;
+  animation: modalClose var(--modal-speed) ease-in-out;
   @media screen and (prefers-reduced-motion: reduce) {
     animation: none;
   }

assets/styles/_paging-controls.scss

@@ -10,7 +10,9 @@
   background: var(--paging-bg-color);
   border: 1px solid var(--paging-border-color);
   color: var(--color);
-  transition: all 200ms ease, margin 150ms ease;
+  transition:
+    all var(--page-numbers-speed) ease,
+    margin var(--page-numbers-margin-speed) ease;
   box-shadow: 0 2px 6px var(--paging-box-shadow-color);
   &:hover:after {
     width: initial;
@@ -35,7 +37,7 @@
       display: inline-block;
       margin-left: 0.5em;
       margin-right: 0.2em;
-      transition: margin 150ms ease;
+      transition: margin var(--page-numbers-margin-speed) ease;
     }
     &:hover .icon {
       margin-left: 0.7em;
@@ -49,7 +51,7 @@
       display: inline-block;
       margin-right: 0.5em;
       margin-left: 0.2em;
-      transition: margin 150ms ease;
+      transition: margin var(--page-numbers-margin-speed) ease;
     }
     &:hover .icon {
       margin-right: 0.7em;

assets/styles/_searchbox.scss

@@ -65,7 +65,7 @@ $search-min-wide: 150em;
     transform-origin: scale(0);
     visibility: visible;
     opacity: 1;
-    animation: searchboxOpen 300ms ease-in-out forwards;
+    animation: searchboxOpen var(--searchbox-open-speed) ease-in-out forwards;
   }
   &.close {
     transform-origin: 0% 0% scale(1);

assets/styles/_theme-switcher.scss

@@ -1,4 +1,5 @@
-$theme-switcher-speed: 500ms;
+@import './animation-variables';
+
 .theme-switcher {
   display: none;
 
@@ -47,20 +48,25 @@ $theme-switcher-speed: 500ms;
         border-radius: inherit;
         background: #283446;
         background: linear-gradient(#36455b, #283446);
-        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 8px rgba(0, 0, 0, 0.3),
+        box-shadow:
+          inset 0 1px 0 rgba(255, 255, 255, 0.2),
+          0 0 8px rgba(0, 0, 0, 0.3),
           0 12px 12px rgba(0, 0, 0, 0.4);
-        -webkit-transition: all $theme-switcher-speed ease;
-        transition: all $theme-switcher-speed ease;
+        -webkit-transition: all var(--theme-switcher-speed) ease;
+        transition: all var(--theme-switcher-speed) ease;
       }
 
       &:checked ~ label {
         i {
           left: auto;
           left: 55px;
-          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 8px rgba(0, 0, 0, 0.3),
-            0 8px 8px rgba(0, 0, 0, 0.3), inset -1px 0 1px #b9f3fe;
-          -webkit-transition: all $theme-switcher-speed ease;
-          transition: all $theme-switcher-speed ease;
+          box-shadow:
+            inset 0 1px 0 rgba(255, 255, 255, 0.2),
+            0 0 8px rgba(0, 0, 0, 0.3),
+            0 8px 8px rgba(0, 0, 0, 0.3),
+            inset -1px 0 1px #b9f3fe;
+          -webkit-transition: all var(--theme-switcher-speed) ease;
+          transition: all var(--theme-switcher-speed) ease;
         }
 
         + span {
@@ -70,14 +76,18 @@ $theme-switcher-speed: 500ms;
           width: 10px;
           height: 10px;
           border-radius: 10px;
-          -webkit-transition: all $theme-switcher-speed ease;
-          transition: all $theme-switcher-speed ease;
+          -webkit-transition: all var(--theme-switcher-speed) ease;
+          transition: all var(--theme-switcher-speed) ease;
           z-index: 2;
           background: #b9f3fe;
           background: gradient-gradient(#ffffff, #77a1b9);
-          box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1),
-            0 0 10px rgba(100, 231, 253, 1), inset 0 0 8px rgba(61, 157, 247, 0.8),
-            inset 0 -2px 5px rgba(185, 231, 253, 0.3), inset 0 -3px 8px rgba(185, 231, 253, 0.5);
+          box-shadow:
+            inset 0 1px 0 rgba(0, 0, 0, 0.1),
+            0 1px 0 rgba(255, 255, 255, 0.1),
+            0 0 10px rgba(100, 231, 253, 1),
+            inset 0 0 8px rgba(61, 157, 247, 0.8),
+            inset 0 -2px 5px rgba(185, 231, 253, 0.3),
+            inset 0 -3px 8px rgba(185, 231, 253, 0.5);
         }
       }
     }
@@ -91,10 +101,12 @@ $theme-switcher-speed: 500ms;
     background: #1f2736;
     background: linear-gradient(#121823, #161d2b);
     border-radius: 30px 30px 30px 30px;
-    box-shadow: inset 0 3px 8px 1px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(0, 0, 0, 0.5),
+    box-shadow:
+      inset 0 3px 8px 1px rgba(0, 0, 0, 0.5),
+      inset 0 1px 0 rgba(0, 0, 0, 0.5),
       0 1px 0 rgba(255, 255, 255, 0.2);
-    -webkit-transition: all $theme-switcher-speed ease;
-    transition: all $theme-switcher-speed ease;
+    -webkit-transition: all var(--theme-switcher-speed) ease;
+    transition: all var(--theme-switcher-speed) ease;
 
     + span {
       content: '';
@@ -107,11 +119,15 @@ $theme-switcher-speed: 500ms;
       border-radius: 10px;
       background: #283446;
       background: gradient-gradient(#36455b, #283446);
-      box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.1),
-        0 0 10px rgba(185, 231, 253, 0), inset 0 0 8px rgba(0, 0, 0, 0.9), inset 0 -2px 5px rgba(0, 0, 0, 0.3),
+      box-shadow:
+        inset 0 1px 0 rgba(0, 0, 0, 0.2),
+        0 1px 0 rgba(255, 255, 255, 0.1),
+        0 0 10px rgba(185, 231, 253, 0),
+        inset 0 0 8px rgba(0, 0, 0, 0.9),
+        inset 0 -2px 5px rgba(0, 0, 0, 0.3),
         inset 0 -5px 5px rgba(0, 0, 0, 0.5);
-      -webkit-transition: all $theme-switcher-speed ease;
-      transition: all $theme-switcher-speed ease;
+      -webkit-transition: all var(--theme-switcher-speed) ease;
+      transition: all var(--theme-switcher-speed) ease;
       z-index: 2;
     }
   }

assets/styles/code/code.scss

@@ -1,4 +1,5 @@
 @import './_theme-switcher';
+@import './animation-variables';
 
 code {
   word-wrap: break-word;
@@ -15,8 +16,8 @@ li {
     white-space: pre-wrap;
     font-size: large;
     transition:
-      background-color $theme-switcher-speed ease-in,
-      border-color $theme-switcher-speed ease-in;
+      background-color var(--theme-switcher-speed) ease-in,
+      border-color var(--theme-switcher-speed) ease-in;
   }
 }
 
@@ -30,8 +31,8 @@ pre {
   border-radius: $border-radius;
   line-height: 1.55em;
   transition:
-    background-color $theme-switcher-speed ease-in,
-    border-color $theme-switcher-speed ease-in;
+    background-color var(--theme-switcher-speed) ease-in,
+    border-color var(--theme-switcher-speed) ease-in;
   code {
     word-wrap: normal;
     text-shadow: none;

assets/styles/code/highlight-general.scss

@@ -1,4 +1,5 @@
 @import './_theme-switcher';
+@import './animation-variables';
 @import './pygments-jellybeans';
 @import './manni';
 
@@ -32,9 +33,9 @@ article .highlight {
     color: var(--highlight-color);
     border: 1px solid var(--inline-code-border-color);
     transition:
-      background-color $theme-switcher-speed ease-in,
-      border-color $theme-switcher-speed ease-in,
-      color $theme-switcher-speed ease-in;
+      background-color var(--theme-switcher-speed) ease-in,
+      border-color var(--theme-switcher-speed) ease-in,
+      color var(--theme-switcher-speed) ease-in;
   }
   .lineno {
     color: #aaa;
@@ -84,7 +85,7 @@ article .highlight {
   margin: 0;
   max-width: 100vw;
   max-height: 100vh;
-  transition: transform 300ms ease-in-out;
+  transition: transform var(--lightbox-speed) ease-in-out;
   cursor: pointer;
   @media screen and (prefers-reduced-motion: reduce) {
     transform: none;

assets/styles/images/figure.scss

@@ -48,7 +48,10 @@ figure {
         background-repeat: no-repeat;
         background-position: center center;
         background-size: 30%;
-        animation: maximizer 200ms ease-out forwards;
+        animation: maximizer var(--image-maximizer-speed) ease-out forwards;
+        @media (prefers-reduced-motion: reduce) {
+          content: unset;
+        }
       }
     }
   }