refactor some stuff
This commit is contained in:
parent
16b9377dff
commit
d0bc2222a0
1
.gitignore
vendored
1
.gitignore
vendored
|
@ -1,2 +1,3 @@
|
|||
other/**
|
||||
src/assets/media/**
|
||||
result
|
||||
|
|
|
@ -18,9 +18,6 @@ body{
|
|||
align-items:center;
|
||||
background:#000
|
||||
}
|
||||
.content {
|
||||
position:absolute
|
||||
}
|
||||
|
||||
#bg-video {
|
||||
width: 100vw;
|
||||
|
@ -35,47 +32,67 @@ body{
|
|||
filter: brightness(75%);
|
||||
}
|
||||
|
||||
.content{
|
||||
#home {
|
||||
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{
|
||||
filter: invert(100%);
|
||||
position: absolute;
|
||||
& h1 {
|
||||
font-size:5.25vmin;
|
||||
}
|
||||
h2{
|
||||
& h2 {
|
||||
font-size:2vmin;
|
||||
}
|
||||
.social, .social button {
|
||||
& .social {
|
||||
margin-top:.5vmin;
|
||||
font-family:brandon light;
|
||||
font-size:4.25vmin;
|
||||
letter-spacing:.3vmin
|
||||
}
|
||||
|
||||
button {
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer
|
||||
}
|
||||
.social a{
|
||||
letter-spacing:.3vmin;
|
||||
& a {
|
||||
text-decoration:none;
|
||||
color:#000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#nav-as, #nav-home {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.container {
|
||||
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;
|
||||
|
@ -87,51 +104,5 @@ button {
|
|||
font-size:2.75vmin;
|
||||
letter-spacing:.2vmin;
|
||||
font-weight:700;
|
||||
cursor:pointer
|
||||
}
|
||||
|
||||
/*.center{
|
||||
text-align: -webkit-center;
|
||||
}*/
|
||||
|
||||
.img {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.content2 {
|
||||
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);
|
||||
}
|
||||
.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);
|
||||
}
|
||||
|
||||
.container {
|
||||
text-align: left;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.container pre {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.container h1, .container button {
|
||||
color: #FFFFFF;
|
||||
text-decoration: none;
|
||||
font-size: 1.39vmin;
|
||||
}
|
||||
.container a , .container button {
|
||||
color: #ffffff
|
||||
cursor:pointer;
|
||||
}
|
||||
|
|
|
@ -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');
|
||||
|
||||
const sites = ['as', 'home'];
|
||||
sites.forEach((item) => {
|
||||
document.getElementById(`nav-${item}`).addEventListener('click', _ => {
|
||||
nav(`${item}`);
|
||||
});
|
||||
document.getElementById("nav-home").addEventListener('click', _ => {
|
||||
nav('home');
|
||||
});
|
||||
|
||||
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 = '';
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
</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"><- Back</a>
|
||||
</h1></pre>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hint" id="hint">HIT ME FOR SOUND</div>
|
||||
|
|
Loading…
Reference in a new issue