Seperate out title into seperate visual block

lib/Config.rakumod

@@ -48,6 +48,14 @@ method site-header(BlogMeta:D $meta) {
     ]
 }
 
+method post-header(Post:D $post) {
+    header :class<post-header>, [
+        div :class<post-title>, [
+            h1 $post.title;
+        ]
+    ]
+}
+
 # TODO: Support GFM admonitions
 method generate-post(Post:D $post, BlogMeta:D $meta) {
     my $content = $post.render-html;
@@ -55,8 +63,11 @@ method generate-post(Post:D $post, BlogMeta:D $meta) {
     my $body =
     body [
        self.site-header: $meta;
-       div :class<post-body>, [
-          $content
+       article :class<post>, [
+          self.post-header: $post;
+          div :class<post-body>, [
+              $content;
+          ]
        ]
     ];
     # TODO: Setup footer

lib/Pandoc.rakumod

@@ -92,5 +92,8 @@ sub markdown-first-paragraph(IO::Path:D $file --> Str:D) is export {
 
 #| Use pandoc to render a markdown document to html
 sub markdown-to-html(IO::Path:D $file --> Str:D) is export {
-    pandoc <-f gfm>, $file
+    # Remove the header, we'll regenerate it later
+    my $output = pandoc <-f gfm>, $file;
+    $output ~~ s:g/'<h1' .* '</h1>'//;
+    $output
 }

resources/main.css

@@ -5,7 +5,7 @@
     font-family: "Open Sans", sans-serif, serif;
 }
 
-body {
+body, .post {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -26,7 +26,7 @@ body {
 
 .site-logo {
     color: light-dark(#d6000c, #ed4a46);
-    font-size: 2rem;
+    font-size: 2.5rem;
     font-weight: bold;
 }
 
@@ -36,21 +36,35 @@ body {
     font-style: italic;
 }
 
-.post-body {
+.post-body, .post-header {
     width: 66%;
     display: block;
-    padding-left: 2rem;
-    padding-right: 2rem;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
     border-radius: 1rem;
     background-color: light-dark(#ffffff, #181818);
     /* text-align: justify; */
 }
 
-.post-body > h1 {
+.post-header {
+    padding: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.post-title {
     text-align: center;
     color: light-dark(#dd0f9d, #eb6eb7);
 }
 
+.post-title > h1 {
+    margin-top: 0px;
+    margin-bottom: 0px;
+}
+
 .post-body > h2 {
     text-align: center;
     color: light-dark(#282828, #dedede);