This commit is contained in:
nelle 2024-08-05 02:40:43 -06:00
parent 8126911456
commit a92afb5c99
3 changed files with 37 additions and 7 deletions

View file

@ -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;

View file

@ -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);
} }
} }

View file

@ -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>