add web files

This commit is contained in:
Joe 2020-06-13 22:57:10 -05:00
parent 3b0a10727c
commit a05b8f8875
Signed by: joe
GPG Key ID: 8595A3F8F2CE1B74
20 changed files with 413 additions and 0 deletions

BIN
font/clip.woff2 (Stored with Git LFS) Normal file

Binary file not shown.

BIN
img/akikopeek.png (Stored with Git LFS) Normal file

Binary file not shown.

BIN
img/karenpeek.png (Stored with Git LFS) Normal file

Binary file not shown.

BIN
img/karenpeek.webp (Stored with Git LFS) Normal file

Binary file not shown.

BIN
img/karenpeeksmall.png (Stored with Git LFS) Normal file

Binary file not shown.

BIN
img/kinakopeek.png (Stored with Git LFS) Normal file

Binary file not shown.

BIN
img/kinakopeek.webp (Stored with Git LFS) Normal file

Binary file not shown.

BIN
img/kinakopeeksmall.png (Stored with Git LFS) Normal file

Binary file not shown.

BIN
img/meguminpeek.png (Stored with Git LFS) Normal file

Binary file not shown.

BIN
img/meguminpeek.webp (Stored with Git LFS) Normal file

Binary file not shown.

BIN
img/meguminpeeksmall.png (Stored with Git LFS) Normal file

Binary file not shown.

BIN
img/menherapeek.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

BIN
img/nenechipeek.png (Stored with Git LFS) Normal file

Binary file not shown.

BIN
img/nezukopeek.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

BIN
img/nezukopeek.png (Stored with Git LFS) Normal file

Binary file not shown.

BIN
img/nezukopeek.webp (Stored with Git LFS) Normal file

Binary file not shown.

BIN
img/nezukopeeksmall.png (Stored with Git LFS) Normal file

Binary file not shown.

BIN
img/sakurakopeek.png (Stored with Git LFS) Normal file

Binary file not shown.

37
peek.html Executable file
View File

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>oke.moe</title>
<link rel="stylesheet" type="text/css" href="/styles.css">
<link rel="icon" type="image/png" href="/favicon.ico">
</head>
<body>
<div class="container">
<header>
<h1><span id="left"><span class="fast-flicker">O</span>KE</span><span id="right">.M<span class="flicker">OE</span></span></h1>
</header>
<picture>
<source srcset="/img/kinakopeek.webp">
<source srcset="/img/kinakopeek.png">
<img src="/img/kinakopeek.png" alt="Kinako peeking" class="kinako">
</picture>
<picture>
<source srcset="/img/karenpeek.webp">
<source srcset="/img/karenpeek.png">
<img src="/img/karenpeek.png" alt="Karen peeking" class="karen">
</picture>
<picture>
<source srcset="/img/meguminpeek.webp">
<source srcset="/img/meguminpeek.png">
<img src="/img/meguminpeek.png" alt="Megumin peeking" class="megumin">
</picture>
<picture class="nezuko">
<source srcset="/img/nezukopeek.webp">
<source srcset="/img/nezukopeek.png">
<img src="/img/nezukopeek.png" alt="Nezuko peeking" class="nezuko">
</picture>
</div>
</body>
</html>

328
styles.css Executable file
View File

