From 215ce68e81d2db3950cc5c213e1faee14d6dc2e8 Mon Sep 17 00:00:00 2001
From: Ella Dunbar <git@elladunbar.com>
Date: Sat, 13 Dec 2025 00:06:48 -0600
Subject: [PATCH] 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 @@
       <label>
         Theme Picker
         <select>
-          <option value="drifting">Drifting</option>
-          <option value="ascendant">Ascendant</option>
-          <option value="aristocratic">Aristocratic</option>
+          <option value="do">DO</option>
+          <option value="fwc">FWC</option>
+          <option value="nm">NM</option>
+          <option value="vog">VoG</option>
         </select>
       </label>
       <nav>
diff --git a/full/style.css b/full/style.css
index eb40940..cc835eb 100644
--- a/full/style.css
+++ b/full/style.css
@@ -75,20 +75,20 @@ h6 {
 /* 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));
+html:has(option[value="do"]:checked) {
+  --color-background: light-dark(oklch(0.8 0 0), oklch(0.45 0 0));
+  --color-header-footer: light-dark(oklch(0.55 0 0), oklch(0.25 0 0));
+  --color-main: light-dark(oklch(0.93 0 0), oklch(0.175 0 0));
+  --color-text: light-dark(oklch(0 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%;
+  --svg-sepia: 0%;
+  --svg-saturate-2: 100%;
+  --svg-hue-rotate: 0deg;
+  --svg-brightness-2: 0%;
+  --svg-contrast: 100%;
 
   @media (prefers-color-scheme: dark) {
     --svg-brightness-1: 0%;
@@ -103,7 +103,7 @@ html:has(option[value="drifting"]:checked) {
 }
 
 /* Future War Cult */
-html:has(option[value="ascendant"]:checked) {
+html:has(option[value="fwc"]: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));
@@ -131,7 +131,7 @@ html:has(option[value="ascendant"]:checked) {
 }
 
 /* New Monarchy */
-html:has(option[value="aristocratic"]:checked) {
+html:has(option[value="nm"]: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));
@@ -158,6 +158,34 @@ html:has(option[value="aristocratic"]:checked) {
   }
 }
 
+/* Vault of Glass */
+html:has(option[value="vog"]:checked) {
+  --color-background: light-dark(oklch(0.93 0 0), oklch(0.3224 0.0392 145.18));
+  --color-header-footer: light-dark(oklch(0.8742 0.0828 224.95), oklch(0.4306 0.0922 55.84));
+  --color-main: light-dark(oklch(1 0 0), oklch(0.2091 0.0107 232.65));
+  --color-text: light-dark(oklch(0.45 0 0), oklch(0.9555 0.0219 224.95));
+
+  --svg-brightness-1: 0%;
+  --svg-saturate-1: 100%;
+  --svg-invert: 33%;
+  --svg-sepia: 6%;
+  --svg-saturate-2: 0%;
+  --svg-hue-rotate: 174deg;
+  --svg-brightness-2: 94%;
+  --svg-contrast: 88%;
+
+  @media (prefers-color-scheme: dark) {
+    --svg-brightness-1: 0%;
+    --svg-saturate-1: 100%;
+    --svg-invert: 89%;
+    --svg-sepia: 9%;
+    --svg-saturate-2: 467%;
+    --svg-hue-rotate: 175deg;
+    --svg-brightness-2: 106%;
+    --svg-contrast: 98%;
+  }
+}
+
 
 /* https://smolweb.org/subset.html */
 /* structural */
