joshua/joshua.seigler.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

better colors

Browse source
This commit is contained in:
Joshua Seigler 2025-06-08 18:33:42 -04:00
parent 4d435a23c4
commit 165efe1d03
1 changed files with 26 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

48
assets/site.css
View file

@ -14,11 +14,13 @@
} }
body { body {
--c-highlight: hsl(0 0% 100% / 87.5%); --c-highlight: oklch(100% 0 0 / 0.875);
--c-dark: hsl(217 17% 21%); --c-dark: oklch(32.1% 0.022 259.9);
--c-accent: white; --c-accent: white;
--c-body-background: hsl(0 0% 85%); --c-body-background: oklch(85% 0 338);
--c-text-background-light: hsl(0 0% 95% / 60%); --c-bg1: oklch(85% 0.04 285);
--c-bg2: oklch(85% 0.04 188);
--c-text-background-light: oklch(96.2% 0 0 / 0.6);
--c-text-light: var(--c-highlight); --c-text-light: var(--c-highlight);
--c-text-dark: var(--c-dark); --c-text-dark: var(--c-dark);
@ -43,8 +45,8 @@ body {
); );
--inset: calc(50vw - var(--content-width) / 2); --inset: calc(50vw - var(--content-width) / 2);
background-image: background-image:
radial-gradient(circle at -20% 20vmin, #0000ff19, transparent 60%), radial-gradient(circle at -20% 20vmin, var(--c-bg1), transparent 60%),
radial-gradient(circle at 120% calc(100% - 20vmin), #0873, transparent 60%), radial-gradient(circle at 120% calc(100% - 20vmin), var(--c-bg2), transparent 60%),
url(/noise.png); url(/noise.png);
} }
@ -52,14 +54,15 @@ body[data-theme="dark"] {
background-color: var(--c-body-background); background-color: var(--c-body-background);
} }
[data-theme="dark"] { [data-theme="dark"] {
--c-highlight: hsl(320 40% 20% / 50%); --c-highlight: oklch(40% 0.088 341.9 / 0.6);
--c-dark: hsl(217 9% 8%); --c-accent: oklch(40% 0.088 341.9 / 0.8);
--c-accent: hsl(320 40% 25% / 80%); --c-body-background: oklch(15% 0.05 262);
--c-body-background: hsl(220 50% 5%); --c-bg1: oklch(15% 0.05 285);
--c-bg2: oklch(15% 0.05 188);
--c-text-background-light: hsl(320 40% 20% / 30%); --c-dark: oklch(19.1% 0.005 259.9);
--c-text-light: hsl(60 50% 86.67%); --c-text-background-light: oklch(30.6% 0.073 341.7 / 0.3);
--c-text-dark: hsl(60 50% 86.67%); --c-text-light: oklch(94% 0.045 107.2);
--c-text-dark: oklch(94% 0.045 107.2);
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@ -67,14 +70,15 @@ body[data-theme="dark"] {
background-color: var(--c-body-background); background-color: var(--c-body-background);
} }
[data-theme="auto"] { [data-theme="auto"] {
--c-highlight: hsl(320 40% 25% / 50%); --c-highlight: oklch(40% 0.088 341.9 / 0.6);
--c-dark: hsl(217 9% 8%); --c-accent: oklch(40% 0.088 341.9 / 0.8);
--c-accent: hsl(320 40% 25%); --c-body-background: oklch(15% 0.05 262);
--c-body-background: hsl(220 50% 5%); --c-bg1: oklch(15% 0.05 285);
--c-bg2: oklch(15% 0.05 188);
--c-text-background-light: hsl(320 40% 20% / 30%); --c-dark: oklch(19.1% 0.005 259.9);
--c-text-light: hsl(60 50% 86.67%); --c-text-background-light: oklch(30.6% 0.073 341.7 / 0.3);
--c-text-dark: hsl(60 50% 86.67%); --c-text-light: oklch(94% 0.045 107.2);
--c-text-dark: oklch(94% 0.045 107.2);
} }
} }