From d6b75a73fdfd8a884ea90ce4b2194f9dd5e6ea57 Mon Sep 17 00:00:00 2001
From: emily <ek@kyouma.net>
Date: Sun, 22 Sep 2024 18:33:17 +0200
Subject: [PATCH] Honor prefers-reduced-motion setting

---
 src/assets/css/style.css | 87 ++++++++++++++++++++++++----------------
 1 file changed, 52 insertions(+), 35 deletions(-)

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index f85b8f0..f27bab3 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -1,24 +1,24 @@
 @font-face{
-  font-family:brandon light;
-  src:url(../font.woff2)
+  font-family: brandon light;
+  src: url(../font.woff2);
 }
 *{
-  margin:0;
-  padding:0;
-  position:relative;
-  box-sizing:border-box;
-  overflow:hidden
+  margin: 0;
+  padding: 0;
+  position: relative;
+  box-sizing: border-box;
+  overflow: hidden;
 }
 
 html,body{
-  height:100%
+  height: 100%;
 }
 
 body{
-  display:flex;
-  justify-content:center;
-  align-items:center;
-  background:#000
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #000;
 }
 
 #bg-video {
@@ -34,11 +34,11 @@ body{
   filter: brightness(75%);
 } 
 
-.nav-home, .nav-as, .nav-about {
+a[class^="nav-"] {
   cursor: pointer;
 }
 
-#home {
+#page-home {
   z-index: 1;
   display: flex;
   flex-direction: column;
@@ -47,21 +47,21 @@ body{
   filter: invert(100%);
   position: absolute;
   & h1 {
-    font-size:5.25vmin;
+    font-size: 5.25vmin;
   }
   & h2 {
-    font-size:2vmin;
+    font-size: 2vmin;
     letter-spacing: 0.25em;
     margin-right: -0.25em;
   }
-  & .social {
-    margin-top:.5vmin;
-    font-family:brandon light;
-    font-size:4.25vmin;
-    letter-spacing:.3vmin;
+  & .links {
+    margin-top: .5vmin;
+    font-family: brandon light;
+    font-size: 4.25vmin;
+    letter-spacing: .3vmin;
     & a {
-      text-decoration:none;
-      color:#000;
+      text-decoration: none;
+      color: #000;
     }
   }
 }
@@ -77,7 +77,7 @@ body{
   align-items: center;
   justify-content: center;
   background-color: rgba(0,0,0,0.5);
-  color: #FFFFFF;
+  color: #ffffff;
   text-decoration: none;
   font-size: 1.39vmin;
   font-weight: bold;
@@ -90,15 +90,32 @@ body{
 }
 
 .hint {
-  z-index:1;
-  color:#000;
-  mix-blend-mode:overlay;
-  filter:invert(100%);
-  position:fixed;
-  bottom:6vmin;
-  font-family:brandon light;
-  font-size:2.75vmin;
-  letter-spacing:.2vmin;
-  font-weight:700;
-  cursor:pointer;
+  z-index: 1;
+  color: #000;
+  mix-blend-mode: overlay;
+  filter: invert(100%);
+  position: fixed;
+  bottom: 6vmin;
+  font-family: brandon light;
+  font-size: 2.75vmin;
+  letter-spacing: .2vmin;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+@media (prefers-reduced-motion) {
+  #bg-video {
+    visibility: hidden;
+  }
+  #page-home {
+    color: #ffffff;
+    filter: none;
+    mix-blend-mode: unset;
+    & .links a {
+      color: #ffffff;
+    }
+  }
+  .hint {
+    visibility: hidden;
+  }
 }