From bd2a14f400a2ebbb0de0bb1e152f8c3ff9ff20ed Mon Sep 17 00:00:00 2001
From: Eltrac <hi@guhub.cn>
Date: Wed, 16 Apr 2025 23:24:53 +0800
Subject: feat: better category page

---
 assets/css/components/_card.scss     | 11 +-----
 assets/css/components/_pages.scss    | 40 -------------------
 assets/css/components/_taxonomy.scss | 77 ++++++++++++++++++++++++++++++++++++
 assets/css/index.scss                |  1 +
 assets/css/utils/_mixins.scss        | 14 +++++++
 5 files changed, 93 insertions(+), 50 deletions(-)
 create mode 100644 assets/css/components/_taxonomy.scss

(limited to 'assets')

diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 43a25ca4..787c4e2d 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -1,11 +1,6 @@
 /* 亮色模式（默认） */
 .card {
-    border: 1px solid rgba(0, 0, 0, 0.05);
-    border-radius: 2px;
-    padding: 1rem 1.35rem;
-    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
-    background-color: #fff;
-    color: #333;
+    @include card;
     margin: 1rem 0;
     position: relative;
 
@@ -38,10 +33,6 @@
 
     /* 暗色模式 */
     @media (prefers-color-scheme: dark) {
-        border: 1px solid rgba(255, 255, 255, 0.1);
-        background-color: #222;
-        color: #ddd;
-
         .card-corner {
             background: linear-gradient(-45deg, #444 50%, #666 50%);
         }
diff --git a/assets/css/components/_pages.scss b/assets/css/components/_pages.scss
index 9b5e10cd..7dc411e9 100644
--- a/assets/css/components/_pages.scss
+++ b/assets/css/components/_pages.scss
@@ -85,46 +85,6 @@
     }
 }
 
-/* category page */
-
-section.taxonomy {
-    margin: 2rem 0;
-}
-
-.taxonomy-tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-
-    .taxonomy-tags-item {
-        display: inline-flex;
-        align-items: center;
-        gap: 0.3rem;
-
-        padding: 0.25rem 0.75rem;
-        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);
-        }
-
-        .tag-count {
-            font-size: 0.8rem;
-            color: var(--secondary-text-color);
-        }
-    }
-}
-
-.taxonomy-description hr {
-    margin: 0.5rem 0;
-}
-
 @media screen and (max-width: 600px) {
     .posts-line {
         font-size: 16px;
diff --git a/assets/css/components/_taxonomy.scss b/assets/css/components/_taxonomy.scss
new file mode 100644
index 00000000..b13f3ac5
--- /dev/null
+++ b/assets/css/components/_taxonomy.scss
@@ -0,0 +1,77 @@
+.taxonomy {
+    margin: 2rem auto;
+    .taxonomy-categories {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        grid-template-rows: masonry;
+        gap: 1rem;
+        .taxonomy-categories-item {
+            ul.category-articles {
+                padding-inline-start: 1.5rem;
+                list-style-type: square;
+            }
+            a.category-link {
+                @include small-button;
+                font-size: 0.9rem
+            }
+            h3.category-title {
+               a:hover {
+                   text-decoration: none;
+               }
+               span {
+                   display: inline-block;
+               }
+               &:hover span {
+                   animation: bounce 0.5s 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);
+                   }
+               }
+            }
+        }
+    }
+
+    .taxonomy-tags {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+
+        .taxonomy-tags-item {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.3rem;
+
+            padding: 0.25rem 0.75rem;
+            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);
+            }
+
+            .tag-count {
+                font-size: 0.8rem;
+                color: var(--secondary-text-color);
+            }
+        }
+    }
+
+    .taxonomy-description hr {
+        margin: 0.5rem 0;
+    }
+}
diff --git a/assets/css/index.scss b/assets/css/index.scss
index 081b6c3a..fa643102 100644
--- a/assets/css/index.scss
+++ b/assets/css/index.scss
@@ -6,6 +6,7 @@
 @import "components/markdown";
 @import "components/header";
 @import "components/pages";
+@import "components/taxonomy";
 @import "components/postlist";
 @import "components/post";
 @import "components/content";
diff --git a/assets/css/utils/_mixins.scss b/assets/css/utils/_mixins.scss
index 77b962c1..de007d7a 100644
--- a/assets/css/utils/_mixins.scss
+++ b/assets/css/utils/_mixins.scss
@@ -10,3 +10,17 @@
         text-decoration: none;
     }
 }
+
+@mixin card {
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    border-radius: 2px;
+    padding: 1rem 1.35rem;
+    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
+    background-color: #fff;
+    color: #333;
+    @media (prefers-color-scheme: dark) {
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        background-color: #222;
+        color: #ddd;
+    }
+}
-- 
cgit v1.2.3