frzysk/inception
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add: nginx example website & dev: Makefile

Browse source
This commit is contained in:
mcolonna 2025-03-26 18:57:27 +01:00
parent 8f789d51a0
commit 3ba95ed8a6
4 changed files with 227 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
data/nginx/www/VarelaRound.ttf Normal file
View file

Binary file not shown.

144
data/nginx/www/index.html Normal file
View file

@ -0,0 +1,144 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>yippee</title>
<style>
* {
animation-play-state: paused;
}
@font-face
{
font-family: "Varela Round";
src: url("/VarelaRound.ttf");
}
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
background: #000000;
}
.yippee {
font-size: 3em;
font-family: "Varela Round";
font-weight: bold;
}
@keyframes rotationoeoeoe {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
@keyframes pulseyayaya {
0% { transform: scale(1); }
50% { transform: scale(1.4); }
100% { transform: scale(1); }
}
/*
@keyframes rainbow {
0% { color: #f00; }
33% { color: #0f0; }
67% { color: #00f; }
100% { color: #f00; }
}*/
@keyframes rainbow {
0% { color: #f00; }
17% { color: #ff0; }
33% { color: #0f0; }
50% { color: #0ff; }
67% { color: #00f; }
83% { color: #f0f; }
100% { color: #f00; }
}
.yippee {
animation-name: rotationoeoeoe;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.yippee > .yippeeinner {
animation-name: pulseyayaya;
animation-duration: .8s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
#one, #two, #three {
width: 100%;
height: 100%;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
animation-name: rainbow;
animation-duration: 1s;
animation-iteration-count: infinite;
}
#one {
z-index: 3;
color: #f00;
animation-delay: .0s;
}
#one > .yippee {
animation-delay: .0s;
}
#one > .yippee > .yippeeinner {
animation-delay: .0s;
}
#two {
z-index: 2;
color: #0f0;
opacity: .50;
animation-delay: .1s;
}
#two > .yippee {
animation-delay: .05s;
}
#two > .yippee > .yippeeinner {
animation-delay: .05s;
}
#three {
z-index: 1;
color: #00f;
opacity: .33;
animation-delay: .2s;
}
#three > .yippee {
animation-delay: .1s;
}
#three > .yippee > .yippeeinner {
animation-delay: .1s;
}
* {
animation-play-state: running;
}
</style>
</head>
<body>
<div id="one"><div class="yippee"><div class="yippeeinner">yippee</div></div></div>
<div id="two"><div class="yippee"><div class="yippeeinner">yippee</div></div></div>
<div id="three"><div class="yippee"><div class="yippeeinner">yippee</div></div></div>
</body>
</html>