From 9e0afdad03da93b9c9faa8e3abfb56c3d716216b Mon Sep 17 00:00:00 2001
From: grassblock <i@gb0.dev>
Date: Mon, 18 Aug 2025 18:29:37 +0800
Subject: [PATCH] feat: make tags & categories list flex

---
 src/pages/categories.astro | 15 +++++++++++----
 src/pages/tags.astro       | 11 +++++++++--
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/pages/categories.astro b/src/pages/categories.astro
index dbe2bd4..e9afd8d 100644
--- a/src/pages/categories.astro
+++ b/src/pages/categories.astro
@@ -9,11 +9,18 @@ const uniqueCategories = [...new Set(allPosts.map((post: any) => post.data.categ
 <Layout title="Categoies" description="List all categories used in the blog posts.">
     <h1 class="title">~/blog/categories</h1>
     <div style="margin-top: 2rem;">
-        <span class="command">ls -l categories/</span>
-        <div style="margin-top: 1rem; margin-left: 1rem;">
-            {uniqueCategories.map((tag) => (
-                    <p><a href={`/categories/${tag}`}>{tag}</a></p>
+        <span class="command">ls categories/</span>
+        <div style="margin-top: 1rem; margin-left: 1rem;" class="category-list">
+            {uniqueCategories.map((category) => (
+                    <p><a href={`/categories/${category}`}>{category}</a></p>
             ))}
         </div>
     </div>
 </Layout>
+<style>
+    div.category-list {
+        display: flex;
+        gap: 1rem;
+        flex-wrap: wrap;
+    }
+</style>
\ No newline at end of file
diff --git a/src/pages/tags.astro b/src/pages/tags.astro
index 3467401..468f271 100644
--- a/src/pages/tags.astro
+++ b/src/pages/tags.astro
@@ -9,11 +9,18 @@ const uniqueTags = [...new Set(allPosts.map((post: any) => post.data.tags ? post
 <Layout title="Tags" description="List all tags used in the blog posts.">
     <h1 class="title">~/blog/tags</h1>
     <div style="margin-top: 2rem;">
-        <span class="command">ls -l tags/</span>
-        <div style="margin-top: 1rem; margin-left: 1rem;">
+        <span class="command">ls tags/</span>
+        <div style="margin-top: 1rem; margin-left: 1rem;" class="tags-list">
             {uniqueTags.map((tag) => (
                     <p><a href={`/tags/${tag}`}>{tag}</a></p>
             ))}
         </div>
     </div>
 </Layout>
+<style>
+    div.tags-list {
+        display: flex;
+        gap: 1rem;
+        flex-wrap: wrap;
+    }
+</style>