tweak glitch and colors

This commit is contained in:
nelle 2024-08-05 02:33:45 -06:00
parent ca293cd083
commit ae774edfe5
3 changed files with 32 additions and 20 deletions

View file

@ -1,3 +1,27 @@
:root {
--alt-accent: #60fe35;
--glitch-1: var(--alt-accent-600);
--glitch-2: var(--alt-accent-700);
--glitch-3: var(--alt-accent-800);
--alt-accent-50: #ebffe6;
--alt-accent-100: #d7ffcc;
--alt-accent-200: #affe9a;
--alt-accent-300: #88fe67;
--alt-accent-400: #60fe34;
--alt-accent-500: #38fe01;
--alt-accent-600: #2dcb01;
--alt-accent-700: #229801;
--alt-accent-800: #166501;
--alt-accent-900: #0b3300;
--alt-accent-950: #061900;
}
.glitch {
color: var(--alt-accent-900);
}
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
:root { :root {
--text: #191209; --text: #191209;
@ -5,19 +29,14 @@
--primary: #dd9339; --primary: #dd9339;
--secondary: #f2bb78; --secondary: #f2bb78;
--accent: #ffa941; --accent: #ffa941;
--alt-accent: #60fe35;
--content-gradient: linear-gradient(to bottom right, var(--primary-200), var(--secondary-600)); --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%); --accent-gradient: linear-gradient(to bottom right, var(--primary-200), var(--secondary-800) 30%, var(--text-500) 60%);
--link: var(--accent-700); --link: var(--accent-700);
--visited: var(--accent-800); --visited: var(--accent-800);
--hover: var(--accent-900); --hover: var(--accent-900);
--glitch-1: ;
--glitch-2: ;
--glitch-3: ;
--text-50: #f8f3ec; --text-50: #f8f3ec;
--text-100: #f1e7da; --text-100: #f1e7da;
--text-200: #e4cfb4; --text-200: #e4cfb4;
@ -77,8 +96,6 @@
--accent-800: #663800; --accent-800: #663800;
--accent-900: #331c00; --accent-900: #331c00;
--accent-950: #1a0e00; --accent-950: #1a0e00;
} }
} }
@ -89,19 +106,14 @@
--primary: #d7bfa2; --primary: #d7bfa2;
--secondary: #76552e; --secondary: #76552e;
--accent: #ffa941; --accent: #ffa941;
--alt-accent: #53e62e;
--content-gradient: linear-gradient(to bottom right, var(--primary-950), var(--secondary-900)); --content-gradient: linear-gradient(to bottom right, var(--primary-900), var(--secondary-800));
--accent-gradient: linear-gradient(to bottom right, var(--accent), var(--accent-200) 30%, var(--text) 60%); --accent-gradient: linear-gradient(to bottom right, var(--accent), var(--accent-200) 30%, var(--text) 60%);
--link: var(--accent-300); --link: var(--accent-300);
--visited: var(--accent-400); --visited: var(--accent-400);
--hover: var(--accent-500); --hover: var(--accent-500);
--glitch-1: var(--accent);
--glitch-2: var(--accent-500);
--glitch-3: var(--accent-300);
--text-50: #f6f3ee; --text-50: #f6f3ee;
--text-100: #ede6de; --text-100: #ede6de;
--text-200: #dbcebd; --text-200: #dbcebd;

View file

@ -1,7 +1,7 @@
.glitch { .glitch {
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 1002ms infinite; animation: glitch 742ms infinite;
} }
.glitch span { .glitch span {

View file

@ -6,7 +6,7 @@ import Layout from "../layouts/Layout.astro";
<main> <main>
<!-- Title Area --> <!-- Title Area -->
<section class="content"> <section class="content">
<h1 class="glitch">nelle.observer</h1> <h1 class="title">nelle.observer</h1>
<h2 class="subtitle"></h2> <h2 class="subtitle"></h2>
</section> </section>
<section class="content"> <section class="content">