tweak glitch and colors
This commit is contained in:
parent
ca293cd083
commit
ae774edfe5
3 changed files with 32 additions and 20 deletions
|
@ -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) {
|
||||
:root {
|
||||
--text: #191209;
|
||||
|
@ -5,19 +29,14 @@
|
|||
--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%);
|
||||
--accent-gradient: linear-gradient(to bottom right, var(--primary-200), var(--secondary-800) 30%, var(--text-500) 60%);
|
||||
|
||||
--link: var(--accent-700);
|
||||
--visited: var(--accent-800);
|
||||
--hover: var(--accent-900);
|
||||
|
||||
--glitch-1: ;
|
||||
--glitch-2: ;
|
||||
--glitch-3: ;
|
||||
|
||||
--text-50: #f8f3ec;
|
||||
--text-100: #f1e7da;
|
||||
--text-200: #e4cfb4;
|
||||
|
@ -29,7 +48,7 @@
|
|||
--text-800: #4b361b;
|
||||
--text-900: #251b0e;
|
||||
--text-950: #130e07;
|
||||
|
||||
|
||||
--background-50: #faf4eb;
|
||||
--background-100: #f5e8d6;
|
||||
--background-200: #ebd1ad;
|
||||
|
@ -41,7 +60,7 @@
|
|||
--background-800: #523814;
|
||||
--background-900: #291c0a;
|
||||
--background-950: #140e05;
|
||||
|
||||
|
||||
--primary-50: #fbf3e9;
|
||||
--primary-100: #f8e7d3;
|
||||
--primary-200: #f0d0a8;
|
||||
|
@ -53,7 +72,7 @@
|
|||
--primary-800: #57370f;
|
||||
--primary-900: #2c1b07;
|
||||
--primary-950: #160e04;
|
||||
|
||||
|
||||
--secondary-50: #fdf3e8;
|
||||
--secondary-100: #fae8d1;
|
||||
--secondary-200: #f6d0a2;
|
||||
|
@ -65,7 +84,7 @@
|
|||
--secondary-800: #5d3709;
|
||||
--secondary-900: #2e1c05;
|
||||
--secondary-950: #170e02;
|
||||
|
||||
|
||||
--accent-50: #fff4e5;
|
||||
--accent-100: #ffe8cc;
|
||||
--accent-200: #ffd199;
|
||||
|
@ -77,8 +96,6 @@
|
|||
--accent-800: #663800;
|
||||
--accent-900: #331c00;
|
||||
--accent-950: #1a0e00;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -89,19 +106,14 @@
|
|||
--primary: #d7bfa2;
|
||||
--secondary: #76552e;
|
||||
--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%);
|
||||
|
||||
--link: var(--accent-300);
|
||||
--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;
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
.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;
|
||||
animation: glitch 742ms infinite;
|
||||
}
|
||||
|
||||
.glitch span {
|
||||
|
|
|
@ -6,7 +6,7 @@ import Layout from "../layouts/Layout.astro";
|
|||
<main>
|
||||
<!-- Title Area -->
|
||||
<section class="content">
|
||||
<h1 class="glitch">nelle.observer</h1>
|
||||
<h1 class="title">nelle.observer</h1>
|
||||
<h2 class="subtitle"></h2>
|
||||
</section>
|
||||
<section class="content">
|
||||
|
|
Loading…
Reference in a new issue