glitchy
This commit is contained in:
parent
8126911456
commit
a92afb5c99
3 changed files with 37 additions and 7 deletions
|
@ -18,11 +18,6 @@
|
||||||
--alt-accent-950: #061900;
|
--alt-accent-950: #061900;
|
||||||
}
|
}
|
||||||
|
|
||||||
.glitch {
|
|
||||||
color: var(--alt-accent-900);
|
|
||||||
background-color: rgba(0, 0, 0, 0.233);;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
@media (prefers-color-scheme: light) {
|
||||||
:root {
|
:root {
|
||||||
--text: #191209;
|
--text: #191209;
|
||||||
|
|
|
@ -2,6 +2,8 @@
|
||||||
text-shadow: 0.05em 0 0 var(--glitch-1), -0.03em -0.04em 0 var(--glitch-2),
|
text-shadow: 0.05em 0 0 var(--glitch-1), -0.03em -0.04em 0 var(--glitch-2),
|
||||||
0.025em 0.04em 0 var(--glitch-3);
|
0.025em 0.04em 0 var(--glitch-3);
|
||||||
animation: glitch 742ms infinite;
|
animation: glitch 742ms infinite;
|
||||||
|
color: var(--alt-accent-900);
|
||||||
|
background-color: rgba(0, 0, 0, 0.233);
|
||||||
}
|
}
|
||||||
|
|
||||||
.glitch span {
|
.glitch span {
|
||||||
|
@ -24,33 +26,66 @@
|
||||||
opacity: 0.75;
|
opacity: 0.75;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.glitch-alt {
|
||||||
|
text-shadow: 0.05em 0 0 var(--glitch-1), -0.03em -0.04em 0 var(--glitch-2),
|
||||||
|
0.025em 0.04em 0 var(--glitch-3);
|
||||||
|
animation: glitch 742ms infinite;
|
||||||
|
color: var(--alt-accent-900);
|
||||||
|
}
|
||||||
|
|
||||||
|
.glitch-alt span {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glitch-alt span:first-child {
|
||||||
|
animation: glitch 500ms infinite;
|
||||||
|
clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
|
||||||
|
transform: translate(-0.04em, -0.03em);
|
||||||
|
opacity: 0.75;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glitch-alt span:last-child {
|
||||||
|
animation: glitch 375ms infinite;
|
||||||
|
clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
|
||||||
|
transform: translate(0.04em, 0.03em);
|
||||||
|
opacity: 0.75;
|
||||||
|
}
|
||||||
|
|
||||||
@keyframes glitch {
|
@keyframes glitch {
|
||||||
0% {
|
0% {
|
||||||
text-shadow: 0.05em 0 0 var(--glitch-1), -0.03em -0.04em 0 var(--glitch-2),
|
text-shadow: 0.05em 0 0 var(--glitch-1), -0.03em -0.04em 0 var(--glitch-2),
|
||||||
0.025em 0.04em 0 var(--glitch-3);
|
0.025em 0.04em 0 var(--glitch-3);
|
||||||
}
|
}
|
||||||
|
|
||||||
15% {
|
15% {
|
||||||
text-shadow: 0.05em 0 0 var(--glitch-1), -0.03em -0.04em 0 var(--glitch-2),
|
text-shadow: 0.05em 0 0 var(--glitch-1), -0.03em -0.04em 0 var(--glitch-2),
|
||||||
0.025em 0.04em 0 var(--glitch-3);
|
0.025em 0.04em 0 var(--glitch-3);
|
||||||
}
|
}
|
||||||
|
|
||||||
16% {
|
16% {
|
||||||
text-shadow: -0.05em -0.025em 0 var(--glitch-1), 0.025em 0.035em 0 var(--glitch-2),
|
text-shadow: -0.05em -0.025em 0 var(--glitch-1), 0.025em 0.035em 0 var(--glitch-2),
|
||||||
-0.05em -0.05em 0 var(--glitch-3);
|
-0.05em -0.05em 0 var(--glitch-3);
|
||||||
}
|
}
|
||||||
|
|
||||||
49% {
|
49% {
|
||||||
text-shadow: -0.05em -0.025em 0 var(--glitch-1), 0.025em 0.035em 0 var(--glitch-2),
|
text-shadow: -0.05em -0.025em 0 var(--glitch-1), 0.025em 0.035em 0 var(--glitch-2),
|
||||||
-0.05em -0.05em 0 var(--glitch-3);
|
-0.05em -0.05em 0 var(--glitch-3);
|
||||||
}
|
}
|
||||||
|
|
||||||
50% {
|
50% {
|
||||||
text-shadow: 0.05em 0.035em 0 var(--glitch-1), 0.03em 0 0 var(--glitch-2),
|
text-shadow: 0.05em 0.035em 0 var(--glitch-1), 0.03em 0 0 var(--glitch-2),
|
||||||
0 -0.04em 0 var(--glitch-3);
|
0 -0.04em 0 var(--glitch-3);
|
||||||
}
|
}
|
||||||
|
|
||||||
99% {
|
99% {
|
||||||
text-shadow: 0.05em 0.035em 0 var(--glitch-1), 0.03em 0 0 var(--glitch-2),
|
text-shadow: 0.05em 0.035em 0 var(--glitch-1), 0.03em 0 0 var(--glitch-2),
|
||||||
0 -0.04em 0 var(--glitch-3);
|
0 -0.04em 0 var(--glitch-3);
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
text-shadow: -0.05em 0 0 var(--glitch-1), -0.025em -0.04em 0 var(--glitch-2),
|
text-shadow: -0.05em 0 0 var(--glitch-1), -0.025em -0.04em 0 var(--glitch-2),
|
||||||
-0.04em -0.025em 0 var(--glitch-3);
|
-0.04em -0.025em 0 var(--glitch-3);
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -85,7 +85,7 @@ const today = new Date();
|
||||||
<a href="https://applianceri.ng/next?host=limepot.xyz"><img alt="Future Gadget 204 - A Functional Time Machine" src="/assets/webrings/FG204.png" width="100px"></a>
|
<a href="https://applianceri.ng/next?host=limepot.xyz"><img alt="Future Gadget 204 - A Functional Time Machine" src="/assets/webrings/FG204.png" width="100px"></a>
|
||||||
</section>
|
</section>
|
||||||
<section class="content">
|
<section class="content">
|
||||||
<p class="small-quote">El. Psy. Kongroo.</p>
|
<p class="glitch-alt small-quote">El. Psy. Kongroo.</p>
|
||||||
<a class="small-quote" href="/site-info">Site Info</a>
|
<a class="small-quote" href="/site-info">Site Info</a>
|
||||||
</section>
|
</section>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
Loading…
Reference in a new issue