Fix layout for multiple blog entries. Adds max width.

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;

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