From 466c198e822a2bbbba6deb2c7dbf4b689ad1ce2d Mon Sep 17 00:00:00 2001
From: Cassidy Williams <1454517+cassidoo@users.noreply.github.com>
Date: Wed, 8 Nov 2023 00:22:46 -0600
Subject: [PATCH] Update typography and spacing

---
 src/components/BaseHead.astro |  1 +
 src/layouts/BlogPost.astro    |  4 ++-
 src/style/fonts.css           | 47 +++++++++++++++++++++++++++++++++++
 src/style/global.css          | 29 +++++++++++++++------
 4 files changed, 72 insertions(+), 9 deletions(-)
 create mode 100644 src/style/fonts.css

diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
index a491959..d28e6ea 100644
--- a/src/components/BaseHead.astro
+++ b/src/components/BaseHead.astro
@@ -1,4 +1,5 @@
 ---
+import "../style/fonts.css";
 import "../style/global.css";
 
 import { SITE_TITLE } from "../config";
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
index e4ed92c..0e8711b 100644
--- a/src/layouts/BlogPost.astro
+++ b/src/layouts/BlogPost.astro
@@ -32,7 +32,9 @@ const {
 					)
 				}
 				<hr />
-				<slot />
+				<div class="blog-post">
+					<slot />
+				</div>
 			</article>
 		</main>
 		<Tags tags={tags} />
diff --git a/src/style/fonts.css b/src/style/fonts.css
new file mode 100644
index 0000000..e1a0ab0
--- /dev/null
+++ b/src/style/fonts.css
@@ -0,0 +1,47 @@
+/* ia-writer-mono-latin-400-normal */
+@font-face {
+	font-family: "iA Writer Mono";
+	font-style: normal;
+	font-display: swap;
+	font-weight: 400;
+	src: url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-400-normal.woff2)
+			format("woff2"),
+		url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-400-normal.woff)
+			format("woff");
+}
+
+/* ia-writer-mono-latin-700-normal */
+@font-face {
+	font-family: "iA Writer Mono";
+	font-style: normal;
+	font-display: swap;
+	font-weight: 700;
+	src: url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-700-normal.woff2)
+			format("woff2"),
+		url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-700-normal.woff)
+			format("woff");
+}
+
+/* ia-writer-mono-latin-400-italic */
+@font-face {
+	font-family: "iA Writer Mono";
+	font-style: italic;
+	font-display: swap;
+	font-weight: 400;
+	src: url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-400-italic.woff2)
+			format("woff2"),
+		url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-400-italic.woff)
+			format("woff");
+}
+
+/* ia-writer-mono-latin-700-italic */
+@font-face {
+	font-family: "iA Writer Mono";
+	font-style: italic;
+	font-display: swap;
+	font-weight: 700;
+	src: url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-700-italic.woff2)
+			format("woff2"),
+		url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-700-italic.woff)
+			format("woff");
+}
diff --git a/src/style/global.css b/src/style/global.css
index b38e382..df43de8 100644
--- a/src/style/global.css
+++ b/src/style/global.css
@@ -23,18 +23,17 @@ html,
 body {
 	margin: auto;
 	padding: 20px;
-	max-width: 650px;
+	max-width: 65ch;
 	background-color: #fff;
 	word-wrap: break-word;
 	overflow-wrap: break-word;
-	line-height: 1.6;
 	color: var(--black);
 }
 html,
 body,
 button,
 code {
-	font-family: "Roboto Mono", monospace;
+	font-family: "iA Writer Mono", monospace;
 }
 h1,
 strong,
@@ -48,6 +47,7 @@ h4,
 h5,
 h6 {
 	color: var(--gray);
+	line-height: 1.1;
 }
 
 body.dark-mode,
@@ -180,12 +180,10 @@ blockquote {
 
 h1 {
 	font-weight: 400;
-	margin: 0;
 }
 
 h2 {
-	font-weight: 300;
-	margin: 0 0 0.5em 0;
+	font-weight: 400;
 }
 
 h3 {
@@ -203,17 +201,32 @@ h3 {
 	max-width: 350px;
 }
 
+article :not(.article-title) {
+	line-height: 1.8;
+}
+
 .article-title {
 	font-size: 2em;
 	margin: 0.25em 0 0;
 }
 
-ul li time {
-	flex: 0 0 130px;
+.blog-post {
+	font-size: clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
+}
+
+.blog-post > * + * {
+	margin-block-start: 1em;
+}
+
+time {
 	font-style: italic;
 	color: var(--gray);
 }
 
+ul li time {
+	flex: 0 0 130px;
+}
+
 @media (max-width: 600px) {
 	nav a:not(:last-child) {
 		padding: 0;