diff --git a/www/index.html b/www/index.html
index ef07245..8cc6896 100644
--- a/www/index.html
+++ b/www/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en-US><meta content="text/html; charset=utf-8" http-equiv=Content-Type><meta content="default-src 'self';" http-equiv=Content-Security-Policy><meta content="width=device-width,initial-scale=1.0" name=viewport><meta content="light dark" name=color-scheme><title>Ella Dunbar</title><link href=favicon.svg rel=icon type=image/svg+xml><link href=style.css rel=stylesheet></head><body><div class=drop-shadow><header><img alt="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" src=favicon.svg><strong>elladunbar.com</strong><label>Theme Picker <select><option value=drifting>Drifting</option><option value=ascendant>Ascendant</option><option value=aristocratic>Aristocratic</option></select></label><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><hr></header><main><article><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 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 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 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><p>At Rice, my senior capstone project was <a href="https://oedk.rice.edu/teams-details?recordId=recOoHcwRsKrtGwNm">Sea++</a> 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.</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><h3>More Serious</h3><ul><li>GitHub: <a href=https://github.com/elladunbar>elladunbar</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></ul><h3>Less Serious</h3><ul><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></ul></article></main><footer><hr><p>Ella Dunbar | Updated on 2025-12-12 | <a href=https://git.elladunbar.com/ella/elladunbar.com>Source</a> | Contact: web [at] elladunbar.com</p></footer></div></body></html>
\ No newline at end of file
+<!doctype html><html lang=en-US><meta content="text/html; charset=utf-8" http-equiv=Content-Type><meta content="default-src 'self';" http-equiv=Content-Security-Policy><meta content="width=device-width,initial-scale=1.0" name=viewport><meta content="light dark" name=color-scheme><title>Ella Dunbar</title><link href=favicon.svg rel=icon type=image/svg+xml><link href=style.css rel=stylesheet></head><body><div class=drop-shadow><header><img alt="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" src=favicon.svg><strong>elladunbar.com</strong><label>Theme Picker <select><option value=do>DO</option><option value=fwc>FWC</option><option value=nm>NM</option><option value=vog>VoG</option></select></label><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><hr></header><main><article><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 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 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 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><p>At Rice, my senior capstone project was <a href="https://oedk.rice.edu/teams-details?recordId=recOoHcwRsKrtGwNm">Sea++</a> 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.</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><h3>More Serious</h3><ul><li>GitHub: <a href=https://github.com/elladunbar>elladunbar</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></ul><h3>Less Serious</h3><ul><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></ul></article></main><footer><hr><p>Ella Dunbar | Updated on 2025-12-12 | <a href=https://git.elladunbar.com/ella/elladunbar.com>Source</a> | Contact: web [at] elladunbar.com</p></footer></div></body></html>
\ No newline at end of file
diff --git a/www/style.css b/www/style.css
index 6678d24..802287b 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); } /* 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
+/* 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="do"]:checked) { --color-background: light-dark(oklch(0.8 0 0), oklch(0.45 0 0)); --color-header-footer: light-dark(oklch(0.55 0 0), oklch(0.25 0 0)); --color-main: light-dark(oklch(0.93 0 0), oklch(0.175 0 0)); --color-text: light-dark(oklch(0 0 0), oklch(0.9 0 0)); --svg-brightness-1: 0%; --svg-saturate-1: 100%; --svg-invert: 0%; --svg-sepia: 0%; --svg-saturate-2: 100%; --svg-hue-rotate: 0deg; --svg-brightness-2: 0%; --svg-contrast: 100%; @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="fwc"]: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="nm"]: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%; } } /* Vault of Glass */ html:has(option[value="vog"]:checked) { --color-background: light-dark(oklch(0.93 0 0), oklch(0.3224 0.0392 145.18)); --color-header-footer: light-dark(oklch(0.8742 0.0828 224.95), oklch(0.4306 0.0922 55.84)); --color-main: light-dark(oklch(1 0 0), oklch(0.2091 0.0107 232.65)); --color-text: light-dark(oklch(0.45 0 0), oklch(0.9555 0.0219 224.95)); --svg-brightness-1: 0%; --svg-saturate-1: 100%; --svg-invert: 33%; --svg-sepia: 6%; --svg-saturate-2: 0%; --svg-hue-rotate: 174deg; --svg-brightness-2: 94%; --svg-contrast: 88%; @media (prefers-color-scheme: dark) { --svg-brightness-1: 0%; --svg-saturate-1: 100%; --svg-invert: 89%; --svg-sepia: 9%; --svg-saturate-2: 467%; --svg-hue-rotate: 175deg; --svg-brightness-2: 106%; --svg-contrast: 98%; } } /* 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