From bab9f3803e7773adb717ccefe6491e2eb1f30792 Mon Sep 17 00:00:00 2001 From: Ella Dunbar Date: Fri, 12 Dec 2025 08:09:02 -0600 Subject: [PATCH 1/3] Add mascot to header and favicon --- full/favicon.svg | 97 ++++++++++++++++++++++++++++++++++++++++++++++++ full/index.html | 5 ++- full/style.css | 7 +++- www/favicon.svg | 97 ++++++++++++++++++++++++++++++++++++++++++++++++ www/index.html | 2 +- www/style.css | 2 +- 6 files changed, 206 insertions(+), 4 deletions(-) create mode 100644 full/favicon.svg create mode 100644 www/favicon.svg diff --git a/full/favicon.svg b/full/favicon.svg new file mode 100644 index 0000000..6e6d2f9 --- /dev/null +++ b/full/favicon.svg @@ -0,0 +1,97 @@ + + + + + + + + + + + + + + + + + + + diff --git a/full/index.html b/full/index.html index eb54b23..33e4d70 100644 --- a/full/index.html +++ b/full/index.html @@ -7,12 +7,15 @@ Ella Dunbar +
+ The icon and mascot for the website. It is a hand-drawn picture of a spherical body with large eyes, a smile, and slim wavy arms and legs elladunbar.com
diff --git a/full/style.css b/full/style.css index 32297d4..287d539 100644 --- a/full/style.css +++ b/full/style.css @@ -143,8 +143,13 @@ header { flex: 0 0 100%; } + img { + margin: 0.5rem 0.5rem 0 0.5rem; + height: 4rem; + } + strong { - margin: 0 auto 0 0.5rem; + margin: 0 auto 0 0; font-size: 1.6rem; } diff --git a/www/favicon.svg b/www/favicon.svg new file mode 100644 index 0000000..6e6d2f9 --- /dev/null +++ b/www/favicon.svg @@ -0,0 +1,97 @@ + + + + + + + + + + + + + + + + + + + diff --git a/www/index.html b/www/index.html index 142efa8..ef07245 100644 --- a/www/index.html +++ b/www/index.html @@ -1 +1 @@ -Ella Dunbar
elladunbar.com

Welcome

Hi, I’m Ella. Welcome to my really really awesome website!! You should probably enjoy it, or you won’t enjoy it very much.

About Me

I graduated with a Bachelor’s of Science in Electrical and Computer Engineering (what a mouthful...) from Rice University in 2024. I now do data science as a Neurobiology researcher at The University of Alabama at Birmingham.

In computer world, I enjoy programming mostly in Python/Hy and Rust. I’ve written a few tree-sitter grammars (tree-sitter-hy and tree-sitter-zanscript) to enable better syntax highlighting in my editor, and I’ve made a small project (to-braille) to print images using Unicode braille characters. I prefer Unix-like operating systems and usually work out of a terminal emulator.

At Rice, my senior capstone project was Sea++ where my team created an autonomous solar-powered sailboat from scratch. I especially enjoyed implementing a more robust communication protocol for our microcontrollers. The protocol was built on top of serial with checksumming and error state communication. In other classes, I designed and programmed a custom bicycle spedometer for Beer Bike athletes, and I spent a lot of time playing with images and deep learning models.

When I’m not working, I spend a lot of time reading Hacker News, listening to music, and playing Super Smash Bros. Melee. Out of doors, I love climbing and backpacking, and Red River Gorge, the Ouachita Mountains, and Big Bend National Park are some of my favorite spots.

Links

More Serious

Less Serious

Ella Dunbar | Updated on 2025-10-18 | Source | Contact: web [at] elladunbar.com

\ No newline at end of file +Ella Dunbar
The icon and mascot for the website. It is a hand-drawn picture of a spherical body with large eyes, a smile, and slim wavy arms and legselladunbar.com

Welcome

Hi, I’m Ella. Welcome to my really really awesome website!! You should probably enjoy it, or you won’t enjoy it very much.

About Me

I graduated with a Bachelor’s of Science in Electrical and Computer Engineering (what a mouthful...) from Rice University in 2024. I now do data science as a Neurobiology researcher at The University of Alabama at Birmingham.

In computer world, I enjoy programming mostly in Python/Hy and Rust. I’ve written a few tree-sitter grammars (tree-sitter-hy and tree-sitter-zanscript) to enable better syntax highlighting in my editor, and I’ve made a small project (to-braille) to print images using Unicode braille characters. I prefer Unix-like operating systems and usually work out of a terminal emulator.

At Rice, my senior capstone project was Sea++ where my team created an autonomous solar-powered sailboat from scratch. I especially enjoyed implementing a more robust communication protocol for our microcontrollers. The protocol was built on top of serial with checksumming and error state communication. In other classes, I designed and programmed a custom bicycle spedometer for Beer Bike athletes, and I spent a lot of time playing with images and deep learning models.

When I’m not working, I spend a lot of time reading Hacker News, listening to music, and playing Super Smash Bros. Melee. Out of doors, I love climbing and backpacking, and Red River Gorge, the Ouachita Mountains, and Big Bend National Park are some of my favorite spots.

Links

More Serious

Less Serious

Ella Dunbar | Updated on 2025-12-12 | Source | Contact: web [at] elladunbar.com

\ No newline at end of file diff --git a/www/style.css b/www/style.css index 9dae9be..73661ac 100644 --- a/www/style.css +++ b/www/style.css @@ -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); display: flex; flex-wrap: wrap; align-items: center; hr { flex: 0 0 100%; } strong { margin: 0 auto 0 0.5rem; 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; 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 */ \ No newline at end of file +/* 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 */ \ No newline at end of file From f58b68c58494e6eb899ed67d52a61f9aca783fc8 Mon Sep 17 00:00:00 2001 From: Ella Dunbar Date: Fri, 12 Dec 2025 21:12:42 -0600 Subject: [PATCH 2/3] Make mascot match text color --- full/style.css | 63 ++++++++++++++++++++++++++++++++++++++++++++++++++ www/style.css | 2 +- 2 files changed, 64 insertions(+), 1 deletion(-) diff --git a/full/style.css b/full/style.css index 287d539..eb40940 100644 --- a/full/style.css +++ b/full/style.css @@ -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 { diff --git a/www/style.css b/www/style.css index 73661ac..6678d24 100644 --- a/www/style.css +++ b/www/style.css @@ -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 */ \ No newline at end of file +/* 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 */ \ No newline at end of file From 215ce68e81d2db3950cc5c213e1faee14d6dc2e8 Mon Sep 17 00:00:00 2001 From: Ella Dunbar Date: Sat, 13 Dec 2025 00:06:48 -0600 Subject: [PATCH 3/3] Add new color theme and change names --- full/index.html | 7 ++++--- full/style.css | 52 +++++++++++++++++++++++++++++++++++++------------ www/index.html | 2 +- www/style.css | 2 +- 4 files changed, 46 insertions(+), 17 deletions(-) diff --git a/full/index.html b/full/index.html index 33e4d70..e9a2b1a 100644 --- a/full/index.html +++ b/full/index.html @@ -20,9 +20,10 @@