update post info to use border separators

web/src/components/post/postInfo.astro

@@ -3,9 +3,16 @@ 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> |
-{
+<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}/`}>
@@ -14,4 +21,5 @@ const { publishDate, wordCount, readTime, tags } = Astro.props
         {i < tags.length - 1 && ", "}
         </>
         ))
-}
+    }
+</div>

web/src/components/postList/postCard.astro

@@ -22,7 +22,7 @@ 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},
@@ -30,7 +30,6 @@ const readTime = calcReadTime(wordCount);
             tags={p.tags}
         />
     </div>
-    </div>
 
     
     

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;
 }