Compare commits
3 Commits
16b9377dff
...
40cdafb312
| Author | SHA1 | Date |
|---|---|---|
 emily
|
40cdafb312
|
4 months ago |
|
emily
|
ea082c7fd8
|
4 months ago |
|
emily
|
d0bc2222a0
|
4 months ago |
@ -1,2 +1,3 @@
|
|||||||
other/**
|
other/**
|
||||||
|
src/assets/media/**
|
||||||
result
|
result
|
||||||
|
|||||||
@ -1,137 +1,102 @@
|
|||||||
@font-face{
|
@font-face{
|
||||||
font-family:brandon light;
|
font-family:brandon light;
|
||||||
src:url(../font.woff2)
|
src:url(../font.woff2)
|
||||||
}
|
}
|
||||||
*{
|
*{
|
||||||
margin:0;
|
margin:0;
|
||||||
padding:0;
|
padding:0;
|
||||||
position:relative;
|
position:relative;
|
||||||
box-sizing:border-box;
|
box-sizing:border-box;
|
||||||
overflow:hidden
|
overflow:hidden
|
||||||
}
|
}
|
||||||
|
|
||||||
html,body{
|
html,body{
|
||||||
height:100%
|
height:100%
|
||||||
}
|
}
|
||||||
|
|
||||||
body{
|
body{
|
||||||
display:flex;
|
display:flex;
|
||||||
justify-content:center;
|
justify-content:center;
|
||||||
align-items:center;
|
align-items:center;
|
||||||
background:#000
|
background:#000
|
||||||
}
|
|
||||||
.content {
|
|
||||||
position:absolute
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#bg-video {
|
#bg-video {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
filter: brightness(75%);
|
filter: brightness(75%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.content{
|
#nav-as, #nav-home {
|
||||||
z-index:1;
|
cursor: pointer;
|
||||||
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{
|
|
||||||
|
#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;
|
font-size:5.25vmin;
|
||||||
}
|
}
|
||||||
h2{
|
& h2 {
|
||||||
font-size:2vmin;
|
font-size:2vmin;
|
||||||
}
|
}
|
||||||
.social, .social button {
|
& .social {
|
||||||
margin-top:.5vmin;
|
margin-top:.5vmin;
|
||||||
font-family:brandon light;
|
font-family:brandon light;
|
||||||
font-size:4.25vmin;
|
font-size:4.25vmin;
|
||||||
letter-spacing:.3vmin
|
letter-spacing:.3vmin;
|
||||||
}
|
& a {
|
||||||
|
text-decoration:none;
|
||||||
button {
|
color:#000;
|
||||||
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;
|
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;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
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;
|
||||||
}
|
& pre {
|
||||||
|
|
||||||
.container {
|
|
||||||
text-align: left;
|
|
||||||
position: absolute;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container pre {
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
& a {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.container h1, .container button {
|
.hint {
|
||||||
color: #FFFFFF;
|
z-index:1;
|
||||||
text-decoration: none;
|
color:#000;
|
||||||
font-size: 1.39vmin;
|
mix-blend-mode:overlay;
|
||||||
}
|
filter:invert(100%);
|
||||||
.container a , .container button {
|
position:fixed;
|
||||||
color: #ffffff
|
bottom:6vmin;
|
||||||
|
font-family:brandon light;
|
||||||
|
font-size:2.75vmin;
|
||||||
|
letter-spacing:.2vmin;
|
||||||
|
font-weight:700;
|
||||||
|
cursor:pointer;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,52 +1,48 @@
|
|||||||
'use strict';
|
//'use strict';
|
||||||
(function() {
|
(function() {
|
||||||
var title = document.title,
|
var title = document.title,
|
||||||
animSeq = ["/", "$", "\\", "|", "$"],
|
animSeq = ["/", "$", "\\", "|", "$"],
|
||||||
animIndex = 0,
|
animIndex = 0,
|
||||||
titleIndex = 0;
|
titleIndex = 0;
|
||||||
|
|
||||||
function doInverseSpinZeroPitch() {
|
function doInverseSpinZeroPitch() {
|
||||||
var loadTitle = title.substring(0, titleIndex);
|
var loadTitle = title.substring(0, titleIndex);
|
||||||
if (titleIndex > title.length) {
|
if (titleIndex > title.length) {
|
||||||
animIndex = 0;
|
animIndex = 0;
|
||||||
titleIndex = 0
|
titleIndex = 0
|
||||||
}
|
|
||||||
if (animIndex > 3) {
|
|
||||||
titleIndex++;
|
|
||||||
animIndex = 0
|
|
||||||
}
|
|
||||||
document.title = loadTitle + animSeq[animIndex];
|
|
||||||
animIndex++
|
|
||||||
}
|
}
|
||||||
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);
|
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';
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue