From 5dd1287255a53ac92477883259fe49b1b25414db Mon Sep 17 00:00:00 2001
From: saicaca <zephyird@gmail.com>
Date: Fri, 7 Jun 2024 00:16:25 +0800
Subject: [PATCH] fix: fix a style bug in the tag list (#41, #93)

---
 src/components/PostMeta.astro | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/components/PostMeta.astro b/src/components/PostMeta.astro
index cdeeec1..34ec1d0 100644
--- a/src/components/PostMeta.astro
+++ b/src/components/PostMeta.astro
@@ -32,12 +32,12 @@ const className = Astro.props.class;
         >
             <Icon name="material-symbols:menu-rounded" class="text-xl"></Icon>
         </div>
-        <div class="flex flex-row flex-nowrap">
-            <div><a href={url(`/archive/category/${category || 'uncategorized'}/`)} aria-label=`View all posts in the ${category} category`
+        <div class="flex flex-row flex-nowrap items-center">
+            <a href={url(`/archive/category/${category || 'uncategorized'}/`)} aria-label=`View all posts in the ${category} category`
                class="link-lg transition text-50 text-sm font-medium
                             hover:text-[var(--primary)] dark:hover:text-[var(--primary)] whitespace-nowrap">
                 {category || i18n(I18nKey.uncategorized)}
-            </a></div>
+            </a>
         </div>
     </div>
 
@@ -47,16 +47,15 @@ const className = Astro.props.class;
         >
             <Icon name="material-symbols:tag-rounded" class="text-xl"></Icon>
         </div>
-        <div class="flex flex-row flex-nowrap">
-            {(tags && tags.length > 0) && tags.map(tag => <div
-                    class="with-divider"
-            >
+        <div class="flex flex-row flex-nowrap items-center">
+            {(tags && tags.length > 0) && tags.map((tag, i) => (
+                <div class:list={[{"hidden": i == 0}, "mx-1.5 text-[var(--meta-divider)] text-sm"]}>/</div>
                 <a href={url(`/archive/tag/${tag}/`)} aria-label=`View all posts with the ${tag} tag`
                    class="link-lg transition text-50 text-sm font-medium
                                 hover:text-[var(--primary)] dark:hover:text-[var(--primary)] whitespace-nowrap">
                     {tag}
                 </a>
-            </div>)}
+            ))}
             {!(tags && tags.length > 0) && <div class="transition text-50 text-sm font-medium">{i18n(I18nKey.noTags)}</div>}
         </div>
     </div>