reduce motion, re #125

resources/assets/stylesheets/less/header.less

@@ -200,8 +200,11 @@
     overflow-x: hidden;
     padding: 0;
     text-indent: -150px;
+
+    @media not (prefers-reduced-motion) {
         transition: all 500ms;
     }
+}
 body.fixed {
     #barBottomLeft {
         overflow-x: visible;

resources/assets/stylesheets/less/links.less

@@ -12,8 +12,10 @@ a, a:link, a:visited {
     }
 }
 a[href] {
+    @media not (prefers-reduced-motion) {
         transition: color 0.3s;
     }
+}
 a[disabled] {
     pointer-events: none;
 }

resources/assets/stylesheets/less/navigation-hoverborder.less

@@ -22,11 +22,13 @@
         height: @height;
         margin-top: @margin;
 
+        @media not (prefers-reduced-motion) {
             transition: left @transition-duration,
                         right @transition-duration,
                         opacity @transition-duration;
         }
     }
+}
 .border-shrink() {
     left: 50%;
     right: 50%;

resources/assets/stylesheets/less/navigation.less

@@ -85,17 +85,21 @@ body:not(.fixed) #barTopMenu {
     // Hide all navigation item title on hover and display only the currently
     // hovered one
     .navtitle {
+        @media not (prefers-reduced-motion) {
             transition: opacity 300ms; // Smooth change when entering
         }
+    }
     &:hover {
         > li.active .navtitle {
             opacity: 0;
         }
         > li:hover .navtitle {
             opacity: 1;
+            @media not (prefers-reduced-motion) {
                 transition: opacity 0ms; // Quick change when leaving
             }
         }
+    }
 
     // Recolor on hover and for active items
     li:hover,
@@ -125,14 +129,18 @@ body:not(.fixed) #barTopMenu {
 
         // Rotate icon
         > label img {
+            @media not (prefers-reduced-motion) {
                 transition: transform 300ms;
+            }
             transform: rotate(90deg);
         }
 
         // Define transition duration for possible badge on overflow
         > label > a[data-badge]::before {
+            @media not (prefers-reduced-motion) {
                 transition: opacity 300ms;
             }
+        }
 
         // Display menu on activation
         &:hover label,
@@ -225,7 +233,9 @@ label[for="barTopMenu-toggle"] {
     height: 0;
     max-height: 0;
     opacity: 0;
+    @media not (prefers-reduced-motion) {
         transition: all 300ms;
+    }
 
     // 1/4 of the screen's width, creates a bigger hover area
     width: 25vw;