From 501dc6ed51f099b90654852c79bf494405a1bc24 Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Fri, 25 Mar 2022 23:24:29 -0700
Subject: [PATCH] Rearrange the post header

Dates will flow below the header if the header is too long.

Move the draft up to the top, above the header.
---
 layouts/_default/single.html  |  9 ++++++---
 static/styles/development.css |  2 +-
 static/styles/main.css        | 17 +++++++++++++++--
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index ca8f1ba..63e4223 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,8 +1,11 @@
 {{ define "main" }}
 <article class="post-single">
-  <header class="post-title">
-    <h1>{{ .Title }}{{ partial "development/draft_tag.html" . }}</h1>
-    <span class="post-date"><time>{{ .Date | time.Format "Jan 2, 2006" }}</time></p>
+  <header>
+    {{ partial "development/draft_tag.html" . }}
+    <div class="post-title">
+      <h1>{{ .Title }}</h1>
+      <div class="post-date"><time>{{ .Date | time.Format "Jan 2, 2006" }}</time></div>
+    </div>
   </header>
   <section class="post-content">
     {{ .Content }}
diff --git a/static/styles/development.css b/static/styles/development.css
index 678bfc8..bccb4e7 100644
--- a/static/styles/development.css
+++ b/static/styles/development.css
@@ -8,8 +8,8 @@
     display: inline-block;
     font-family: 'SF Pro', sans-serif;
     font-size: 1.5rem;
+    font-weight: bold;
     letter-spacing: 3px;
-    margin-inline-start: 1rem;
     text-transform: uppercase;
 }
 
diff --git a/static/styles/main.css b/static/styles/main.css
index 03bc2dc..d138161 100644
--- a/static/styles/main.css
+++ b/static/styles/main.css
@@ -417,11 +417,24 @@ ul.post-tags li + li {
 .post-title {
     align-items: baseline;
     display: flex;
+    flex-wrap: wrap;
+    margin-bottom: 2rem;
 }
 
-.post-title .post-date {
+.post-title > h1 {
+    flex-grow: 1;
+    margin-block-end: 0;
+    padding-bottom: 0;
+}
+
+.post-title > .post-date {
+    color: rgb(73, 73, 73);
     display: inline-block;
-    margin-left: auto;
+    font-size: 1.75rem;
+    inline-size: min-content;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    white-space: nowrap;
 }
 
 @media (max-width: 620px) {