Add color scheme support
This commit is contained in:
parent
6fa306cf46
commit
244da50f36
3 changed files with 120 additions and 61 deletions
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
*scratch*
|
||||||
|
*scratch*/
|
||||||
117
full/index.html
117
full/index.html
|
|
@ -11,62 +11,75 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<div class="drop-shadow">
|
||||||
<strong>elladunbar.com</strong>
|
<header>
|
||||||
<nav>
|
<strong>elladunbar.com</strong>
|
||||||
<a href="https://elladunbar.com">Home</a> | Blog [coming soon!] | RSS and Atom feeds [coming soon!] | <a
|
<nav>
|
||||||
href="https://git.elladunbar.com">Forgejo</a>
|
<a href="https://elladunbar.com">Home</a> | Blog [coming soon!] | RSS and Atom feeds [coming soon!] | <a
|
||||||
</nav>
|
href="https://git.elladunbar.com">Forgejo</a>
|
||||||
<hr>
|
</nav>
|
||||||
</header>
|
<label>
|
||||||
|
Color Scheme
|
||||||
|
<select>
|
||||||
|
<option value="drifting">Drifting</option>
|
||||||
|
<option value="ascendant">Ascendant</option>
|
||||||
|
<option value="aristocratic">Aristocratic</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
<hr>
|
||||||
|
</header>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<article>
|
<article>
|
||||||
<h1>Welcome</h1>
|
<h1>Welcome</h1>
|
||||||
<p>Hi, I’m Ella. Welcome to my really <i>really</i> awesome website!! You should probably enjoy it, or you won’t
|
<p>Hi, I’m Ella. Welcome to my really <i>really</i> awesome website!! You should probably enjoy it, or you won’t
|
||||||
enjoy it very much.</p>
|
enjoy it very much.</p>
|
||||||
|
|
||||||
<h2>About Me</h2>
|
<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
|
||||||
University in 2024. I now do data science as a Neurobiology researcher at The University of Alabama at
|
Rice
|
||||||
Birmingham.</p>
|
University in 2024. I now do data science as a Neurobiology researcher at The University of Alabama at
|
||||||
<p>In computer world, I enjoy programming mostly in Python/Hy and Rust. I’ve written a few <a
|
Birmingham.</p>
|
||||||
href="https://tree-sitter.github.io/">tree-sitter</a> grammars (<a
|
<p>In computer world, I enjoy programming mostly in Python/Hy and Rust. I’ve written a few <a
|
||||||
href="https://github.com/elladunbar/tree-sitter-hy">tree-sitter-hy</a> and <a
|
href="https://tree-sitter.github.io/">tree-sitter</a> grammars (<a
|
||||||
href="https://github.com/elladunbar/tree-sitter-zanscript">tree-sitter-zanscript</a>) to enable better syntax
|
href="https://github.com/elladunbar/tree-sitter-hy">tree-sitter-hy</a> and <a
|
||||||
highlighting in my editor, and I’ve made a small project (<a
|
href="https://github.com/elladunbar/tree-sitter-zanscript">tree-sitter-zanscript</a>) to enable better
|
||||||
href="https://github.com/elladunbar/to-braille">to-braille</a>) to print images using Unicode braille
|
syntax
|
||||||
characters. I prefer Unix-like operating systems and usually work out of a terminal emulator.</p>
|
highlighting in my editor, and I’ve made a small project (<a
|
||||||
<p>At Rice, my senior capstone project was <a
|
href="https://github.com/elladunbar/to-braille">to-braille</a>) to print images using Unicode braille
|
||||||
href="https://oedk.rice.edu/teams-details?recordId=recOoHcwRsKrtGwNm">Sea++</a> where my team created an
|
characters. I prefer Unix-like operating systems and usually work out of a terminal emulator.</p>
|
||||||
autonomous solar-powered sailboat from scratch. I especially enjoyed implementing a more robust communication
|
<p>At Rice, my senior capstone project was <a
|
||||||
protocol for our microcontrollers. The protocol was built on top of serial with checksumming and error state
|
href="https://oedk.rice.edu/teams-details?recordId=recOoHcwRsKrtGwNm">Sea++</a> where my team created an
|
||||||
communication. In other classes, I designed and programmed a custom bicycle spedometer for Beer Bike athletes,
|
autonomous solar-powered sailboat from scratch. I especially enjoyed implementing a more robust communication
|
||||||
and I spent a lot of time playing with images and deep learning models.</p>
|
protocol for our microcontrollers. The protocol was built on top of serial with checksumming and error state
|
||||||
<p>When I’m not working, I spend a lot of time reading <a href="https://news.ycombinator.com/">Hacker News</a>,
|
communication. In other classes, I designed and programmed a custom bicycle spedometer for Beer Bike athletes,
|
||||||
listening to music, and playing Super Smash Bros. Melee. Out of doors, I love climbing and backpacking, and Red
|
and I spent a lot of time playing with images and deep learning models.</p>
|
||||||
River Gorge, the Ouachita Mountains, and Big Bend National Park are some of my favorite spots.</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
|
||||||
|
River Gorge, the Ouachita Mountains, and Big Bend National Park are some of my favorite spots.</p>
|
||||||
|
|
||||||
<h2>Links</h2>
|
<h2>Links</h2>
|
||||||
<h3>More Serious</h3>
|
<h3>More Serious</h3>
|
||||||
<ul>
|
<ul>
|
||||||
<li>GitHub: <a href="https://github.com/elladunbar">elladunbar</a></li>
|
<li>GitHub: <a href="https://github.com/elladunbar">elladunbar</a></li>
|
||||||
<li>Forgejo: <a href="https://git.elladunbar.com/ella">ella</a></li>
|
<li>Forgejo: <a href="https://git.elladunbar.com/ella">ella</a></li>
|
||||||
<li>LinkedIn: <a href="https://www.linkedin.com/in/ella-dunbar">Ella Dunbar</a></li>
|
<li>LinkedIn: <a href="https://www.linkedin.com/in/ella-dunbar">Ella Dunbar</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<h3>Less Serious</h3>
|
<h3>Less Serious</h3>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Last.fm: <a href="https://www.last.fm/user/elladunbar">elladunbar</a></li>
|
<li>Last.fm: <a href="https://www.last.fm/user/elladunbar">elladunbar</a></li>
|
||||||
<li>Hacker News: <a href="https://news.ycombinator.com/user?id=dunb">dunb</a></li>
|
<li>Hacker News: <a href="https://news.ycombinator.com/user?id=dunb">dunb</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</article>
|
</article>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<hr>
|
<hr>
|
||||||
<p>Ella Dunbar | Updated on 2025-10-18 | <a href="https://git.elladunbar.com/ella/elladunbar.com">Source</a> |
|
<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>
|
Contact: web [at] elladunbar.com</p>
|
||||||
</footer>
|
</footer>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -66,40 +66,80 @@ h6 {
|
||||||
:root {
|
:root {
|
||||||
/* auto light/dark based on user choice */
|
/* auto light/dark based on user choice */
|
||||||
color-scheme: light dark;
|
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 */
|
/* https://smolweb.org/subset.html */
|
||||||
/* structural */
|
/* structural */
|
||||||
body {
|
body {
|
||||||
background: #383838;
|
background: var(--color-background);
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
max-width: max(768px, 100ch);
|
max-width: max(768px, 80ch);
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
|
font-family: "SF Pro Display",
|
||||||
|
-apple-system,
|
||||||
|
system-ui,
|
||||||
|
BlinkMacSystemFont,
|
||||||
|
"Inter",
|
||||||
|
"Segoe UI",
|
||||||
|
Roboto,
|
||||||
|
Helvetica,
|
||||||
|
Arial,
|
||||||
|
sans-serif;
|
||||||
/* respect user font choices */
|
/* respect user font choices */
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
|
font-weight: 400;
|
||||||
|
color: var(--color-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* semantic */
|
/* semantic */
|
||||||
header {
|
header {
|
||||||
background: #afafaf;
|
background: var(--color-header-footer);
|
||||||
|
|
||||||
strong {
|
strong {
|
||||||
margin: 0.5rem;
|
margin: 0.5rem;
|
||||||
font-size: 1.6rem;
|
font-size: 1.6rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
background: #afafaf;
|
background: var(--color-header-footer);
|
||||||
font-size: 0.9rem;
|
font-size: 0.8rem;
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin: 0.5rem;
|
margin: 0.5rem;
|
||||||
|
|
@ -107,7 +147,7 @@ footer {
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
background: #cccccc;
|
background: var(--color-main);
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -136,6 +176,10 @@ p {
|
||||||
/* hypertextual */
|
/* hypertextual */
|
||||||
/* listing */
|
/* listing */
|
||||||
/* forms */
|
/* forms */
|
||||||
|
label {
|
||||||
|
margin: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
/* basic table */
|
/* basic table */
|
||||||
/* image */
|
/* image */
|
||||||
/* presentation */
|
/* presentation */
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue