Refactor js

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;
+  }
 }

src/assets/js/app.js

@@ -30,20 +30,12 @@ document.getElementById("hint").addEventListener('click', _ => {
   }
 });
 
-const sites = ['as', 'home', 'about'];
-sites.forEach((item) => {
-  document.querySelectorAll(`.nav-${item}`).forEach((a) => {
-    a.addEventListener('click', _ => {
-      nav(item);
+const sites = document.querySelectorAll('[id^=page-]');
+sites.forEach((site) => {
+  site.querySelectorAll('[class^=nav-]').forEach((button) => {
+    button.addEventListener('click', _ => {
+      site.style.display = 'none';
+      document.querySelector(`#page-${button.className.replace('nav-', '')}`).style.display = '';
     });
   });
 });
-
-function nav(site) {
-  const bg = [...sites];
-  bg.splice(sites.indexOf(site), 1);
-  bg.forEach((item) => {
-    document.getElementById(item).style.display = 'none';
-  });
-  document.getElementById(site).style.display = '';
-}

src/index.html

@@ -12,15 +12,15 @@
 	    <source src="assets/media/sunnyday-av1.mp4" type="video/mp4;codecs=av01.0.08M.08">
 	    <source src="assets/media/sunnyday-avc.mp4" type="video/mp4;codecs=avc1.4D401F">
     </video>
-    <div id="home">
+    <div id="page-home">
         <h1>KYOUMA.NET</h1>
         <h2>BE GAY DO CRIME</h2>
-        <div class="social">
-	    	    <a class="nav-as">as203819</a> $
+        <div class="links">
+	    	    <a class="nav-as203819">as203819</a> $
 	    	    <a class="nav-about">about</a>
         </div>
     </div>
-    <div class="content" id="as" style="display: none">         
+    <div class="content" id="page-as203819" style="display: none">         
         <pre>
    ________      ________        _______      ________      ________      ________       _____      ________
   |\   __  \    |\   ____\      /  ___  \    |\   __  \    |\_____  \    |\   __  \     / __  \    |\  ___  \
@@ -65,7 +65,7 @@
  <a class="nav-home">&lt;- Home</a>                                                                                                  <a class="nav-about">about -&gt;</a>
         </pre>
     </div>
-    <div class="content" id="about" style="display: none">         
+    <div class="content" id="page-about" style="display: none">         
         <pre>
    ________      ________      ________      ___  ___      _________                                               
   |\   __  \    |\   __  \    |\   __  \    |\  \|\  \    |\___   ___\                                             
@@ -107,7 +107,7 @@
 |                                                                         |                                       |
 |                                                                         |                                       |
 +-------------------------------------------------------------------------+---------------------------------------+
- <a class="nav-home">&lt;- Home</a>                                                                                               <a class="nav-as">as203819 -&gt;</a>
+ <a class="nav-home">&lt;- Home</a>                                                                                               <a class="nav-as203819">as203819 -&gt;</a>
         </pre>
     </div>
     <div class="hint" id="hint">HIT ME FOR SOUND</div>