Font selector and other little things

Added a font selector
CSS is now inlined server-side because it makes Lighthouse happy
A few other little accessibility and general housekeeping adjustments

2 files changed, 54 insertions, 0 deletions

diff --git a/themes/dracula.css b/themes/dracula.css
new file mode 100644
index 0000000..955162d
--- /dev/null
+++ b/themes/dracula.css
@@ -0,0 +1,27 @@
+:root {
+  --background: #282A36;
+  --foreground: #F8F8F2;
+  --accent1: #BD93F9;
+  --accent2: #FFB86C;
+  --shadow: #1d2021aa;
+  --message-red: #FF5555;
+  --message-green: #50FA7B;
+  --message-yellow: #F1FA8C;
+  --message-blue: #8BE9FD;
+
+  --fg0: var(--foreground);
+  --fg1: color-mix(in srgb, var(--foreground) 85%, var(--background) 15%);
+  --fg2: color-mix(in srgb, var(--foreground) 75%, var(--background) 25%);
+  --fg3: color-mix(in srgb, var(--foreground) 65%, var(--background) 35%);
+  --fg00: #fffff7;
+
+  --bg0: var(--background);
+  --bg1: color-mix(in srgb, var(--background) 93%, var(--foreground) 7%);
+  --bg2: color-mix(in srgb, var(--background) 87%, var(--foreground) 13%);
+  --bg3: color-mix(in srgb, var(--background) 80%, var(--foreground) 20%);
+  --bg00: #101115;
+}
+
+body {
+  background: var(--bg00);
+}
\ No newline at end of file
diff --git a/themes/gruvbox.css b/themes/gruvbox.css
new file mode 100644
index 0000000..f9d2e37
--- /dev/null
+++ b/themes/gruvbox.css
@@ -0,0 +1,27 @@
+:root {
+  --background: light-dark(#fbf1c7, #282828);
+  --foreground: light-dark(#282828, #fbf1c7);
+  --accent1: light-dark(#427b58, #8ec07c);
+  --accent2: light-dark(#8f3f71, #d3869b);
+  --shadow: #1d2021aa;
+  --message-red: light-dark(#cc241d, #cc241d);
+  --message-green: light-dark(#98971a, #98971a);
+  --message-yellow: light-dark(#d79921, #d79921);
+  --message-blue: light-dark(#458588, #458588);
+
+  --fg0: var(--foreground);
+  --fg1: light-dark(#3c3836,#ebdbb2);
+  --fg2: light-dark(#504945,#d5c4a1);
+  --fg3: light-dark(#665c54,#bdae93);
+  --fg00: light-dark(#1d2021, #f9f5d7);
+
+  --bg0: var(--background);
+  --bg1: light-dark(#ebdbb2,#3c3836);
+  --bg2: light-dark(#d5c4a1,#504945);
+  --bg3: light-dark(#bdae93,#665c54);
+  --bg00: light-dark(#f9f5d7, #1d2021);
+}
+
+body {
+  background: var(--bg00);
+}
\ No newline at end of file