diff --git a/src/assets/css/style.css b/src/assets/css/style.css index d24727e..b1caa0c 100644 --- a/src/assets/css/style.css +++ b/src/assets/css/style.css @@ -1,108 +1,110 @@ @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 { - width: 100vw; - height: 100vh; - object-fit: cover; - position: fixed; - left: 0; - right: 0; - top: 0; - bottom: 0; - z-index: -1; - filter: brightness(75%); + width: 100vw; + height: 100vh; + object-fit: cover; + position: fixed; + left: 0; + right: 0; + top: 0; + bottom: 0; + z-index: -1; + filter: brightness(75%); } -#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; - } - } +#nav-as, #nav-home { + cursor: pointer; } -#nav-as, #nav-home { - cursor: pointer; +#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; + } + } } .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; - width: 100%; - min-height: 100%; - z-index: 1; - display: flex; - align-items: center; - justify-content: center; - background-color: rgba(0,0,0,0.5); - color: #FFFFFF; - text-decoration: none; - font-size: 1.39vmin; - font-weight: bold; + 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; + width: 100%; + min-height: 100%; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + background-color: rgba(0,0,0,0.5); + color: #FFFFFF; + text-decoration: none; + font-size: 1.39vmin; + font-weight: bold; } .container { - text-align: left; - position: absolute; - display: flex; - flex-direction: column; - align-items: center; - & pre { - display: inline-block; - & a { - color: #ffffff; - } + text-align: left; + position: absolute; + display: flex; + flex-direction: column; + align-items: center; + & pre { + display: inline-block; + & a { + 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; + 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; } diff --git a/src/assets/js/app.js b/src/assets/js/app.js index 4d19b2c..98f558c 100644 --- a/src/assets/js/app.js +++ b/src/assets/js/app.js @@ -1,48 +1,48 @@ //'use strict'; (function() { - var title = document.title, - animSeq = ["/", "$", "\\", "|", "$"], - animIndex = 0, - titleIndex = 0; + var title = document.title, + animSeq = ["/", "$", "\\", "|", "$"], + animIndex = 0, + titleIndex = 0; - function doInverseSpinZeroPitch() { - var loadTitle = title.substring(0, titleIndex); - if (titleIndex > title.length) { - animIndex = 0; - titleIndex = 0 - } - if (animIndex > 3) { - titleIndex++; - animIndex = 0 - } - document.title = loadTitle + animSeq[animIndex]; - animIndex++ + function doInverseSpinZeroPitch() { + var loadTitle = title.substring(0, titleIndex); + if (titleIndex > title.length) { + animIndex = 0; + titleIndex = 0 } - window.setInterval(doInverseSpinZeroPitch, 50); + if (animIndex > 3) { + titleIndex++; + animIndex = 0 + } + document.title = loadTitle + animSeq[animIndex]; + animIndex++ + } + window.setInterval(doInverseSpinZeroPitch, 50); })(); const qS = q => document.querySelector(q); let initialized = false; document.getElementById("hint").addEventListener('click', _ => { - if (!initialized) { - qS('video').muted = false; - qS('.hint').style.display = 'none'; - initialized = true; - } + if (!initialized) { + qS('video').muted = false; + qS('.hint').style.display = 'none'; + initialized = true; + } }); const sites = ['as', 'home']; sites.forEach((item) => { - document.getElementById(`nav-${item}`).addEventListener('click', _ => { - nav(`${item}`); - }); + document.getElementById(`nav-${item}`).addEventListener('click', _ => { + nav(`${item}`); + }); }); 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 = ''; + const bg = [...sites]; + bg.splice(sites.indexOf(site), 1); + bg.forEach((item) => { + document.getElementById(item).style.display = 'none'; + }); + document.getElementById(site).style.display = ''; }