From 908ab33bd292098f7c2b0c8adbd9fc57441aa1e5 Mon Sep 17 00:00:00 2001
From: rob thijssen <grenade@rob.tn>
Date: Sat, 13 Jun 2026 10:14:02 +0300
Subject: [PATCH] style(blog): smaller list headers, readable date color
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

list-view post titles were h3 at the bootstrap default, large enough
to wrap; size them to 1.4rem. dates used bootstrap's text-muted, whose
dark grey contrasts poorly on the dark background — replace with a
blog-date class matching the site's opacity-based muted-text pattern,
on the list and the detail page.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 ui/src/App.css                 | 9 +++++++++
 ui/src/pages/BlogIndexPage.tsx | 4 ++--
 ui/src/pages/BlogPostPage.tsx  | 2 +-
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/ui/src/App.css b/ui/src/App.css
index a65be2b..d9b8eb8 100644
--- a/ui/src/App.css
+++ b/ui/src/App.css
@@ -191,6 +191,15 @@ a.hot-pink {
   overflow-x: auto;
 }
 
+.blog-list-title {
+  font-size: 1.4rem;
+}
+
+.blog-date {
+  font-size: 85%;
+  opacity: 0.6;
+}
+
 .site-footer {
   margin-top: 3rem;
   padding: 1rem 0;
diff --git a/ui/src/pages/BlogIndexPage.tsx b/ui/src/pages/BlogIndexPage.tsx
index 873c9c4..142cb9a 100644
--- a/ui/src/pages/BlogIndexPage.tsx
+++ b/ui/src/pages/BlogIndexPage.tsx
@@ -23,10 +23,10 @@ export function BlogIndexPage() {
         {posts.length === 0 && <p>nothing here yet.</p>}
         {posts.map((post) => (
           <article key={post.slug} className="mb-4">
-            <h3 className="mb-1">
+            <h3 className="blog-list-title mb-1">
               <Link to={`/blog/${post.slug}`}>{post.title}</Link>
             </h3>
-            <p className="text-muted mb-1" style={{ fontSize: '85%' }}>
+            <p className="blog-date mb-1">
               {formatDate(post.published_at)}
             </p>
             {post.excerpt && <p className="mb-0">{post.excerpt}</p>}
diff --git a/ui/src/pages/BlogPostPage.tsx b/ui/src/pages/BlogPostPage.tsx
index 5db260a..8c44b9b 100644
--- a/ui/src/pages/BlogPostPage.tsx
+++ b/ui/src/pages/BlogPostPage.tsx
@@ -37,7 +37,7 @@ export function BlogPostPage() {
           <Link to="/blog">← blog</Link>
         </p>
         <h2 className="mb-1">{post.title}</h2>
-        <p className="text-muted" style={{ fontSize: '85%' }}>
+        <p className="blog-date">
           {formatDate(post.published_at)}
         </p>
         <div className="blog-post">