colors :3
This commit is contained in:
parent
f9613c42e2
commit
340a35dad3
3 changed files with 75 additions and 61 deletions
|
@ -35,13 +35,13 @@ h1 {
|
|||
}
|
||||
|
||||
a:link {
|
||||
color: var(--accent-500);
|
||||
color: var(--link);
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: var(--accent-400);
|
||||
color: var(--visited);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--accent-300);
|
||||
color: var(--hover);
|
||||
}
|
|
@ -1,62 +1,70 @@
|
|||
:root {
|
||||
--alt-accent: #60fe35;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--text: #17120c;
|
||||
--background: var(--background-200);
|
||||
--primary: #5d4528;
|
||||
--secondary: #d1b189;
|
||||
--accent: var(--accent-400);
|
||||
--text: #191209;
|
||||
--background: var(--background-100);
|
||||
--primary: #dd9339;
|
||||
--secondary: #f2bb78;
|
||||
--accent: #ffa941;
|
||||
|
||||
--content-gradient: linear-gradient(to bottom right, var(--background-600), var(--background-500));
|
||||
--accent-gradient: linear-gradient(to bottom right, var(--accent-600), var(--accent-500) 30%, var(--text-50) 60%);
|
||||
--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%);
|
||||
|
||||
--text-50: #f6f3ee;
|
||||
--text-100: #ede6de;
|
||||
--text-200: #dccebc;
|
||||
--text-300: #cab59b;
|
||||
--text-400: #b99c79;
|
||||
--text-500: #a78358;
|
||||
--text-600: #866946;
|
||||
--text-700: #644f35;
|
||||
--text-800: #433523;
|
||||
--text-900: #211a12;
|
||||
--text-950: #110d09;
|
||||
|
||||
--background-50: #f7f2ed;
|
||||
--background-100: #f0e6db;
|
||||
--background-200: #e0ccb8;
|
||||
--background-300: #d1b394;
|
||||
--background-400: #c29970;
|
||||
--background-500: #b3804d;
|
||||
--background-600: #8f663d;
|
||||
--background-700: #6b4d2e;
|
||||
--background-800: #47331f;
|
||||
--background-900: #241a0f;
|
||||
--background-950: #120d08;
|
||||
|
||||
--primary-50: #f7f3ed;
|
||||
--primary-100: #f0e7db;
|
||||
--primary-200: #e0ceb8;
|
||||
--primary-300: #d1b694;
|
||||
--primary-400: #c29d70;
|
||||
--primary-500: #b3854d;
|
||||
--primary-600: #8f6a3d;
|
||||
--primary-700: #6b502e;
|
||||
--primary-800: #47351f;
|
||||
--primary-900: #241b0f;
|
||||
--primary-950: #120d08;
|
||||
|
||||
--secondary-50: #f8f3ed;
|
||||
--secondary-100: #f1e7da;
|
||||
--secondary-200: #e2ceb6;
|
||||
--secondary-300: #d4b691;
|
||||
--secondary-400: #c69d6c;
|
||||
--secondary-500: #b88547;
|
||||
--secondary-600: #936a39;
|
||||
--secondary-700: #6e502b;
|
||||
--secondary-800: #49351d;
|
||||
--secondary-900: #251b0e;
|
||||
--secondary-950: #120d07;
|
||||
--link: var(--accent-700);
|
||||
--visited: var(--accent-800);
|
||||
--hover: var(--accent-900);
|
||||
|
||||
--text-50: #f8f3ec;
|
||||
--text-100: #f1e7da;
|
||||
--text-200: #e4cfb4;
|
||||
--text-300: #d6b78f;
|
||||
--text-400: #c99f69;
|
||||
--text-500: #bb8744;
|
||||
--text-600: #966c36;
|
||||
--text-700: #705129;
|
||||
--text-800: #4b361b;
|
||||
--text-900: #251b0e;
|
||||
--text-950: #130e07;
|
||||
|
||||
--background-50: #faf4eb;
|
||||
--background-100: #f5e8d6;
|
||||
--background-200: #ebd1ad;
|
||||
--background-300: #e0ba85;
|
||||
--background-400: #d6a35c;
|
||||
--background-500: #cc8c33;
|
||||
--background-600: #a37029;
|
||||
--background-700: #7a541f;
|
||||
--background-800: #523814;
|
||||
--background-900: #291c0a;
|
||||
--background-950: #140e05;
|
||||
|
||||
--primary-50: #fbf3e9;
|
||||
--primary-100: #f8e7d3;
|
||||
--primary-200: #f0d0a8;
|
||||
--primary-300: #e9b87c;
|
||||
--primary-400: #e1a051;
|
||||
--primary-500: #da8925;
|
||||
--primary-600: #ae6d1e;
|
||||
--primary-700: #835216;
|
||||
--primary-800: #57370f;
|
||||
--primary-900: #2c1b07;
|
||||
--primary-950: #160e04;
|
||||
|
||||
--secondary-50: #fdf3e8;
|
||||
--secondary-100: #fae8d1;
|
||||
--secondary-200: #f6d0a2;
|
||||
--secondary-300: #f1b974;
|
||||
--secondary-400: #eda145;
|
||||
--secondary-500: #e88a17;
|
||||
--secondary-600: #ba6e12;
|
||||
--secondary-700: #8b530e;
|
||||
--secondary-800: #5d3709;
|
||||
--secondary-900: #2e1c05;
|
||||
--secondary-950: #170e02;
|
||||
|
||||
--accent-50: #fff4e5;
|
||||
--accent-100: #ffe8cc;
|
||||
--accent-200: #ffd199;
|
||||
|
@ -68,20 +76,26 @@
|
|||
--accent-800: #663800;
|
||||
--accent-900: #331c00;
|
||||
--accent-950: #1a0e00;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--text: #f2ede7;
|
||||
--background: #0d0a06;
|
||||
--background: var(--background-950);
|
||||
--primary: #d7bfa2;
|
||||
--secondary: #76552e;
|
||||
--accent: #ffa941;
|
||||
|
||||
--content-gradient: linear-gradient(to bottom right, var(--background-950), var(--background-900));
|
||||
--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%);
|
||||
|
||||
--link: var(--accent-300);
|
||||
--visited: var(--accent-400);
|
||||
--hover: var(--accent-500);
|
||||
|
||||
--text-50: #f6f3ee;
|
||||
--text-100: #ede6de;
|
||||
--text-200: #dbcebd;
|
||||
|
|
|
@ -12,9 +12,9 @@ import Layout from "../layouts/Layout.astro";
|
|||
<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(--accent);">[data expunged]</span>.
|
||||
my name is nelle (not Nelle, nelle), some call me <span style="color: var(--alt-accent);">[data expunged]</span>.
|
||||
<br />
|
||||
i am a 20-something year old, <span style="color: var(--accent);">[data expunged]</span>, with not much else going on.
|
||||
i am a 20-something year old, <span style="color: var(--alt-accent);">[data expunged]</span>, with not much else going on.
|
||||
</p>
|
||||
</section>
|
||||
</main>
|
||||
|
|
Loading…
Reference in a new issue