From 31cd1bd61bd9697bdc31e72e90c268d174ace630 Mon Sep 17 00:00:00 2001
From: Akemi Izuko <akemi@noway.moe>
Date: Fri, 29 Dec 2023 15:37:47 -0700
Subject: [PATCH] Markdown: improve heading styles

---
 src/layouts/BlogPost.astro | 19 +++++++++++++++++--
 src/pages/blog/index.astro |  5 +++--
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
index a4bb8cc..a56be37 100644
--- a/src/layouts/BlogPost.astro
+++ b/src/layouts/BlogPost.astro
@@ -83,19 +83,34 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
             }
             .prose h1 {
                 font-size: 40px;
-                border-bottom: 2px solid #000;
                 margin-bottom: calc(var(--font-size) / 3);
             }
+            .prose h1:after { /* Psuedo-element prevents extending to padding */
+                content: "";
+                display: block;
+                border-bottom: 2px solid #000;
+            }
             .prose h2 {
                 font-size: 30px;
+            }
+            .prose h2:after { /* Psuedo-element prevents extending to padding */
+                content: "";
+                display: block;
                 border-bottom: 1px solid #aaa;
             }
             .prose h3 {
                 font-size: 26px;
             }
-            .prose h4, .prose h5, .prose h6 {
+            .prose h4 {
                 font-size: 22px;
             }
+            .prose h5 {
+                font-size: 20px;
+            }
+            .prose h6 {
+                color: #888;
+                font-size: 18px;
+            }
 
             /**** Paragraphs ****/
             .prose p {
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index ae5851b..cff601b 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -59,15 +59,16 @@ const posts = (await getCollection('blog')).sort(
         <main>
             <section>
                 <h1
-                    class="text-center text-4xl"
+                    class="text-center mt-8 mb-4 text-6xl"
                     style="font-family: var(--font-title);">
                     Blogs!
                 </h1>
                 <p
-                    class="text-center m-6">
+                    class="text-center mb-4 text-xl">
                     A collection of tutorials and opinionated pieces. Have a
                     read!
                 </p>
+                <hr class="m-4" style="border: 1px solid black;" />
                 <ul>
                     {
                         posts.map((post) => (