@ -0,0 +1,328 @@
@font-face {
font-family: clip;
font-display: swap;
src: url(/font/clip.woff2) format("woff2");
}
* {
box-sizing: border-box;
}
html, body, .frame, .container {
font-family: "Arial", sans-serif;
margin: 0;
min-height: 100vh;
min-width: 100vw;
}
body {
overflow: hide;
background-color: #000;
}
.container {
position: relative;
}
header {
margin: auto;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h1 {
font-family: clip, "Arial", sans-serif;
font-size: 96px;
color: #f2f2f2;
margin: 0;
}
#left {
color: #ffe6ff;
text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
-0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
animation: shine-one 2s forwards, flicker 3s infinite;
}
#right {
color: #b2f3f2;
text-shadow: 0 0 0.6rem #b2f3f2, 0 0 1.5rem #75f1f1,
-0.2rem 0.1rem 1rem #75f1f1, 0.2rem 0.1rem 1rem #75f1f1,
0 -0.5rem 2rem #1cf3f1, 0 0.5rem 3rem #1cf3f1;
animation: shine-two 2s forwards, flicker 6s infinite;
}
.flicker {
animation: shine-two 2s forwards, blink-two 10s 1s infinite;
}
.fast-flicker {
animation: shine-one 2s forwards, blink-one 3s 2s infinite;
}
.kinako {
height: 35vw;
width: auto;
}
.karen {
height: 30vw;
width: auto;
position: absolute;
bottom: 0;
right: 0;
}
.megumin {
height: auto;
width: 20vw;
transform: rotate(180deg);
position: absolute;
top: 0;
left: 55%;
}
.nezuko {
height: auto;
width: 20vw;
position: absolute;
bottom: 0;
left: 5%;
}
@keyframes shine-one {
0% {
color: #6b1839;
text-shadow: none;
}
100% {
color: #ffe6ff;
text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
-0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
}
}
@keyframes shine-two {
0% {
color: #178685;
text-shadow: none;
}
100% {
color: #b2f3f2;
text-shadow: 0 0 0.6rem #b2f3f2, 0 0 1.5rem #75f1f1,
-0.2rem 0.1rem 1rem #75f1f1, 0.2rem 0.1rem 1rem #75f1f1,
0 -0.5rem 2rem #1cf3f1, 0 0.5rem 3rem #1cf3f1;
}
}
@keyframes blink-one {
0%,
22%,
36%,
75% {
color: #ffe6ff;
text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
-0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
}
28%,
33% {
color: #ff65bd;
text-shadow: none;
}
82%,
97% {
color: #ff2483;
text-shadow: none;
}
}
@keyframes blink-two {
0%,
22%,
36%,
75% {
color: #ddfefd;
text-shadow: 0 0 0.6rem #b2f3f2, 0 0 1.5rem #75f1f1,
-0.2rem 0.1rem 1rem #75f1f1, 0.2rem 0.1rem 1rem #75f1f1,
0 -0.5rem 2rem #1cf3f1, 0 0.5rem 3rem #1cf3f1;
}
28%,
33% {
color: #75f1f1;
text-shadow: 0 0 0.6rem #b2f3f2, 0 0 1.5rem #75f1f1;
}
82%,
97% {
color: #178685;
text-shadow: none;
}
}
@keyframes flicker {
from {
opacity: 1;
}
4% {
opacity: 0.9;
}
6% {
opacity: 0.85;
}
8% {
opacity: 0.95;
}
10% {
opacity: 0.9;
}
11% {
opacity: 0.922;
}
12% {
opacity: 0.9;
}
14% {
opacity: 0.95;
}
16% {
opacity: 0.98;
}
17% {
opacity: 0.9;
}
19% {
opacity: 0.93;
}
20% {
opacity: 0.99;
}
24% {
opacity: 1;
}
26% {
opacity: 0.94;
}
28% {
opacity: 0.98;
}
37% {
opacity: 0.93;
}
38% {
opacity: 0.5;
}
39% {
opacity: 0.96;
}
42% {
opacity: 1;
}
44% {
opacity: 0.97;
}
46% {
opacity: 0.94;
}
56% {
opacity: 0.9;
}
58% {
opacity: 0.9;
}
60% {
opacity: 0.99;
}
68% {
opacity: 1;
}
70% {
opacity: 0.9;
}
72% {
opacity: 0.95;
}
93% {
opacity: 0.93;
}
95% {
opacity: 0.95;
}
97% {
opacity: 0.93;
}
to {
opacity: 1;
}
}
@media screen and (max-width: 767px) {
h1 {
font-size: 84px;
}
.kinako {
height: 30vh;
}
.karen {
height: 25vh;
}
.megumin {
width: 15vh;
}
.nezuko {
width: 15vh;
}
}
@media screen and (max-width: 320px) {
h1 {
font-size: 72px;
}
.kinako {
height: 25vh;
}
.karen {
height: 25vh;
}
.megumin {
width: 15vh;
}
.nezuko {
width: 15vh;
}
}