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

colors :3

Browse source
This commit is contained in:
nelle 2024-08-05 01:50:22 -06:00
parent f9613c42e2
commit 340a35dad3
3 changed files with 75 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
public/styles/css/classes.css
View file

@ -35,13 +35,13 @@ h1 {
} }
a:link { a:link {
color: var(--accent-500); color: var(--link);
} }
a:visited { a:visited {
color: var(--accent-400); color: var(--visited);
} }
a:hover { a:hover {
color: var(--accent-300); color: var(--hover);
} }

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

@ -1,61 +1,69 @@
:root {
--alt-accent: #60fe35;
}
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
:root { :root {
--text: #17120c; --text: #191209;
--background: var(--background-200); --background: var(--background-100);
--primary: #5d4528; --primary: #dd9339;
--secondary: #d1b189; --secondary: #f2bb78;
--accent: var(--accent-400); --accent: #ffa941;
--content-gradient: linear-gradient(to bottom right, var(--background-600), var(--background-500)); --content-gradient: linear-gradient(to bottom right, var(--primary-200), var(--secondary-600));
--accent-gradient: linear-gradient(to bottom right, var(--accent-600), var(--accent-500) 30%, var(--text-50) 60%); --accent-gradient: linear-gradient(to bottom right, var(--primary-700), var(--secondary-800) 30%, var(--text-50) 60%);
--text-50: #f6f3ee; --link: var(--accent-700);
--text-100: #ede6de; --visited: var(--accent-800);
--text-200: #dccebc; --hover: var(--accent-900);
--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; --text-50: #f8f3ec;
--background-100: #f0e6db; --text-100: #f1e7da;
--background-200: #e0ccb8; --text-200: #e4cfb4;
--background-300: #d1b394; --text-300: #d6b78f;
--background-400: #c29970; --text-400: #c99f69;
--background-500: #b3804d; --text-500: #bb8744;
--background-600: #8f663d; --text-600: #966c36;
--background-700: #6b4d2e; --text-700: #705129;
--background-800: #47331f; --text-800: #4b361b;
--background-900: #241a0f; --text-900: #251b0e;
--background-950: #120d08; --text-950: #130e07;
--primary-50: #f7f3ed; --background-50: #faf4eb;
--primary-100: #f0e7db; --background-100: #f5e8d6;
--primary-200: #e0ceb8; --background-200: #ebd1ad;
--primary-300: #d1b694; --background-300: #e0ba85;
--primary-400: #c29d70; --background-400: #d6a35c;
--primary-500: #b3854d; --background-500: #cc8c33;
--primary-600: #8f6a3d; --background-600: #a37029;
--primary-700: #6b502e; --background-700: #7a541f;
--primary-800: #47351f; --background-800: #523814;
--primary-900: #241b0f; --background-900: #291c0a;
--primary-950: #120d08; --background-950: #140e05;
--secondary-50: #f8f3ed; --primary-50: #fbf3e9;
--secondary-100: #f1e7da; --primary-100: #f8e7d3;
--secondary-200: #e2ceb6; --primary-200: #f0d0a8;
--secondary-300: #d4b691; --primary-300: #e9b87c;
--secondary-400: #c69d6c; --primary-400: #e1a051;
--secondary-500: #b88547; --primary-500: #da8925;
--secondary-600: #936a39; --primary-600: #ae6d1e;
--secondary-700: #6e502b; --primary-700: #835216;
--secondary-800: #49351d; --primary-800: #57370f;
--secondary-900: #251b0e; --primary-900: #2c1b07;
--secondary-950: #120d07; --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-50: #fff4e5;
--accent-100: #ffe8cc; --accent-100: #ffe8cc;
@ -68,20 +76,26 @@
--accent-800: #663800; --accent-800: #663800;
--accent-900: #331c00; --accent-900: #331c00;
--accent-950: #1a0e00; --accent-950: #1a0e00;
} }
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--text: #f2ede7; --text: #f2ede7;
--background: #0d0a06; --background: var(--background-950);
--primary: #d7bfa2; --primary: #d7bfa2;
--secondary: #76552e; --secondary: #76552e;
--accent: #ffa941; --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%); --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-50: #f6f3ee;
--text-100: #ede6de; --text-100: #ede6de;
--text-200: #dbcebd; --text-200: #dbcebd;

4
src/pages/index.astro
View file

@ -12,9 +12,9 @@ import Layout from "../layouts/Layout.astro";
<section class="content"> <section class="content">
<p>hello, what brings you here?</p> <p>hello, what brings you here?</p>
<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 /> <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> </p>
</section> </section>
</main> </main>