Fix some font scaling

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>

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 {

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="" />}
@@ -33,5 +35,6 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
 					<slot />
 				</div>
       </article>
+    </NotchedBox>
 		</main>
 </RootLayout>

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 {