From bc79817184e53a40c35f24736160bafde79c8ad6 Mon Sep 17 00:00:00 2001
From: Nathan McCarty <thatonelutenist@stranger.systems>
Date: Tue, 4 Feb 2025 21:39:47 -0500
Subject: [PATCH] checkpoint

---
 lib/Config.rakumod | 17 ++++++++++++++++-
 resources/main.css | 23 ++++++++++++++++++++++-
 2 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/lib/Config.rakumod b/lib/Config.rakumod
index af798d0..5503bbb 100644
--- a/lib/Config.rakumod
+++ b/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
        ]
diff --git a/resources/main.css b/resources/main.css
index f6aeecd..602362d 100644
--- a/resources/main.css
+++ b/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; */