From 5d950dc4ba5b5937996f16468766ae72254237b1 Mon Sep 17 00:00:00 2001
From: Graham Hall <graham@ghall.dev>
Date: Mon, 1 Dec 2025 11:46:59 -0500
Subject: [PATCH] Replace sansserif with monospace

---
 src/components/Footer.astro        |  5 ++++
 src/components/Header/Header.astro |  5 ++++
 src/components/Header/Nav.astro    |  5 ++++
 src/components/ThemeToggle.astro   |  4 +--
 src/layouts/Layout.astro           |  4 +--
 src/styles/global.scss             | 42 +++++++++++++++---------------
 src/styles/variables.scss          | 23 ++++++++++++++++
 7 files changed, 63 insertions(+), 25 deletions(-)

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index ba4c5ce..8d0da29 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -57,6 +57,11 @@ const year = new Date().getFullYear();
 				color: var(--blue);
 				transform: translateY(4px);
 			}
+
+			&:hover {
+				opacity: 0.75;
+				text-decoration: none;
+			}
 		}
 	}
 
diff --git a/src/components/Header/Header.astro b/src/components/Header/Header.astro
index 55825e0..7339298 100644
--- a/src/components/Header/Header.astro
+++ b/src/components/Header/Header.astro
@@ -49,5 +49,10 @@ import Nav from './Nav.astro';
 		font-size: 1.6rem;
 		color: var(--text);
 		font-weight: bold;
+
+		&:hover {
+			opacity: 0.75;
+			text-decoration: none;
+		}
 	}
 </style>
diff --git a/src/components/Header/Nav.astro b/src/components/Header/Nav.astro
index 11331f0..f16a639 100644
--- a/src/components/Header/Nav.astro
+++ b/src/components/Header/Nav.astro
@@ -29,6 +29,11 @@ import { navLinks } from '../../data/nav-links';
 		& a {
 			color: var(--text);
 			padding: 5px 10px;
+
+			&:hover {
+				opacity: 0.75;
+				text-decoration: none;
+			}
 		}
 	}
 
diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro
index cd1e346..5b016f6 100644
--- a/src/components/ThemeToggle.astro
+++ b/src/components/ThemeToggle.astro
@@ -4,8 +4,8 @@
 
 <div class="toggles">
 	<div>
-		<input id="sans-serif-toggle" type="checkbox" x-model="serifs" />
-		<label for="sans-serif-toggle">Serifs</label>
+		<input id="sans-serif-toggle" type="checkbox" x-model="monospaceFont" />
+		<label for="sans-serif-toggle">Monospace</label>
 	</div>
 	<div>
 		<input id="dark-mode-toggle" type="checkbox" x-model="darkMode" />
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 4d0c2b4..d096c78 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -38,9 +38,9 @@ const title = Astro.props.title || Astro.props.frontmatter?.title || 'Unknown';
 		x-data="{
       drawerOpen: false,
       darkMode: $persist(false),
-      serifs: $persist(true)
+      monospaceFont: $persist(false)
     }"
-		:class="{ 'lock-scroll': drawerOpen, 'theme-dark': darkMode, 'serif-text': serifs}"
+		:class="{ 'lock-scroll': drawerOpen, 'theme-dark': darkMode, 'monospace-text': monospaceFont}"
 	>
 		<Header />
 		<main transition:animate="initial">
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 053a6be..9844868 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -2,30 +2,30 @@
 @use 'fonts.scss';
 
 :root {
-	--blue: #1e66f5;
-	--sky: #04a5e5;
-	--red: #d20f39;
-	--orange: #fe640b;
-	--text: #40360e;
-	--highlight: #ffeebd;
-	--background: #fffdf5;
-	--border: #{$border-style} #8f7a20;
-	--font: 'Noto Sans', sans-serif;
-	--mono-font: 'Maple Mono', monospace;
+	--blue: #{$blue};
+	--sky: #{$sky};
+	--red: #{$red};
+	--orange: #{$orange};
+	--text: #{$text};
+	--highlight: #{$highlight};
+	--background: #{$background};
+	--border: #{$border};
+	--font: #{$serif-font};
+	--mono-font: #{$mono-font};
 }
 
-.theme-dark {
-	--blue: #5da7fb;
-	--sky: #00b0f5;
-	--red: #f38ba8;
-	--orange: #fab387;
-	--text: #c4caed;
-	--background: #2a2c32;
-	--border: #{$border-style} #505160;
+body.theme-dark {
+	--blue: #{$dark-blue};
+	--sky: #{$dark-sky};
+	--red: #{$dark-red};
+	--orange: #{$dark-orange};
+	--text: #{$dark-text};
+	--background: #{$dark-background};
+	--border: #{$dark-border};
 }
 
-.serif-text {
-	--font: 'Noto Serif', serif;
+body.monospace-text {
+	--font: #{$mono-font};
 }
 
 body {
@@ -49,7 +49,7 @@ a {
 	text-decoration: none;
 
 	&:hover {
-		opacity: 0.75;
+		text-decoration: underline;
 	}
 }
 
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 3a33edf..1dab60a 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -9,3 +9,26 @@ $quick-transition-duration: 0.1s;
 
 $transition: all $transition-duration ease-in-out;
 $quick-transition: all $quick-transition-duration ease-in-out;
+
+/* colors */
+
+$blue: #1e66f5;
+$sky: #04a5e5;
+$red: #d20f39;
+$orange: #fe640b;
+$text: #40360e;
+$highlight: #ffeebd;
+$background: #fffdf5;
+$border: $border-style #8f7a20;
+
+$dark-blue: #5da7fb;
+$dark-sky: #00b0f5;
+$dark-red: #f38ba8;
+$dark-orange: #fab387;
+$dark-text: #c4caed;
+$dark-background: #2a2c32;
+$dark-border: #{$border-style} #505160;
+
+/* fonts */
+$serif-font: 'Noto Serif', serif;
+$mono-font: 'Maple Mono', monospace;