limepotato/nelle-observer
1
1
Fork 0
Code Pull requests Activity

glitchy

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

5
public/styles/css/color-scheme.css
View file

@ -18,11 +18,6 @@
--alt-accent-950: #061900;
}
.glitch {
color: var(--alt-accent-900);
background-color: rgba(0, 0, 0, 0.233);;
}
@media (prefers-color-scheme: light) {
:root {
--text: #191209;

37
public/styles/css/glitch.css
View file

@ -2,6 +2,8 @@
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);
background-color: rgba(0, 0, 0, 0.233);
}
.glitch span {
@ -24,33 +26,66 @@
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 {
0% {
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);
}
15% {
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);
}
16% {
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);
}
49% {
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);
}
50% {
text-shadow: 0.05em 0.035em 0 var(--glitch-1), 0.03em 0 0 var(--glitch-2),
0 -0.04em 0 var(--glitch-3);
}
99% {
text-shadow: 0.05em 0.035em 0 var(--glitch-1), 0.03em 0 0 var(--glitch-2),
0 -0.04em 0 var(--glitch-3);
}
100% {
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);
}
}
}

2
src/components/Footer.astro
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>
</section>
<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>
</section>
</footer>