refactor: replace _taxonomy.scss with UnoCSS and encapsulate tag pill

Former-commit-id: a521121da68f5b60550c43fb088c131e1a3e0f1e

7 files changed, 41 insertions, 148 deletions

diff --git a/assets/css/components/_taxonomy.scss b/assets/css/components/_taxonomy.scss
deleted file mode 100644
index 8b55d32f..00000000
--- a/assets/css/components/_taxonomy.scss
+++ /dev/null
@@ -1,107 +0,0 @@
-.taxonomy {
-    margin: 2rem auto;
-    .taxonomy-categories {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        grid-template-rows: masonry;
-        gap: 1rem;
-        .category-link:hover {
-            text-decoration: none;
-        }
-        .taxonomy-categories-item {
-            h3.category-title {
-                margin: 0.25rem 0;
-                .category-icon {
-                    display: inline-block;
-                }
-                .category-title-text {
-                    filter: url(#x);
-                }
-                &:hover span {
-                    animation: bounce 1s ease-in-out;
-                }
-               @keyframes bounce {
-                   0%, 20%, 50%, 80%, 100% {
-                       transform: translateY(0);
-                   }
-                   40% {
-                       transform: translateY(-7px)
-                        rotate(5deg)
-                        scale(1.1);
-                   }
-                   60% {
-                       transform: translateY(-5px) rotate(-3deg);
-                   }
-               }
-            }
-            .category-description {
-                margin-top: 0;
-            }
-        }
-    }
-
-    .taxonomy-tags {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 0.5rem;
-
-        .taxonomy-tags-item {
-            display: inline-flex;
-            align-items: center;
-            gap: 0.3rem;
-
-            font-size: 0.9rem;
-            padding: 0.2rem 0.6rem;
-            background-color: var(--block-background-color);
-            transition:
-                color,
-                background 0.3s;
-            border-radius: 0.3rem;
-
-            &:hover {
-                text-decoration: none;
-                background-color: var(--text-color);
-                color: var(--block-background-color);
-            }
-
-            &.dimmed {
-                background: none;
-                border: 1px dashed var(--border-color);
-                color: var(--secondary-text-color);
-                &:hover {
-                    color: inherit;
-                    border-style: solid;
-                }
-            }
-
-            .tag-icon {
-                display: inline-flex;
-                align-items: center;
-            }
-
-            .tag-count {
-                font-size: 0.8rem;
-                color: var(--secondary-text-color);
-            }
-        }
-    }
-
-    .uncategorized-link {
-        @include small-button;
-        &::after {
-            content: " →";
-            color: var(--secondary-text-color)
-        }
-    }
-}
-
-.termlist-page {
-    .term-header {
-        .term-title {
-            margin-bottom: 0;
-        }
-        .term-description {
-            margin-top: 0;
-        }
-    }
-}
diff --git a/assets/css/global.scss b/assets/css/global.scss
index a7733ab1..a7149e00 100644
--- a/assets/css/global.scss
+++ b/assets/css/global.scss
@@ -4,6 +4,5 @@
 @import "utils/utility";
 
 @import "components/markdown";
-@import "components/taxonomy";
 @import "components/postlist";
 @import "components/global-search";
diff --git a/assets/css/utils/_mixins.scss b/assets/css/utils/_mixins.scss
index 51d21f97..21cf87a3 100644
--- a/assets/css/utils/_mixins.scss
+++ b/assets/css/utils/_mixins.scss
@@ -1,3 +1,4 @@
+
 @mixin small-button {
     background-color: var(--block-background-color);
     padding: 0.2rem 0.5rem;
@@ -11,6 +12,10 @@
     }
 }
 
