glitchy
This commit is contained in:
parent
340a35dad3
commit
ca293cd083
4 changed files with 70 additions and 7 deletions
|
@ -1,7 +1,3 @@
|
|||
:root {
|
||||
--alt-accent: #60fe35;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--text: #191209;
|
||||
|
@ -9,6 +5,7 @@
|
|||
--primary: #dd9339;
|
||||
--secondary: #f2bb78;
|
||||
--accent: #ffa941;
|
||||
--alt-accent: #60fe35;
|
||||
|
||||
--content-gradient: linear-gradient(to bottom right, var(--primary-200), var(--secondary-600));
|
||||
--accent-gradient: linear-gradient(to bottom right, var(--primary-700), var(--secondary-800) 30%, var(--text-50) 60%);
|
||||
|
@ -17,6 +14,10 @@
|
|||
--visited: var(--accent-800);
|
||||
--hover: var(--accent-900);
|
||||
|
||||
--glitch-1: ;
|
||||
--glitch-2: ;
|
||||
--glitch-3: ;
|
||||
|
||||
--text-50: #f8f3ec;
|
||||
--text-100: #f1e7da;
|
||||
--text-200: #e4cfb4;
|
||||
|
@ -88,6 +89,7 @@
|
|||
--primary: #d7bfa2;
|
||||
--secondary: #76552e;
|
||||
--accent: #ffa941;
|
||||
--alt-accent: #53e62e;
|
||||
|
||||
--content-gradient: linear-gradient(to bottom right, var(--primary-950), var(--secondary-900));
|
||||
--accent-gradient: linear-gradient(to bottom right, var(--accent), var(--accent-200) 30%, var(--text) 60%);
|
||||
|
@ -96,6 +98,10 @@
|
|||
--visited: var(--accent-400);
|
||||
--hover: var(--accent-500);
|
||||
|
||||
--glitch-1: var(--accent);
|
||||
--glitch-2: var(--accent-500);
|
||||
--glitch-3: var(--accent-300);
|
||||
|
||||
--text-50: #f6f3ee;
|
||||
--text-100: #ede6de;
|
||||
--text-200: #dbcebd;
|
||||
|
|
56
public/styles/css/glitch.css
Normal file
56
public/styles/css/glitch.css
Normal file
|
@ -0,0 +1,56 @@
|
|||
.glitch {
|
||||
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 1002ms infinite;
|
||||
}
|
||||
|
||||
.glitch span {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.glitch 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 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,6 +2,7 @@
|
|||
@import "color-scheme.css";
|
||||
@import "classes.css";
|
||||
@import "fonts.css";
|
||||
@import "glitch.css";
|
||||
|
||||
:root {
|
||||
font-size: 20px;
|
||||
|
|
|
@ -6,15 +6,15 @@ import Layout from "../layouts/Layout.astro";
|
|||
<main>
|
||||
<!-- Title Area -->
|
||||
<section class="content">
|
||||
<h1 class="title">nelle.observer</h1>
|
||||
<h1 class="glitch">nelle.observer</h1>
|
||||
<h2 class="subtitle"></h2>
|
||||
</section>
|
||||
<section class="content">
|
||||
<p>hello, what brings you here?</p>
|
||||
<p>
|
||||
my name is nelle (not Nelle, nelle), some call me <span style="color: var(--alt-accent);">[data expunged]</span>.
|
||||
my name is nelle (not Nelle, nelle), some call me <span class="glitch">[data expunged]</span>.
|
||||
<br />
|
||||
i am a 20-something year old, <span style="color: var(--alt-accent);">[data expunged]</span>, with not much else going on.
|
||||
i am a 20-something year old, <span class="glitch">[data expunged]</span>, with not much else going on.
|
||||
</p>
|
||||
</section>
|
||||
</main>
|
||||
|
|
Loading…
Reference in a new issue