From 5a17ff266db8c6f8f7691dafda66ab94e3c32087 Mon Sep 17 00:00:00 2001
From: Drew Haven <drew.haven@gmail.com>
Date: Sat, 21 Jun 2025 21:50:21 -0700
Subject: [PATCH] Fix some font scaling

---
 src/components/FormattedDate.astro |  6 ++++++
 src/components/SidebarLink.astro   |  1 +
 src/layouts/BlogPost.astro         |  5 ++++-
 src/styles/global.css              | 21 +++++++++++++++------
 4 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/components/FormattedDate.astro b/src/components/FormattedDate.astro
index 1bcce73..21fa51a 100644
--- a/src/components/FormattedDate.astro
+++ b/src/components/FormattedDate.astro
@@ -15,3 +15,9 @@ const { date } = Astro.props;
 		})
 	}
 </time>
+<style>
+  time {
+    font-family: "Fira Code", monospace;
+    font-size: var(--font-size-sm);
+  }
+</style>
diff --git a/src/components/SidebarLink.astro b/src/components/SidebarLink.astro
index 52c8c41..f9f8f32 100644
--- a/src/components/SidebarLink.astro
+++ b/src/components/SidebarLink.astro
@@ -20,6 +20,7 @@ const isActive = href === pathname || href === '/' + (subpath?.[0] || '');
 		display: inline-block;
 		text-decoration: none;
     color: var(--color-light-text);
+    font-size: var(--font-size-lg);
 	}
 
   a.hover {
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
index e035a57..2c04f0c 100644
--- a/src/layouts/BlogPost.astro
+++ b/src/layouts/BlogPost.astro
@@ -2,6 +2,7 @@
 import type { CollectionEntry } from 'astro:content';
 import RootLayout from '../layouts/RootLayout.astro';
 import FormattedDate from '../components/FormattedDate.astro';
+import NotchedBox from '../components/NotchedBox.astro';
 import { Image } from 'astro:assets';
 
 type Props = CollectionEntry<'blog'>['data'];
@@ -11,6 +12,7 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
 
 <RootLayout title={title} description={description}>
 		<main>
+      <NotchedBox fillNotches="left">
 			<article>
 				<div class="hero-image">
 					{heroImage && <Image width={1020} height={510} src={heroImage} alt="" />}
@@ -32,6 +34,7 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
 					</div>
 					<slot />
 				</div>
-			</article>
+      </article>
+    </NotchedBox>
 		</main>
 </RootLayout>
diff --git a/src/styles/global.css b/src/styles/global.css
index c063614..87f14c2 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -14,6 +14,14 @@
   --color-accent: var(--color-red);
   --background: var(--color-space-blue);
   --background-light: lighten(var(--color-space-blue));
+
+  --font-size-sm: calc(var(--font-size-md) / 1.2);
+  --font-size-md: 20px;
+  --font-size-lg: calc(var(--font-size-md) * 1.2);
+  --font-size-xl: calc(var(--font-size-lg) * 1.2);
+  --font-size-2xl: calc(var(--font-size-xl) * 1.2);
+  --font-size-3xl: calc(var(--font-size-2xl) * 1.2);
+  --font-size-4xl: calc(var(--font-size-3xl) * 1.2);
 }
 
 @font-face {
@@ -95,7 +103,7 @@ body {
   word-wrap: break-word;
   overflow-wrap: break-word;
   color: var(--color-light-text);
-  font-size: 20px;
+  font-size: var(--font-size-md);
   line-height: 1.7;
   background-color: var(--color-space-blue);
 }
@@ -112,20 +120,21 @@ h6 {
   margin: 0 0 0.5rem 0;
   line-height: 1.2;
 }
+/* Progressive 1.2x scaling from the base */
 h1 {
-  font-size: 3.052em;
+  font-size: var(--font-size-4xl);
 }
 h2 {
-  font-size: 2.441em;
+  font-size: var(--font-size-3xl);
 }
 h3 {
-  font-size: 1.953em;
+  font-size: var(--font-size-2xl);
 }
 h4 {
-  font-size: 1.563em;
+  font-size: var(--font-size-xl);
 }
 h5 {
-  font-size: 1.25em;
+  font-size: var(--font-size-lg);
 }
 strong,
 b {