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

Add color scheme support

Browse source
This commit is contained in:
Ella Dunbar 2025-11-05 23:07:27 -06:00
parent 6fa306cf46
commit 244da50f36
3 changed files with 120 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

2
.gitignore vendored Normal file
View file

@ -0,0 +1,2 @@
*scratch*
*scratch*/

19
full/index.html
View file

@ -11,12 +11,21 @@
</head>
<body>
<div class="drop-shadow">
<header>
<strong>elladunbar.com</strong>
<nav>
<a href="https://elladunbar.com">Home</a> | Blog [coming soon!] | RSS and Atom feeds [coming soon!] | <a
href="https://git.elladunbar.com">Forgejo</a>
</nav>
<label>
Color Scheme
<select>
<option value="drifting">Drifting</option>
<option value="ascendant">Ascendant</option>
<option value="aristocratic">Aristocratic</option>
</select>
</label>
<hr>
</header>
@ -27,13 +36,15 @@
enjoy it very much.</p>
<h2>About Me</h2>
<p>I graduated with a Bachelor’s of Science in Electrical and Computer Engineering (what a mouthful...) from Rice
<p>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.</p>
<p>In computer world, I enjoy programming mostly in Python/Hy and Rust. I’ve written a few <a
href="https://tree-sitter.github.io/">tree-sitter</a> grammars (<a
href="https://github.com/elladunbar/tree-sitter-hy">tree-sitter-hy</a> and <a
href="https://github.com/elladunbar/tree-sitter-zanscript">tree-sitter-zanscript</a>) to enable better syntax
href="https://github.com/elladunbar/tree-sitter-zanscript">tree-sitter-zanscript</a>) to enable better
syntax
highlighting in my editor, and I’ve made a small project (<a
href="https://github.com/elladunbar/to-braille">to-braille</a>) to print images using Unicode braille
characters. I prefer Unix-like operating systems and usually work out of a terminal emulator.</p>
@ -44,7 +55,8 @@
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.</p>
<p>When I’m not working, I spend a lot of time reading <a href="https://news.ycombinator.com/">Hacker News</a>,
listening to music, and playing Super Smash Bros. Melee. Out of doors, I love climbing and backpacking, and Red
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.</p>
<h2>Links</h2>
@ -67,6 +79,7 @@
<p>Ella Dunbar | Updated on 2025-10-18 | <a href="https://git.elladunbar.com/ella/elladunbar.com">Source</a> |
Contact: web [at] elladunbar.com</p>
</footer>
</div>
</body>
</html>

62
full/style.css
View file

@ -66,40 +66,80 @@ h6 {
: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;
.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: #383838;
background: var(--color-background);
margin: 0 auto;
max-width: max(768px, 100ch);
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: #afafaf;
background: var(--color-header-footer);
strong {
margin: 0.5rem;
font-size: 1.6rem;
}
label {
font-size: 0.8rem;
}
}
footer {
background: #afafaf;
font-size: 0.9rem;
background: var(--color-header-footer);
font-size: 0.8rem;
p {
margin: 0.5rem;
@ -107,7 +147,7 @@ footer {
}
main {
background: #cccccc;
background: var(--color-main);
padding: 1rem;
}
@ -136,6 +176,10 @@ p {
/* hypertextual */
/* listing */
/* forms */
label {
margin: 0.5rem;
}
/* basic table */
/* image */
/* presentation */