Markdown: improve heading styles

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 {

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) => (