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

3 files changed, 5 insertions, 108 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;