From 20e6abaa0ea866bff2b261019c9fc1f48df5e5e3 Mon Sep 17 00:00:00 2001
From: tri <tri@thac.loan>
Date: Sun, 12 Oct 2025 23:28:41 +0700
Subject: [PATCH] small style tweaks

---
 sample/_loa/style.css    | 13 ++++++++++++-
 sample/first/index.html  |  7 +++++--
 sample/second/index.html |  7 +++++--
 src/main.zig             | 13 ++++++++-----
 src/static/style.css     | 13 ++++++++++++-
 5 files changed, 42 insertions(+), 11 deletions(-)

diff --git a/sample/_loa/style.css b/sample/_loa/style.css
index 9c0e4aa..acd8f8b 100644
--- a/sample/_loa/style.css
+++ b/sample/_loa/style.css
@@ -80,8 +80,19 @@ p + ul {
   }
 }
 
+time.relative {
+  white-space: nowrap;
+}
+
 .home--post-published-at {
   opacity: 0.5;
-  margin-left: 0.5rem;
   font-variant-caps: small-caps;
 }
+
+.post--published-at {
+  float: right;
+}
+
+.post--title {
+  line-height: 1.2;
+}
diff --git a/sample/first/index.html b/sample/first/index.html
index e423999..ed6d697 100644
--- a/sample/first/index.html
+++ b/sample/first/index.html
@@ -19,8 +19,11 @@ It&#39;s a static site generator for your git repos - think [stagit][1], but `gi
   <body>
     <main>
 <a href="/">« back to home</a>
-<h1 style="margin-bottom:0">First</h1><time class="post--published-at relative" datetime="2025-10-09T21:13:03+07:00" title="2025-10-09T21:13:03+07:00">2025-10-09T21:13:03+07:00</time>
-<p>khoe (Vietnamese, verb): to show something off</p>
+<span class="post--published-at">
+  published
+  <time class="relative" datetime="2025-10-09T21:13:03+07:00" title="2025-10-09T21:13:03+07:00">2025-10-09T21:13:03+07:00</time>
+</span>
+<h1 class="post--title">First</h1><p>khoe (Vietnamese, verb): to show something off</p>
 <section id="What">
 <h2>What</h2>
 <p>It&rsquo;s a static site generator for your git repos - think <a href="https://codemadness.org/stagit.html">stagit</a>, but <code>git clone</code>-able. If you ever wanted to share your plain git repos without the security headaches of hosting a dynamic web service, you may like khoe.</p>
diff --git a/sample/second/index.html b/sample/second/index.html
index ead3b4f..c23de93 100644
--- a/sample/second/index.html
+++ b/sample/second/index.html
@@ -16,8 +16,11 @@
   <body>
     <main>
 <a href="/">« back to home</a>
-<h1 style="margin-bottom:0">Second post</h1><time class="post--published-at relative" datetime="2025-10-11T09:04:40+07:00" title="2025-10-11T09:04:40+07:00">2025-10-11T09:04:40+07:00</time>
-<p>Look ma, second post!</p>
+<span class="post--published-at">
+  published
+  <time class="relative" datetime="2025-10-11T09:04:40+07:00" title="2025-10-11T09:04:40+07:00">2025-10-11T09:04:40+07:00</time>
+</span>
+<h1 class="post--title">Second post</h1><p>Look ma, second post!</p>
     </main>
   </body>
 </html>
diff --git a/src/main.zig b/src/main.zig
index 592c509..6ae8ae2 100644
--- a/src/main.zig
+++ b/src/main.zig
@@ -115,17 +115,20 @@ pub fn entrypoint(target_dir: [*:0]const u8) !u8 {
                 \\<a href="/">« back to home</a>
                 \\
             );
-
-            try writer.writeAll("<h1 style=\"margin-bottom:0\">");
-            try html.escape(writer, p.title);
-            try writer.writeAll("</h1>");
             try writer.print(
-                \\<time class="post--published-at relative" datetime="{0s}" title="{0s}">{0s}</time>
+                \\<span class="post--published-at">
+                \\  published
+                \\  <time class="relative" datetime="{0s}" title="{0s}">{0s}</time>
+                \\</span>
                 \\
             , .{
                 try html.escapeAlloc(post_arena, p.published_at),
             });
 
+            try writer.writeAll("<h1 class=\"post--title\">");
+            try html.escape(writer, p.title);
+            try writer.writeAll("</h1>");
+
             try djot.writeHtml(&html_writer.interface, p.djot_text);
 
             try templates.base_end(writer);
diff --git a/src/static/style.css b/src/static/style.css
index 9c0e4aa..acd8f8b 100644
--- a/src/static/style.css
+++ b/src/static/style.css
@@ -80,8 +80,19 @@ p + ul {
   }
 }
 
+time.relative {
+  white-space: nowrap;
+}
+
 .home--post-published-at {
   opacity: 0.5;
-  margin-left: 0.5rem;
   font-variant-caps: small-caps;
 }
+
+.post--published-at {
+  float: right;
+}
+
+.post--title {
+  line-height: 1.2;
+}
-- 
2.47.3

