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