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

dark and light mode proper

Browse source
This commit is contained in:
nelle 2024-08-03 13:10:20 -06:00
parent 5210e567a5
commit 2afdcb5283
4 changed files with 140 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -11,7 +11,7 @@
border-radius: 3px;
opacity: 0.9;
background: linear-gradient(to bottom right, var(--background-950), var(--background-900));
background: var(--content-gradient);
-webkit-box-shadow: 0 0 8px var(--accent);
-moz-box-shadow: 0 0 8px var(--accent);

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

@ -1,69 +1,145 @@
:root {
--text: #f2ede7;
--background: #0d0a06;
--primary: #d7bfa2;
--secondary: #76552e;
--accent: #ffa941;
@media (prefers-color-scheme: light) {
:root {
--text: #17120c;
--background: var(--background-200);
--primary: #5d4528;
--secondary: #d1b189;
--accent: var(--accent-400);
--accent-gradient: linear-gradient(to bottom right, var(--accent), var(--accent-200) 30%, var(--text) 60%);
--content-gradient: linear-gradient(to bottom right, var(--background-700), var(--background-500));
--accent-gradient: linear-gradient(to bottom right, var(--accent-900), var(--accent-500) 30%, var(--text) 60%);
--text-50: #f6f3ee;
--text-100: #ede6de;
--text-200: #dbcebd;
--text-300: #c9b59c;
--text-400: #b89c7a;
--text-500: #a68359;
--text-600: #856947;
--text-700: #634f36;
--text-800: #423524;
--text-900: #211a12;
--text-950: #110d09;
--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: #f7f3ee;
--background-100: #efe7dc;
--background-200: #dfcfb9;
--background-300: #cfb696;
--background-400: #bf9e73;
--background-500: #af8650;
--background-600: #8c6b40;
--background-700: #695030;
--background-800: #463620;
--background-900: #231b10;
--background-950: #110d08;
--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;
--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;
--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;
--accent-50: #fff4e5;
--accent-100: #ffe8cc;
--accent-200: #ffd199;
--accent-300: #ffba66;
--accent-400: #ffa333;
--accent-500: #ff8c00;
--accent-600: #cc7000;
--accent-700: #995400;
--accent-800: #663800;
--accent-900: #331c00;
--accent-950: #1a0e00;
--accent-50: #fff4e5;
--accent-100: #ffe8cc;
--accent-200: #ffd199;
--accent-300: #ffba66;
--accent-400: #ffa333;
--accent-500: #ff8c00;
--accent-600: #cc7000;
--accent-700: #995400;
--accent-800: #663800;
--accent-900: #331c00;
--accent-950: #1a0e00;
}
}
@media (prefers-color-scheme: dark) {
:root {
--text: #f2ede7;
--background: #0d0a06;
--primary: #d7bfa2;
--secondary: #76552e;
--accent: #ffa941;
--content-gradient: linear-gradient(to bottom right, var(--background-950), var(--background-900));
--accent-gradient: linear-gradient(to bottom right, var(--accent), var(--accent-200) 30%, var(--text) 60%);
--text-50: #f6f3ee;
--text-100: #ede6de;
--text-200: #dbcebd;
--text-300: #c9b59c;
--text-400: #b89c7a;
--text-500: #a68359;
--text-600: #856947;
--text-700: #634f36;
--text-800: #423524;
--text-900: #211a12;
--text-950: #110d09;
--background-50: #f7f3ee;
--background-100: #efe7dc;
--background-200: #dfcfb9;
--background-300: #cfb696;
--background-400: #bf9e73;
--background-500: #af8650;
--background-600: #8c6b40;
--background-700: #695030;
--background-800: #463620;
--background-900: #231b10;
--background-950: #110d08;
--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;
--accent-50: #fff4e5;
--accent-100: #ffe8cc;
--accent-200: #ffd199;
--accent-300: #ffba66;
--accent-400: #ffa333;
--accent-500: #ff8c00;
--accent-600: #cc7000;
--accent-700: #995400;
--accent-800: #663800;
--accent-900: #331c00;
--accent-950: #1a0e00;
}
}

1
public/styles/css/main.css
View file

@ -1,3 +1,4 @@
@import "color-scheme.css";
@import "classes.css";

1
src/layouts/Layout.astro
View file

@ -12,6 +12,5 @@ import Footer from "../components/Footer.astro";
<slot />
<Footer />
<script type="text/javascript" src="/scripts/sga.js"></script>
<script type="text/javascript" src="/scripts/test.js"></script>
</body>
</html>