From 570ab0a9f1dd7635e23c0b704e50812ff24939d5 Mon Sep 17 00:00:00 2001 From: Ella Dunbar Date: Mon, 27 Oct 2025 21:57:47 -0500 Subject: [PATCH 1/4] chore: run minifier --- www/index.html | 2 +- www/style.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/www/index.html b/www/index.html index 9523d2b..b042c8d 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

\ No newline at end of file +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

\ No newline at end of file diff --git a/www/style.css b/www/style.css index 5407c91..d9b39ef 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; --text: light-dark(#000000, #FFFFFF); --bg: light-dark(#FFFFFF, #000000); } /* https://smolweb.org/subset.html */ /* structural */ html { /* respect user font choices */ font-size: 100%; } /* semantic */ header strong { font-size: 1.6rem; } footer { font-size: 0.9rem; } /* textual */ h1 { font-size: 2rem; } h2 { font-size: 1.6rem; } h3 { font-size: 1.2rem; } /* 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; --text: light-dark(#000000, #FFFFFF); --bg: light-dark(#FFFFFF, #000000); font-family: sans-serif; } /* https://smolweb.org/subset.html */ /* structural */ body { margin: 0 auto; max-width: max(768px, 100ch); } html { /* respect user font choices */ font-size: 100%; } /* semantic */ header strong { margin: 0.5rem; font-size: 1.6rem; } footer { font-size: 0.9rem; p { margin: 0.5rem; } } main { margin: 1rem; } nav { margin: 0.5rem; } /* 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 35ac0d3bd88ea345314a8a5e60cb8240356787f0 Mon Sep 17 00:00:00 2001 From: Ella Dunbar Date: Thu, 6 Nov 2025 18:57:38 -0600 Subject: [PATCH 2/4] Add sticky footer --- full/index.html | 12 +++++++----- full/style.css | 22 +++++++++++++++------- www/index.html | 2 +- www/style.css | 2 +- 4 files changed, 24 insertions(+), 14 deletions(-) diff --git a/full/index.html b/full/index.html index 677dd28..5588f36 100644 --- a/full/index.html +++ b/full/index.html @@ -13,19 +13,20 @@
+
elladunbar.com - +
@@ -78,6 +79,7 @@

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

+
diff --git a/full/style.css b/full/style.css index c2910b0..5afdcfa 100644 --- a/full/style.css +++ b/full/style.css @@ -101,8 +101,15 @@ html:has(option[value="aristocratic"]:checked) { /* structural */ body { background: var(--color-background); + margin: 0 auto; max-width: max(768px, 80ch); + + .drop-shadow { + display: flex; + flex-direction: column; + min-height: 100vh; + } } html { @@ -116,7 +123,7 @@ html { Helvetica, Arial, sans-serif; - /* respect user font choices */ + /* respect user font size */ font-size: 100%; font-weight: 400; color: var(--color-text); @@ -133,13 +140,15 @@ header { } label { - font-size: 0.8rem; + display: block; + margin: 0.5rem; + font-size: 0.9rem; } } footer { background: var(--color-header-footer); - font-size: 0.8rem; + font-size: 0.9rem; p { margin: 0.5rem; @@ -148,7 +157,10 @@ footer { main { background: var(--color-main); + padding: 1rem; + + flex: 1; } nav { @@ -176,10 +188,6 @@ p { /* hypertextual */ /* listing */ /* forms */ -label { - margin: 0.5rem; -} - /* basic table */ /* image */ /* presentation */ diff --git a/www/index.html b/www/index.html index b178b22..bb167ae 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

+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 diff --git a/www/style.css b/www/style.css index aacc0fa..d782e05 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); } html { font-family: "SF Pro Display", -apple-system, system-ui, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* respect user font choices */ font-size: 100%; font-weight: 400; color: var(--color-text); } /* semantic */ header { background: var(--color-header-footer); strong { margin: 0.5rem; font-size: 1.6rem; } label { font-size: 0.8rem; } } footer { background: var(--color-header-footer); font-size: 0.8rem; p { margin: 0.5rem; } } main { background: var(--color-main); padding: 1rem; } nav { margin: 0.5rem; } /* textual */ h1 { font-size: 2rem; } h2 { font-size: 1.6rem; } h3 { font-size: 1.2rem; } p { margin: 1rem 0; } /* hypertextual */ /* listing */ /* forms */ label { margin: 0.5rem; } /* 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); } /* 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: 100vh; } } 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); strong { margin: 0.5rem; font-size: 1.6rem; } label { display: block; margin: 0.5rem; font-size: 0.9rem; } } footer { background: var(--color-header-footer); font-size: 0.9rem; p { margin: 0.5rem; } } main { background: var(--color-main); padding: 1rem; flex: 1; } nav { margin: 0.5rem; } /* 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 c39c4d7f8af8afa1b0a9ce9e835afa3f835d062e Mon Sep 17 00:00:00 2001 From: Ella Dunbar Date: Thu, 6 Nov 2025 20:42:26 -0600 Subject: [PATCH 3/4] Better align theme picker --- full/index.html | 2 -- full/style.css | 25 ++++++++++++++++--------- www/index.html | 2 +- www/style.css | 2 +- 4 files changed, 18 insertions(+), 13 deletions(-) diff --git a/full/index.html b/full/index.html index 5588f36..eb54b23 100644 --- a/full/index.html +++ b/full/index.html @@ -13,7 +13,6 @@
-
elladunbar.com
diff --git a/full/style.css b/full/style.css index 5afdcfa..68b6e20 100644 --- a/full/style.css +++ b/full/style.css @@ -108,7 +108,7 @@ body { .drop-shadow { display: flex; flex-direction: column; - min-height: 100vh; + min-height: 100lvh; } } @@ -134,21 +134,32 @@ html { header { background: var(--color-header-footer); + display: flex; + flex-wrap: wrap; + align-items: center; + + hr { + flex: 0 0 100%; + } + strong { - margin: 0.5rem; + margin: 0 auto 0 0.5rem; font-size: 1.6rem; } label { - display: block; + margin: 0.5rem 0.5rem 0; + font-size: 0.8rem; + } + + nav { margin: 0.5rem; - font-size: 0.9rem; } } footer { background: var(--color-header-footer); - font-size: 0.9rem; + font-size: 0.8rem; p { margin: 0.5rem; @@ -163,10 +174,6 @@ main { flex: 1; } -nav { - margin: 0.5rem; -} - /* textual */ h1 { diff --git a/www/index.html b/www/index.html index bb167ae..142efa8 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
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 diff --git a/www/style.css b/www/style.css index d782e05..9dae9be 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: 100vh; } } 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); strong { margin: 0.5rem; font-size: 1.6rem; } label { display: block; margin: 0.5rem; font-size: 0.9rem; } } footer { background: var(--color-header-footer); font-size: 0.9rem; p { margin: 0.5rem; } } main { background: var(--color-main); padding: 1rem; flex: 1; } nav { margin: 0.5rem; } /* 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); 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 From 426bb7056f1713ca8853fd8858dd3880ba57b300 Mon Sep 17 00:00:00 2001 From: Ella Dunbar Date: Thu, 6 Nov 2025 20:51:31 -0600 Subject: [PATCH 4/4] Better text wrapping in header/footer --- full/style.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/full/style.css b/full/style.css index 68b6e20..32297d4 100644 --- a/full/style.css +++ b/full/style.css @@ -133,6 +133,7 @@ html { /* semantic */ header { background: var(--color-header-footer); + text-wrap: wrap; display: flex; flex-wrap: wrap; @@ -160,6 +161,7 @@ header { footer { background: var(--color-header-footer); font-size: 0.8rem; + text-wrap: wrap; p { margin: 0.5rem;