Replace sansserif with monospace

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;
+			}
 		}
 	}
 

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>

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;
+			}
 		}
 	}
 

src/components/ThemeToggle.astro

@@ -4,8 +4,8 @@
 
 <div class="toggles">
 	<div>
-		<input id="sans-serif-toggle" type="checkbox" x-model="serifs" />
+		<input id="sans-serif-toggle" type="checkbox" x-model="monospaceFont" />
-		<label for="sans-serif-toggle">Serifs</label>
+		<label for="sans-serif-toggle">Monospace</label>
 	</div>
 	<div>
 		<input id="dark-mode-toggle" type="checkbox" x-model="darkMode" />

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">

src/styles/global.scss

@@ -2,30 +2,30 @@
 @use 'fonts.scss';
 
 :root {
-	--blue: #1e66f5;
+	--blue: #{$blue};
-	--sky: #04a5e5;
+	--sky: #{$sky};
-	--red: #d20f39;
+	--red: #{$red};
-	--orange: #fe640b;
+	--orange: #{$orange};
-	--text: #40360e;
+	--text: #{$text};
-	--highlight: #ffeebd;
+	--highlight: #{$highlight};
-	--background: #fffdf5;
+	--background: #{$background};
-	--border: #{$border-style} #8f7a20;
+	--border: #{$border};
-	--font: 'Noto Sans', sans-serif;
+	--font: #{$serif-font};
-	--mono-font: 'Maple Mono', monospace;
+	--mono-font: #{$mono-font};
 }
 
-.theme-dark {
+body.theme-dark {
-	--blue: #5da7fb;
+	--blue: #{$dark-blue};
-	--sky: #00b0f5;
+	--sky: #{$dark-sky};
-	--red: #f38ba8;
+	--red: #{$dark-red};
-	--orange: #fab387;
+	--orange: #{$dark-orange};
-	--text: #c4caed;
+	--text: #{$dark-text};
-	--background: #2a2c32;
+	--background: #{$dark-background};
-	--border: #{$border-style} #505160;
+	--border: #{$dark-border};
 }
 
-.serif-text {
+body.monospace-text {
-	--font: 'Noto Serif', serif;
+	--font: #{$mono-font};
 }
 
 body {
@@ -49,7 +49,7 @@ a {
 	text-decoration: none;
 
 	&:hover {
-		opacity: 0.75;
+		text-decoration: underline;
 	}
 }
 

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;