diff --git a/src/components/ThemeSwitcher.astro b/src/components/ThemeSwitcher.astro
deleted file mode 100644
index 42bfba1..0000000
--- a/src/components/ThemeSwitcher.astro
+++ /dev/null
@@ -1,65 +0,0 @@
----
----
-
-
-
-
-
-
-
-
-
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index fe8fa04..9f010af 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -1,55 +1,71 @@
---
import '@styles/main.css';
-import ThemeSwitcher from '@components/ThemeSwitcher.astro';
+import '@fontsource-variable/baskervville';
+import '@fontsource-variable/baskervville-sc';
---
-
-
+
+
+
+
+ {/* Note: The styles are inside the document here because otherwise it breaks Astro's parsing */}
+
-
-
diff --git a/src/styles/vars.css b/src/styles/vars.css
index f8dff4b..83c178b 100644
--- a/src/styles/vars.css
+++ b/src/styles/vars.css
@@ -4,129 +4,61 @@
--content-line-height: 1.5;
--content-width: 52.5rem;
--content-padding: 0.65rem;
- --bg-color: hsl(0deg 0% 100%);
- --content-color: hsl(0deg 0% 20%);
- --content-color-faded: #555;
- --heading-color: hsl(0deg 0% 27%);
- --primary-color: hsl(202deg 72% 28%);
- --primary-color-faded: hsl(202deg 14% 36%);
- --accent-color: hsl(0deg 92% 29%);
- --accent-color-faded: hsl(0deg 25% 55%);
- --nav-hover: hsl(0deg 0% 0% / 10%);
- --nav-hover-color: white;
- --header-border-width: 0;
- --header-border-color: transparent;
+ /* squish things down a little on mobile so more text fits on the screen */
@media(max-width: 640px) {
--content-line-height: 1.25;
--content-size: 1.15rem;
--content-size-sm: 0.9rem;
}
-}
-/* v1: Cool */
-[data-theme="cool"] {
- --bg-color: hsl(210deg 12% 12%);
- --content-color: hsl(0deg 0% 82%);
- --content-color-faded: hsl(0deg 0% 60%);
- --heading-color: hsl(0deg 0% 90%);
- --primary-color: hsl(202deg 50% 50%);
- --primary-color-faded: hsl(202deg 14% 22%);
- --accent-color: hsl(0deg 72% 55%);
- --accent-color-faded: hsl(0deg 20% 60%);
- --nav-hover: hsl(0deg 0% 100% / 12%);
-}
+ /* light-mode colors */
+ --bg-color: hsl(0deg 0% 100%);
+ /* text */
+ --content-color: hsl(0deg 0% 20%);
+ --content-color-faded: #555;
+ /* links */
+ --primary-color: hsl(202deg 72% 28%);
+ --primary-color-faded: hsl(202deg 14% 36%);
+ /* indicators, hover effects, etc */
+ --accent-color: hsl(0deg 92% 29%);
+ --accent-color-faded: hsl(0deg 25% 55%);
+ /* misc */
+ --heading-color: hsl(0deg 0% 27%);
+ --nav-link-color: white;
-/* v6: Midnight Garden */
-[data-theme="midnight-garden"] {
- --bg-color: hsl(160deg 15% 9%);
- --content-color: hsl(100deg 8% 78%);
- --content-color-faded: hsl(110deg 5% 52%);
- --heading-color: hsl(45deg 20% 90%);
- --primary-color: hsl(155deg 30% 35%);
- --primary-color-faded: hsl(155deg 20% 14%);
- --accent-color: hsl(340deg 45% 65%);
- --accent-color-faded: hsl(340deg 20% 50%);
- --nav-hover: hsl(155deg 15% 100% / 10%);
-}
+ /* dark-mode colors (defined here so that we only have to update them in one place) */
+ --dark-bg-color: hsl(220deg 10% 13%);
+ --dark-content-color: hsl(30deg 10% 75%);
+ --dark-content-color-faded: hsl(25deg 6% 50%);
+ --dark-primary-color: hsl(220deg 15% 40%);
+ --dark-primary-color-faded: hsl(220deg 12% 18%);
+ --dark-accent-color: hsl(18deg 70% 55%);
+ --dark-accent-color-faded: hsl(18deg 30% 45%);
+ --dark-heading-color: hsl(35deg 25% 88%);
+ --dark-nav-link-color: var(--dark-heading-color);
-/* v7: Stormfront */
-[data-theme="stormfront"] {
- --bg-color: hsl(0deg 0% 8%);
- --content-color: hsl(0deg 0% 75%);
- --content-color-faded: hsl(0deg 0% 50%);
- --heading-color: hsl(0deg 0% 95%);
- --primary-color: hsl(270deg 60% 60%);
- --primary-color-faded: hsl(0deg 0% 8%);
- --accent-color: hsl(270deg 75% 65%);
- --accent-color-faded: hsl(270deg 25% 50%);
- --nav-hover: hsl(270deg 30% 100% / 10%);
- --nav-hover-color: var(--accent-color);
- --header-border-width: 2px;
- --header-border-color: var(--accent-color);
-}
+ &[data-theme="dark"] {
+ --bg-color: var(--dark-bg-color);
+ --content-color: var(--dark-content-color);
+ --content-color-faded: var(--dark-content-color-faded);
+ --primary-color: var(--dark-primary-color);
+ --primary-color-faded: var(--dark-primary-color-faded);
+ --accent-color: var(--dark-accent-color);
+ --accent-color-faded: var(--accent-color-faded);
+ --heading-color: var(--dark-heading-color);
+ }
-/* v8: Copper & Slate */
-[data-theme="copper-slate"] {
- --bg-color: hsl(220deg 10% 13%);
- --content-color: hsl(30deg 10% 75%);
- --content-color-faded: hsl(25deg 6% 50%);
- --heading-color: hsl(35deg 25% 88%);
- --primary-color: hsl(220deg 15% 40%);
- --primary-color-faded: hsl(220deg 12% 18%);
- --accent-color: hsl(18deg 70% 55%);
- --accent-color-faded: hsl(18deg 30% 45%);
- --nav-hover: hsl(20deg 15% 100% / 10%);
-}
-
-/* v9: Northern Lights */
-[data-theme="northern-lights"] {
- --bg-color: hsl(230deg 20% 10%);
- --content-color: hsl(200deg 12% 75%);
- --content-color-faded: hsl(200deg 8% 50%);
- --heading-color: hsl(260deg 15% 90%);
- --primary-color: hsl(230deg 25% 40%);
- --primary-color-faded: hsl(230deg 18% 15%);
- --accent-color: hsl(175deg 65% 50%);
- --accent-color-faded: hsl(175deg 25% 42%);
- --nav-hover: hsl(175deg 20% 100% / 10%);
-}
-
-/* v10: Obsidian */
-[data-theme="obsidian"] {
- --bg-color: hsl(0deg 0% 5%);
- --content-color: hsl(0deg 0% 88%);
- --content-color-faded: hsl(0deg 0% 55%);
- --heading-color: hsl(0deg 0% 98%);
- --primary-color: hsl(200deg 10% 40%);
- --primary-color-faded: hsl(200deg 10% 15%);
- --accent-color: hsl(210deg 100% 65%);
- --accent-color-faded: hsl(210deg 30% 50%);
- --nav-hover: hsl(0deg 0% 100% / 8%);
-}
-
-/* v11: Mocha */
-[data-theme="mocha"] {
- --bg-color: hsl(30deg 12% 12%);
- --content-color: hsl(35deg 15% 80%);
- --content-color-faded: hsl(35deg 10% 55%);
- --heading-color: hsl(40deg 30% 90%);
- --primary-color: hsl(25deg 20% 45%);
- --primary-color-faded: hsl(25deg 15% 20%);
- --accent-color: hsl(15deg 65% 60%);
- --accent-color-faded: hsl(15deg 30% 50%);
- --nav-hover: hsl(35deg 20% 100% / 8%);
-}
-
-/* v12: Deep Ocean */
-[data-theme="deep-ocean"] {
- --bg-color: hsl(225deg 25% 10%);
- --content-color: hsl(220deg 15% 82%);
- --content-color-faded: hsl(220deg 10% 60%);
- --heading-color: hsl(220deg 25% 95%);
- --primary-color: hsl(225deg 40% 50%);
- --primary-color-faded: hsl(225deg 30% 18%);
- --accent-color: hsl(330deg 75% 65%);
- --accent-color-faded: hsl(330deg 35% 55%);
- --nav-hover: hsl(220deg 20% 100% / 10%);
+ &:not([data-theme="light"]) {
+ @media(prefers-color-scheme: dark) {
+ --bg-color: var(--dark-bg-color);
+ --content-color: var(--dark-content-color);
+ --content-color-faded: var(--dark-content-color-faded);
+ --primary-color: var(--dark-primary-color);
+ --primary-color-faded: var(--dark-primary-color-faded);
+ --accent-color: var(--dark-accent-color);
+ --accent-color-faded: var(--accent-color-faded);
+ --heading-color: var(--dark-heading-color);
+ }
+ }
}