refactor some stuff

.gitignore

@@ -1,2 +1,3 @@
 other/**
+src/assets/media/**
 result

src/assets/css/style.css

@@ -18,9 +18,6 @@ body{
     align-items:center;
     background:#000
 }
-.content {
-    position:absolute
-}
 
 #bg-video {
     width: 100vw;
@@ -35,70 +32,37 @@ body{
     filter: brightness(75%);
 } 
 
-.content{
-    z-index:1;
-    display:flex;
-    flex-direction:column;
-    align-items:center;
-    mix-blend-mode:overlay;
-    filter:invert(100%)
-}
-img{
-    width:100vmin;
-    height:0vmin
-}
-canvas{
-    width:91vmin;
-    height:13vmin
-}
-h1{
-    font-size:5.25vmin;
-}
-h2{
-    font-size:2vmin;
-}
-.social, .social button {
-    margin-top:.5vmin;
-    font-family:brandon light;
-    font-size:4.25vmin;
-    letter-spacing:.3vmin
+#home {
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    mix-blend-mode: overlay;
+    filter: invert(100%);
+    position: absolute;
+    & h1 {
+        font-size:5.25vmin;
+    }
+    & h2 {
+        font-size:2vmin;
+    }
+    & .social {
+        margin-top:.5vmin;
+        font-family:brandon light;
+        font-size:4.25vmin;
+        letter-spacing:.3vmin;
+        & a {
+            text-decoration:none;
+            color:#000;
+        }
+    }
 }
 
-button {
-    border: none;
-    background: none;
-    cursor: pointer
-}
-.social a{
-    text-decoration:none;
-    color:#000;
-}
 #nav-as, #nav-home {
     cursor: pointer;
 }
-.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
-}
 
-/*.center{
-    text-align: -webkit-center;
-}*/
-
-.img {
-    border: none;
-}
-
-.content2 {
+.content {
     font-family: Calibri, monospace;
     text-shadow: 0.06vw 0.06vw 0px rgba(8,230,255,100), -0.06vw -0.06vw 0px rgba(255,0,0,100);
     position: absolute;
@@ -109,10 +73,10 @@ button {
     align-items: center;
     justify-content: center;
     background-color: rgba(0,0,0,0.5);
-}
-.content2 button {
-    font-family: Calibri, monospace;
-    text-shadow: 0.06vw 0.06vw 0px rgba(8,230,255,100), -0.06vw -0.06vw 0px rgba(255,0,0,100);
+    color: #FFFFFF;
+    text-decoration: none;
+    font-size: 1.39vmin;
+    font-weight: bold;
 }
 
 .container {
@@ -121,17 +85,24 @@ button {
     display: flex;
     flex-direction: column;
     align-items: center;
+    & pre {
+        display: inline-block;
+        & a {
+            color: #ffffff;
+        }
+    }
 }
 
-.container pre {
-    display: inline-block;
-}
-
-.container h1, .container button {
-    color: #FFFFFF;
-    text-decoration: none;
-    font-size: 1.39vmin;
-}
-.container a , .container button {
-    color: #ffffff
+.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;
 }

src/assets/js/app.js

@@ -1,4 +1,4 @@
-'use strict';
+//'use strict';
 (function() {
     var title = document.title,
         animSeq = ["/", "$", "\\", "|", "$"],
@@ -22,31 +22,27 @@
 })();
 
 const qS = q => document.querySelector(q);
-const video = qS('video');
 let initialized = false;
-
 document.getElementById("hint").addEventListener('click', _ => {
     if (!initialized) {
-        video.muted = false;
-        initialized = true;
+        qS('video').muted = false;
         qS('.hint').style.display = 'none';
+        initialized = true;
     }
 });
-document.getElementById("nav-as").addEventListener('click', _ => {
-    nav('as');
-});
-document.getElementById("nav-home").addEventListener('click', _ => {
-    nav('home');
+
+const sites = ['as', 'home'];
+sites.forEach((item) => {
+    document.getElementById(`nav-${item}`).addEventListener('click', _ => {
+        nav(`${item}`);
+    });
 });
 
 function nav(site) {
-    const home = document.getElementById('content');
-    const as = document.getElementById('content2');
-    if (site == "as") {
-        home.style.display = 'none';
-        as.style.display = '';
-    } else {
-        home.style.display = '';
-        as.style.display = 'none';
-    }
+    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

@@ -9,22 +9,20 @@
 </head>
 <body>
     <video id="bg-video" autoplay muted playsinline loop>
-	    <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" />
+	    <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 class="content" id="content">
+    <div id="home">
         <h1>K Y O U M A . N E T</h1>
         <h2>BE GAY DO CRIME</h2>
         <div class="social">
-            <p>
-	    	<a id="nav-as">as203819</a> $
-                <a target="_self" href="https://emily.cat/">blog</a>
-            </p>
+	    	    <a id="nav-as">as203819</a> $
+            <a target="_self" href="https://emily.cat/">blog</a>
         </div>
     </div>
-    <div class="content2" id="content2" style="display: none">         
+    <div class="content" id="as" style="display: none">         
         <div class="container">
-            <pre><h1> 
+            <pre> 
    ________      ________        _______      ________      ________      ________       _____      ________
   |\   __  \    |\   ____\      /  ___  \    |\   __  \    |\_____  \    |\   __  \     / __  \    |\  ___  \
   \ \  \|\  \   \ \  \___|_    /__/|_/  /|   \ \  \|\  \   \|____|\ /_   \ \  \|\  \   |\/_|\  \   \ \____   \
@@ -66,7 +64,7 @@
 |                                                                         |                                       |
 +-------------------------------------------------------------------------+---------------------------------------+
  <a id="nav-home">&lt;- Back</a>
-            </h1></pre>
+            </pre>
         </div>
     </div>
     <div class="hint" id="hint">HIT ME FOR SOUND</div>