use flexbox on header

2 files changed, 7 insertions, 6 deletions

diff --git a/style.css b/style.css
index d9fe494..f539e65 100644
--- a/style.css
+++ b/style.css
@@ -14,17 +14,18 @@ body {
 main {
     margin: 0 1rem;
 }
-header {
+body > header {
+    display: flex;
+    justify-content: space-between;
     padding: 0.5rem 1rem;
     color: ButtonText;
     background-color: ButtonFace;
+    gap: 0.5rem 1rem;
+    flex-wrap: wrap;
 }
 header nav {
     display: inline-block;
 }
-header span {
-    margin-right: 10px;
-}
 section header {
     font-style: italic;
 }
@@ -37,7 +38,7 @@ nav ul {
 nav ul li {
     display: inline-block;
     border-right: 1px solid ButtonText;
-    padding: 2px 10px;
+    padding: 0 10px;
     margin: 0;
 }
 nav ul li a,
diff --git a/theme.scm b/theme.scm
index 62d703c..a601e0e 100644
--- a/theme.scm
+++ b/theme.scm
@@ -33,7 +33,7 @@
                  (href "data:,")))
         (title ,(string-append title " — " (site-title site))))
        (body
-        (header (span ,(assq-ref (site-default-metadata site) 'author))
+        (header (div ,(assq-ref (site-default-metadata site) 'author))
                 (nav (ul (li (a (@ (href "/")) "Home"))
                          (li (a (@ (href "/now")) "Now"))
                          (li (a (@ (href "/blog")) "Blog")))))