From facb2b0f99d63a45dfb21501f04d27a3976c2350 Mon Sep 17 00:00:00 2001
From: June <self@breadone.net>
Date: Wed, 19 Nov 2025 12:14:31 +1300
Subject: [PATCH] update post info to use border separators

---
 web/src/components/post/postInfo.astro     | 32 ++++++++++++++--------
 web/src/components/postList/postCard.astro | 15 +++++-----
 web/src/styles/global.css                  |  4 +++
 3 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/web/src/components/post/postInfo.astro b/web/src/components/post/postInfo.astro
index 3566d75..4ebbbc4 100644
--- a/web/src/components/post/postInfo.astro
+++ b/web/src/components/post/postInfo.astro
@@ -3,15 +3,23 @@ import { getFormattedDate } from '@utils/date'
 const { publishDate, wordCount, readTime, tags } = Astro.props
 ---
 
-<time datetime={publishDate}>{getFormattedDate(publishDate)}</time> |
-<span title={`${wordCount} words`}>{readTime} min. read</span> |
-{
-    tags.map((tag, i) => (
-    <>
-    <a class="b1-no-underline" href={`/posts/tag/${tag}/`}>
-        #{tag}
-    </a>
-    {i < tags.length - 1 && ", "}
-    </>
-    ))
-}
\ No newline at end of file
+<div class="flex flex-row gap-1">
+    <time datetime={publishDate}>{getFormattedDate(publishDate)}</time>
+    
+    <span class="tag-separator"/>
+    
+    <span title={`${wordCount} words`}>{readTime} min. read</span>
+
+    <span class="tag-separator"/>
+
+    {
+        tags.map((tag, i) => (
+        <>
+        <a class="b1-no-underline" href={`/posts/tag/${tag}/`}>
+            #{tag}
+        </a>
+        {i < tags.length - 1 && ", "}
+        </>
+        ))
+    }
+</div>
diff --git a/web/src/components/postList/postCard.astro b/web/src/components/postList/postCard.astro
index 20c2418..7f02979 100644
--- a/web/src/components/postList/postCard.astro
+++ b/web/src/components/postList/postCard.astro
@@ -22,14 +22,13 @@ const readTime = calcReadTime(wordCount);
             <p class="line-clamp-3 block italic text-gray-600">{p.description}</p>
         }
 
-        <div class="flex flex-row gap-1">
-            <PostInfo
-                publishDate={p.publishDate},
-                wordCount={wordCount},
-                readTime={readTime},
-                tags={p.tags}
-            />
-        </div>
+        
+        <PostInfo
+            publishDate={p.publishDate},
+            wordCount={wordCount},
+            readTime={readTime},
+            tags={p.tags}
+        />
     </div>
 
     
diff --git a/web/src/styles/global.css b/web/src/styles/global.css
index 1045905..948b42d 100644
--- a/web/src/styles/global.css
+++ b/web/src/styles/global.css
@@ -56,6 +56,10 @@
   }
 }
 
+.tag-separator {
+  @apply border-l border-gray-400;
+}
+
 .content-panel {
   @apply w-full md:w-[68%] py-8 md:py-14 px-6 md:pl-10 md:pr-0;
 }