snaki
/
kyouma-net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor some stuff

Browse Source
main
emily 4 months ago
parent 16b9377dff
commit d0bc2222a0
Signed by: snaki
GPG Key ID: F6F4C66207FCF995
4 changed files with 71 additions and 105 deletions
Show Stats Download Patch File Download Diff File

1
.gitignore vendored
Unescape Escape View File

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

123
src/assets/css/style.css
Unescape Escape View File

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

34
src/assets/js/app.js
Unescape Escape View File

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

18
src/index.html
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save