checkpoint

lib/Config.rakumod

@@ -30,16 +30,31 @@ method generate-head(Str:D $title, BlogMeta:D $meta, $description?) {
         # Inline our style sheets
         style %?RESOURCES<main.css>.slurp;
         style %?RESOURCES<code.css>.slurp;
-        # TODO: Add header links
     ];
 }
 
+method site-header(BlogMeta:D $meta) {
+    header :class<site-header>, [
+        div :class<site-logo>, [
+           # TODO: Use a real image here
+           $meta.title
+        ];
+        div :class<site-tagline>, [
+           $meta.tagline
+        ];
+        div :class<header-links>, [
+
+        ]
+    ]
+}
+
 # TODO: Support GFM admonitions
 method generate-post(Post:D $post, BlogMeta:D $meta) {
     my $content = $post.render-html;
     my $head = self.generate-head($post.title, $meta, $post.description);
     my $body =
     body [
+       self.site-header: $meta;
        div :class<post-body>, [
           $content
        ]

resources/main.css

@@ -9,12 +9,33 @@ body {
     display: flex;
     align-items: center;
     justify-content: center;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.site-header {
+    width: 60%;
+    display: block;
+    padding: 1rem;
+    border-radius: 1rem;
+    background-color: light-dark(#ffffff, #181818);
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
+
+.site-logo {
+    color: light-dark(#d6000c, #ed4a46);
+}
+
+.site-tagline {
 }
 
 .post-body {
     width: 66%;
     display: block;
-    padding: 3rem;
+    padding-left: 2rem;
+    padding-right: 2rem;
     border-radius: 1rem;
     background-color: light-dark(#ffffff, #181818);
     /* text-align: justify; */