prefers-reduced-motion a11y adjustment

Website/layouts/default.vue

@@ -114,6 +114,51 @@ html, body {
     transform: scale(1) translateY(0);
   }
 }
+
+/* reduced-motion animations */
+@media (prefers-reduced-motion) {
+  .fly-in-from-top {
+    opacity: 1;
+    transform: none;
+    animation: none;
+  }
+
+  .swoop-in-enter-active,
+  .swoop-in-leave-active,
+  .swoop-out-enter-active,
+  .swoop-out-leave-active,
+  .swoop-left-enter-active,
+  .swoop-left-leave-active,
+  .swoop-right-enter-active,
+  .swoop-right-leave-active {
+    transition-duration: 0.05s;
+    transition-property: opacity;
+  }
+
+  .swoop-left-enter,
+  .swoop-right-leave-active {
+    opacity: 0;
+    transform: none;
+  }
+
+  .swoop-left-leave-active,
+  .swoop-right-enter {
+    opacity: 0;
+    transform: none;
+  }
+
+  .swoop-in-enter,
+  .swoop-out-leave-active {
+    opacity: 0;
+    transform: none;
+  }
+
+  .swoop-in-leave-active,
+  .swoop-out-enter {
+    opacity: 0;
+    transform: none;
+  }
+}
 </style>
 
 <script>

Website/pages/index.vue

@@ -31,18 +31,20 @@
 <style scoped>
 #thumbslogo {
   opacity: 0;
+  transition-property: opacity, transform;
   transform: scale(0) rotate(180deg);
   animation: popin 1s 1s ease-in-out 1 forwards, thumbsflip 2s 3s ease-in-out infinite alternate;
 }
 @keyframes popin {
   0% {
-    transform: rotate(180deg) scale(0.5);
+    transform: rotate(180deg) scale(0);
     opacity: 0;
   } 100% {
     transform: rotate(0deg) scale(1);
     opacity: 1;
   }
 }
+
 @keyframes thumbsflip {
   0% {
     transform: rotate(0deg) scale(1);
@@ -52,6 +54,15 @@
     transform: rotate(180deg) scale(.9);
   }
 }
+
+/* reduced-motion animations */
+@media (prefers-reduced-motion) {
+  #thumbslogo {
+    opacity: 1;
+    transform: none;
+    animation: none;
+  }
+}
 </style>
 
 <script>