From 89533e006f5b58e3cb19692fb8a73a9382ac4777 Mon Sep 17 00:00:00 2001
From: Drew Haven <periodic@blazestar.net>
Date: Thu, 31 Jul 2025 17:05:28 -0700
Subject: [PATCH] Fix layout for multiple blog entries. Adds max width.

---
 src/layouts/RootLayout.astro |  1 +
 src/pages/blog/index.astro   | 14 +++++++++++++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/layouts/RootLayout.astro b/src/layouts/RootLayout.astro
index 4779242..a9fa42a 100644
--- a/src/layouts/RootLayout.astro
+++ b/src/layouts/RootLayout.astro
@@ -57,6 +57,7 @@ const { title = SITE_TITLE, description = SITE_DESCRIPTION } = Astro.props;
           "footer footer";
         grid-template-columns: 20rem 1fr;
         margin: 2rem 1rem;
+        max-width: 1600px;
       }
       .header {
         display: none;
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 3a9f459..86d5f8d 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -16,11 +16,22 @@ const posts = (await getCollection('blog', publishedOnly))
 ---
 
 <RootLayout>
-  <style>
+<style>
   ul {
     list-style: none;
     margin: 0;
     padding: 0;
+
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    align-items: stretch;
+
+    li {
+      /* Required since flex won't render list-elements correctly. */
+      display: block;
+    }
+
     a {
       text-decoration: none;
 
@@ -37,6 +48,7 @@ const posts = (await getCollection('blog', publishedOnly))
         margin: 0;
       }
     }
+
     a:hover .title {
       color: var(--color-accent);
     }