+.small-button {
+    @include small-button
+}
+
 @mixin card {
     border: 1px solid rgba(0, 0, 0, 0.05);
     border-radius: 5px;
diff --git a/layouts/_partials/taxonomy/all-categories.html b/layouts/_partials/taxonomy/all-categories.html
index a5ceef8e..4c0d3f1e 100644
--- a/layouts/_partials/taxonomy/all-categories.html
+++ b/layouts/_partials/taxonomy/all-categories.html
@@ -1,16 +1,16 @@
 <!-- Display Categories -->
-<section class="taxonomy-categories">
+<section class="grid grid-cols-2 grid-rows-masonry gap-4">
 {{ range sort .Site.Taxonomies.categories ".Count" "desc" }}
-    <a href="{{ .Page.RelPermalink }}" class="category-link"
+    <a href="{{ .Page.RelPermalink }}" class="hover:no-underline"
         style="view-transition-name: category-{{ .Page.Title }};">
         <div class="taxonomy-categories-item">
-            <h3 class="category-title">
+            <h3 class="category-title my-1">
                 {{ with .Page.Params.icon }}
-                <span class="category-icon">{{ . }}</span>
+                <span class="inline-block">{{ . }}</span>
                 {{ end }}
-                <span class="category-title-text">{{ .Page.LinkTitle }}</span>
+                <span class="xerox">{{ .Page.LinkTitle }}</span>
             </h3>
-            <p class="category-description">{{ .Page.Params.description | markdownify }}</p>
+            <p class="mt-0">{{ .Page.Params.description | markdownify }}</p>
         </div>
     </a>
 {{ end }}
diff --git a/layouts/_partials/taxonomy/all-tags.html b/layouts/_partials/taxonomy/all-tags.html
index fae9676f..8c5ae35f 100644
--- a/layouts/_partials/taxonomy/all-tags.html
+++ b/layouts/_partials/taxonomy/all-tags.html
@@ -1,5 +1,5 @@
 <!-- Display Tags -->
-<section class="taxonomy-tags">
+<section class="flex flex-wrap gap-2">
   {{ $categorizedTags := dict }}
   {{ $uncategorizedTags := slice }}
 
@@ -25,23 +25,9 @@
 
   <!-- Display uncategorized tags first -->
     {{ if $uncategorizedTags }}
-      <div class="taxonomy-tags">
+      <div class="flex flex-wrap gap-2">
         {{ range $uncategorizedTags }}
-        <a href="{{ .Page.RelPermalink }}"
-            class="taxonomy-tags-item{{ if lt .Count 4 }} dimmed{{ end }}">
-            {{ if .Page.Params.icon }}
-                {{ if or (hasPrefix .Page.Params.icon "http://") (hasPrefix .Page.Params.icon "https://") }}
-                    <span class="tag-icon">
-                        <img src="{{ .Page.Params.icon }}" alt="{{ .Page.LinkTitle }}"
-                            style="height:1em;width:1em">
-                    </span>
-                {{ else }}
-                    <span class="tag-icon">{{ .Page.Params.icon }}</span>
-                {{ end }}
-            {{ end }}
-            <span class="tag-name">{{ if not .Page.Params.icon }}#{{ end }}{{ .Page.LinkTitle }}</span>
-            <span class="tag-count">{{ .Count }}</span>
-        </a>
+        {{ partial "taxonomy/tag-pill" . }}
         {{ end }}
       </div>
     {{ end }}
@@ -52,21 +38,7 @@
         <h3 class="taxonomy-category-title">{{ $category }}</h3>
         <div class="taxonomy-tags">
           {{ range $categoryTags }}
-          <a href="{{ .Page.RelPermalink }}"
-              class="taxonomy-tags-item{{ if lt .Count 4 }} dimmed{{ end }}">
-              {{ if .Page.Params.icon }}
-                  {{ if or (hasPrefix .Page.Params.icon "http://") (hasPrefix .Page.Params.icon "https://") }}
-                      <span class="tag-icon">
-                          <img src="{{ .Page.Params.icon }}" alt="{{ .Page.LinkTitle }}"
-                              style="height:1em;width:1em">
-                      </span>
-                  {{ else }}
-                      <span class="tag-icon">{{ .Page.Params.icon }}</span>
-                  {{ end }}
-              {{ end }}
-              <span class="tag-name">{{ if not .Page.Params.icon }}#{{ end }}{{ .Page.LinkTitle }}</span>
-              <span class="tag-count">{{ .Count }}</span>
-          </a>
+          {{ partial "taxonomy/tag-pill" . }}
           {{ end }}
         </div>
       </div>
diff --git a/layouts/_partials/taxonomy/tag-pill.html b/layouts/_partials/taxonomy/tag-pill.html
new file mode 100644
index 00000000..3eb8d695
--- /dev/null
+++ b/layouts/_partials/taxonomy/tag-pill.html
@@ -0,0 +1,24 @@
+<a href="{{ .Page.RelPermalink }}"
+    class="inline-flex items-center gap-2 text-[0.9rem] px-2 py-1
+    transition-colors duration-300 rounded-md hover:no-underline
+
+    {{ if lt .Count 4 }}
+    bg-none border border-dashed border-[var(--border-color)] text-[var(--secondary-text-color)]
+    hover:text-inherit hover:border-solid
+    {{ else }}
+    bg-[var(--block-background-color)]
+    hover:bg-[var(--text-color)] hover:text-[var(--block-background-color)]
+    {{ end }}">
+    {{ if .Page.Params.icon }}
+        {{ if or (hasPrefix .Page.Params.icon "http://") (hasPrefix .Page.Params.icon "https://") }}
+            <span class="inline-flex items-center">
+                <img src="{{ .Page.Params.icon }}" alt="{{ .Page.LinkTitle }}"
+                    style="height:1em;width:1em">
+            </span>
+        {{ else }}
+            <span class="inline-flex items-center">{{ .Page.Params.icon }}</span>
+        {{ end }}
+    {{ end }}
+    <span>{{ if not .Page.Params.icon }}#{{ end }}{{ .Page.LinkTitle }}</span>
+    <span class="text-[0.8rem] text-[var(--secondary-text-color)]">{{ .Count }}</span>
+</a>
diff --git a/layouts/taxonomy.html b/layouts/taxonomy.html
index b2a4779f..42ebb61a 100644
--- a/layouts/taxonomy.html
+++ b/layouts/taxonomy.html
@@ -5,8 +5,8 @@
 
     <h2>文章系列</h2>
     {{ partial "taxonomy/all-categories.html" . }}
-    <p class="uncategorized-link-container">
-        <a class="uncategorized-link" href="/categories/uncategorized/">查看随笔</a>
+    <p>
+        <a class="small-button text-[var(--secondary-text-color)]" href="/categories/uncategorized/">查看随笔 →</a>
     </p>
 
     <h2>标签</h2>