sigmasternchen/glitch-countdown
1
0
Fork 0
mirror of https://github.com/sigmasternchen/glitch-countdown synced 2025-03-15 10:38:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: Add page title

Browse source
This commit is contained in:
overflowerror 2023-10-30 14:00:48 +01:00
parent 321073a340
commit 18dac39bd0
2 changed files with 122 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
dist/index.html vendored
View file

@ -9,7 +9,7 @@
<body> <body>
<header> <header>
<h1>Glitch Countdown</h1> <h2 data-text="glitch">glitch</h2><h1>Countdown</h1>
</header> </header>
<nav></nav> <nav></nav>
<section> <section>

141
dist/main.css vendored
View file

@ -5,6 +5,13 @@
font-style: normal; font-style: normal;
} }
@font-face {
font-family: "SourceCodePro";
src: url('fonts/SourceCodePro-Italic-VariableFont_wght.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
* { * {
font-family: "SourceCodePro", sans-serif; font-family: "SourceCodePro", sans-serif;
} }
@ -13,6 +20,41 @@ body {
background-color: black; background-color: black;
} }
header h1,
header h2 {
display: inline-block;
font-size: 5vw;
color: white;
margin: 0;
}
header h1 {}
header h2 {
font-style: italic;
color: grey;
animation: glitchTitle 1s linear infinite;
}
header h2:before, header h2:after {
content: attr(data-text);
position: absolute;
left: 0;
}
header h2:before {
animation: glitchTop 1s linear infinite;
clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
-webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}
header h2:after {
z-index: -1;
animation: glitchBottom 1.5s linear infinite;
clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
-webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
}
#countdown { #countdown {
text-align: center; text-align: center;
position: absolute; position: absolute;
@ -71,7 +113,7 @@ body {
background-color: black; background-color: black;
border: 1px white solid; border: 1px white solid;
text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff, text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff,
0.025em 0.04em 0 #fffc00; 0.025em 0.04em 0 #fffc00;
animation: glitch 725ms infinite; animation: glitch 725ms infinite;
} }
@ -94,7 +136,7 @@ body {
transform: translate(-0.04em, -0.03em); transform: translate(-0.04em, -0.03em);
opacity: 0.75; opacity: 0.75;
} }
#countdown button .layer:last-of-type { #countdown button .layer:last-of-type {
animation: glitch 375ms infinite; animation: glitch 375ms infinite;
clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%); clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
@ -106,7 +148,8 @@ body {
background: transparent; background: transparent;
} }
#countdown .up, #countdown .down { #countdown .up,
#countdown .down {
position: absolute; position: absolute;
line-height: 9vw; line-height: 9vw;
width: 3.5vw; width: 3.5vw;
@ -124,39 +167,97 @@ body {
top: calc(10vw + 0.6vw); top: calc(10vw + 0.6vw);
} }
#countdown.counting .up, #countdown.counting .down { #countdown.counting .up,
#countdown.counting .down {
display: none; display: none;
} }
@keyframes glitch { @keyframes glitch {
0% { 0% {
text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff, text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff,
0.025em 0.04em 0 #fffc00; 0.025em 0.04em 0 #fffc00;
} }
15% { 15% {
text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff, text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff,
0.025em 0.04em 0 #fffc00; 0.025em 0.04em 0 #fffc00;
} }
16% { 16% {
text-shadow: -0.05em -0.025em 0 #00fffc, 0.025em 0.035em 0 #fc00ff, text-shadow: -0.05em -0.025em 0 #00fffc, 0.025em 0.035em 0 #fc00ff,
-0.05em -0.05em 0 #fffc00; -0.05em -0.05em 0 #fffc00;
} }
49% { 49% {
text-shadow: -0.05em -0.025em 0 #00fffc, 0.025em 0.035em 0 #fc00ff, text-shadow: -0.05em -0.025em 0 #00fffc, 0.025em 0.035em 0 #fc00ff,
-0.05em -0.05em 0 #fffc00; -0.05em -0.05em 0 #fffc00;
} }
50% { 50% {
text-shadow: 0.05em 0.035em 0 #00fffc, 0.03em 0 0 #fc00ff, text-shadow: 0.05em 0.035em 0 #00fffc, 0.03em 0 0 #fc00ff,
0 -0.04em 0 #fffc00; 0 -0.04em 0 #fffc00;
} }
99% { 99% {
text-shadow: 0.05em 0.035em 0 #00fffc, 0.03em 0 0 #fc00ff, text-shadow: 0.05em 0.035em 0 #00fffc, 0.03em 0 0 #fc00ff,
0 -0.04em 0 #fffc00; 0 -0.04em 0 #fffc00;
} }
100% { 100% {
text-shadow: -0.05em 0 0 #00fffc, -0.025em -0.04em 0 #fc00ff, text-shadow: -0.05em 0 0 #00fffc, -0.025em -0.04em 0 #fc00ff,
-0.04em -0.025em 0 #fffc00; -0.04em -0.025em 0 #fffc00;
} }
} }
@keyframes glitchTitle {
2%,
64% {
transform: translate(2px, 0) skew(0deg);
}
4%,
60% {
transform: translate(-2px, 0) skew(0deg);
}
62% {
transform: translate(0, 0) skew(5deg);
}
}
@keyframes glitchTop {
2%,
64% {
transform: translate(2px, -2px);
}
4%,
60% {
transform: translate(-2px, 2px);
}
62% {
transform: translate(13px, -1px) skew(-13deg);
}
}
@keyframes glitchBottom {
2%,
64% {
transform: translate(-2px, 0);
}
4%,
60% {
transform: translate(-2px, 0);
}
62% {
transform: translate(-22px, 5px) skew(21deg);
}
}