ella/elladunbar.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make mascot match text color

Browse source
This commit is contained in:
Ella Dunbar 2025-12-12 21:12:42 -06:00
parent bab9f3803e
commit f58b68c584
2 changed files with 64 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

63
full/style.css
View file

@ -72,12 +72,34 @@ h6 {
box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.2), 0 0.75rem 2.5rem 0 rgba(0, 0, 0, 0.19);
}
/* oklch site: https://oklch.com/ */
/* color filters: https://angel-rs.github.io/css-color-filter-generator/ */
/* Dead Orbit */
html:has(option[value="drifting"]:checked) {
--color-background: light-dark(oklch(0.95 0 0), oklch(0.45 0 0));
--color-header-footer: light-dark(oklch(0.68 0 0), oklch(0.25 0 0));
--color-main: light-dark(oklch(0.98 0 0), oklch(0.175 0 0));
--color-text: light-dark(oklch(0.2 0 0), oklch(0.9 0 0));
--svg-brightness-1: 0%;
--svg-saturate-1: 100%;
--svg-invert: 0%;
--svg-sepia: 1%;
--svg-saturate-2: 6582%;
--svg-hue-rotate: 336deg;
--svg-brightness-2: 88%;
--svg-contrast: 83%;
@media (prefers-color-scheme: dark) {
--svg-brightness-1: 0%;
--svg-saturate-1: 100%;
--svg-invert: 94%;
--svg-sepia: 0%;
--svg-saturate-2: 34%;
--svg-hue-rotate: 274deg;
--svg-brightness-2: 90%;
--svg-contrast: 107%;
}
}
/* Future War Cult */
@ -86,6 +108,26 @@ html:has(option[value="ascendant"]:checked) {
--color-header-footer: light-dark(oklch(0.98 0 0), oklch(0.7314 0.0725 91.4));
--color-main: light-dark(oklch(0.895 0.0916 88.17), oklch(0.3589 0.1438 281.27));
--color-text: light-dark(oklch(0.4274 0.1456 21.51), oklch(0.98 0 0));
--svg-brightness-1: 0%;
--svg-saturate-1: 100%;
--svg-invert: 21%;
--svg-sepia: 37%;
--svg-saturate-2: 3939%;
--svg-hue-rotate: 333deg;
--svg-brightness-2: 75%;
--svg-contrast: 97%;
@media (prefers-color-scheme: dark) {
--svg-brightness-1: 0%;
--svg-saturate-1: 100%;
--svg-invert: 94%;
--svg-sepia: 97%;
--svg-saturate-2: 3762%;
--svg-hue-rotate: 183deg;
--svg-brightness-2: 123%;
--svg-contrast: 94%;
}
}
/* New Monarchy */
@ -94,6 +136,26 @@ html:has(option[value="aristocratic"]:checked) {
--color-header-footer: light-dark(oklch(0.4531 0.1712 29.27), oklch(0.3 0 0));
--color-main: light-dark(oklch(0.9 0 0), oklch(0.2299 0.05 29.27));
--color-text: light-dark(oklch(0.3 0 0), oklch(0.9 0 0));
--svg-brightness-1: 0%;
--svg-saturate-1: 100%;
--svg-invert: 16%;
--svg-sepia: 0%;
--svg-saturate-2: 0%;
--svg-hue-rotate: 268deg;
--svg-brightness-2: 104%;
--svg-contrast: 95%;
@media (prefers-color-scheme: dark) {
--svg-brightness-1: 0%;
--svg-saturate-1: 100%;
--svg-invert: 94%;
--svg-sepia: 0%;
--svg-saturate-2: 34%;
--svg-hue-rotate: 274deg;
--svg-brightness-2: 90%;
--svg-contrast: 107%;
}
}
@ -146,6 +208,7 @@ header {
img {
margin: 0.5rem 0.5rem 0 0.5rem;
height: 4rem;
filter: brightness(var(--svg-brightness-1)) saturate(var(--svg-saturate-1)) invert(var(--svg-invert)) sepia(var(--svg-sepia)) saturate(var(--svg-saturate-2)) hue-rotate(var(--svg-hue-rotate)) brightness(var(--svg-brightness-2)) contrast(var(--svg-contrast));
}
strong {

2
www/style.css
View file

@ -1 +1 @@
/* https://www.joshwcomeau.com/css/custom-css-reset/ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } @media (prefers-reduced-motion: no-preference) { html { interpolate-size: allow-keywords; } } body { line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; hyphens: auto; } p { text-wrap: pretty; } h1, h2, h3, h4, h5, h6 { text-wrap: balance; } /* our stuff */ :root { /* auto light/dark based on user choice */ color-scheme: light dark; } .drop-shadow { box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.2), 0 0.75rem 2.5rem 0 rgba(0, 0, 0, 0.19); } /* Dead Orbit */ html:has(option[value="drifting"]:checked) { --color-background: light-dark(oklch(0.95 0 0), oklch(0.45 0 0)); --color-header-footer: light-dark(oklch(0.68 0 0), oklch(0.25 0 0)); --color-main: light-dark(oklch(0.98 0 0), oklch(0.175 0 0)); --color-text: light-dark(oklch(0.2 0 0), oklch(0.9 0 0)); } /* Future War Cult */ html:has(option[value="ascendant"]:checked) { --color-background: light-dark(oklch(0.4088 0.1303 281.27), oklch(0.1847 0.0503 286.27)); --color-header-footer: light-dark(oklch(0.98 0 0), oklch(0.7314 0.0725 91.4)); --color-main: light-dark(oklch(0.895 0.0916 88.17), oklch(0.3589 0.1438 281.27)); --color-text: light-dark(oklch(0.4274 0.1456 21.51), oklch(0.98 0 0)); } /* New Monarchy */ html:has(option[value="aristocratic"]:checked) { --color-background: light-dark(oklch(0.98 0 0), oklch(0.2665 0.0841 29.27)); --color-header-footer: light-dark(oklch(0.4531 0.1712 29.27), oklch(0.3 0 0)); --color-main: light-dark(oklch(0.9 0 0), oklch(0.2299 0.05 29.27)); --color-text: light-dark(oklch(0.3 0 0), oklch(0.9 0 0)); } /* https://smolweb.org/subset.html */ /* structural */ body { background: var(--color-background); margin: 0 auto; max-width: max(768px, 80ch); .drop-shadow { display: flex; flex-direction: column; min-height: 100lvh; } } html { font-family: "SF Pro Display", -apple-system, system-ui, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* respect user font size */ font-size: 100%; font-weight: 400; color: var(--color-text); } /* semantic */ header { background: var(--color-header-footer); text-wrap: wrap; display: flex; flex-wrap: wrap; align-items: center; hr { flex: 0 0 100%; } img { margin: 0.5rem 0.5rem 0 0.5rem; height: 4rem; } strong { margin: 0 auto 0 0; font-size: 1.6rem; } label { margin: 0.5rem 0.5rem 0; font-size: 0.8rem; } nav { margin: 0.5rem; } } footer { background: var(--color-header-footer); font-size: 0.8rem; text-wrap: wrap; p { margin: 0.5rem; } } main { background: var(--color-main); padding: 1rem; flex: 1; } /* textual */ h1 { font-size: 2rem; } h2 { font-size: 1.6rem; } h3 { font-size: 1.2rem; } p { margin: 1rem 0; } /* hypertextual */ /* listing */ /* forms */ /* basic table */ /* image */ /* presentation */ /* metainformation and linking */
/* https://www.joshwcomeau.com/css/custom-css-reset/ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } @media (prefers-reduced-motion: no-preference) { html { interpolate-size: allow-keywords; } } body { line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; hyphens: auto; } p { text-wrap: pretty; } h1, h2, h3, h4, h5, h6 { text-wrap: balance; } /* our stuff */ :root { /* auto light/dark based on user choice */ color-scheme: light dark; } .drop-shadow { box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.2), 0 0.75rem 2.5rem 0 rgba(0, 0, 0, 0.19); } /* oklch site: https://oklch.com/ */ /* color filters: https://angel-rs.github.io/css-color-filter-generator/ */ /* Dead Orbit */ html:has(option[value="drifting"]:checked) { --color-background: light-dark(oklch(0.95 0 0), oklch(0.45 0 0)); --color-header-footer: light-dark(oklch(0.68 0 0), oklch(0.25 0 0)); --color-main: light-dark(oklch(0.98 0 0), oklch(0.175 0 0)); --color-text: light-dark(oklch(0.2 0 0), oklch(0.9 0 0)); --svg-brightness-1: 0%; --svg-saturate-1: 100%; --svg-invert: 0%; --svg-sepia: 1%; --svg-saturate-2: 6582%; --svg-hue-rotate: 336deg; --svg-brightness-2: 88%; --svg-contrast: 83%; @media (prefers-color-scheme: dark) { --svg-brightness-1: 0%; --svg-saturate-1: 100%; --svg-invert: 94%; --svg-sepia: 0%; --svg-saturate-2: 34%; --svg-hue-rotate: 274deg; --svg-brightness-2: 90%; --svg-contrast: 107%; } } /* Future War Cult */ html:has(option[value="ascendant"]:checked) { --color-background: light-dark(oklch(0.4088 0.1303 281.27), oklch(0.1847 0.0503 286.27)); --color-header-footer: light-dark(oklch(0.98 0 0), oklch(0.7314 0.0725 91.4)); --color-main: light-dark(oklch(0.895 0.0916 88.17), oklch(0.3589 0.1438 281.27)); --color-text: light-dark(oklch(0.4274 0.1456 21.51), oklch(0.98 0 0)); --svg-brightness-1: 0%; --svg-saturate-1: 100%; --svg-invert: 21%; --svg-sepia: 37%; --svg-saturate-2: 3939%; --svg-hue-rotate: 333deg; --svg-brightness-2: 75%; --svg-contrast: 97%; @media (prefers-color-scheme: dark) { --svg-brightness-1: 0%; --svg-saturate-1: 100%; --svg-invert: 94%; --svg-sepia: 97%; --svg-saturate-2: 3762%; --svg-hue-rotate: 183deg; --svg-brightness-2: 123%; --svg-contrast: 94%; } } /* New Monarchy */ html:has(option[value="aristocratic"]:checked) { --color-background: light-dark(oklch(0.98 0 0), oklch(0.2665 0.0841 29.27)); --color-header-footer: light-dark(oklch(0.4531 0.1712 29.27), oklch(0.3 0 0)); --color-main: light-dark(oklch(0.9 0 0), oklch(0.2299 0.05 29.27)); --color-text: light-dark(oklch(0.3 0 0), oklch(0.9 0 0)); --svg-brightness-1: 0%; --svg-saturate-1: 100%; --svg-invert: 16%; --svg-sepia: 0%; --svg-saturate-2: 0%; --svg-hue-rotate: 268deg; --svg-brightness-2: 104%; --svg-contrast: 95%; @media (prefers-color-scheme: dark) { --svg-brightness-1: 0%; --svg-saturate-1: 100%; --svg-invert: 94%; --svg-sepia: 0%; --svg-saturate-2: 34%; --svg-hue-rotate: 274deg; --svg-brightness-2: 90%; --svg-contrast: 107%; } } /* https://smolweb.org/subset.html */ /* structural */ body { background: var(--color-background); margin: 0 auto; max-width: max(768px, 80ch); .drop-shadow { display: flex; flex-direction: column; min-height: 100lvh; } } html { font-family: "SF Pro Display", -apple-system, system-ui, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* respect user font size */ font-size: 100%; font-weight: 400; color: var(--color-text); } /* semantic */ header { background: var(--color-header-footer); text-wrap: wrap; display: flex; flex-wrap: wrap; align-items: center; hr { flex: 0 0 100%; } img { margin: 0.5rem 0.5rem 0 0.5rem; height: 4rem; filter: brightness(var(--svg-brightness-1)) saturate(var(--svg-saturate-1)) invert(var(--svg-invert)) sepia(var(--svg-sepia)) saturate(var(--svg-saturate-2)) hue-rotate(var(--svg-hue-rotate)) brightness(var(--svg-brightness-2)) contrast(var(--svg-contrast)); } strong { margin: 0 auto 0 0; font-size: 1.6rem; } label { margin: 0.5rem 0.5rem 0; font-size: 0.8rem; } nav { margin: 0.5rem; } } footer { background: var(--color-header-footer); font-size: 0.8rem; text-wrap: wrap; p { margin: 0.5rem; } } main { background: var(--color-main); padding: 1rem; flex: 1; } /* textual */ h1 { font-size: 2rem; } h2 { font-size: 1.6rem; } h3 { font-size: 1.2rem; } p { margin: 1rem 0; } /* hypertextual */ /* listing */ /* forms */ /* basic table */ /* image */ /* presentation */ /* metainformation and linking */