From 44a2d6b723272d62e15c23f4a2f4da880ace5c7e Mon Sep 17 00:00:00 2001
From: XPoet <i@xpoet.cn>
Date: Wed, 27 Jan 2021 16:39:22 +0800
Subject: [PATCH] style: modified tagcloud style

---
 layout/_partial/tagcloud.ejs             |  9 ++--
 source/css/layout/_partial/tagcloud.styl | 53 +++++++++++++++++++++---
 2 files changed, 51 insertions(+), 11 deletions(-)

diff --git a/layout/_partial/tagcloud.ejs b/layout/_partial/tagcloud.ejs
index b4683d4..2a1ad6a 100644
--- a/layout/_partial/tagcloud.ejs
+++ b/layout/_partial/tagcloud.ejs
@@ -2,11 +2,10 @@
     <div class="fade-in-down-animation">
         <div class="tagcloud-container">
             <div class="tagcloud-content">
-                <%- tagcloud({
-                    min_font: 1,
-                    max_font: 1.6,
-                    unit: 'rem',
-                    amount: 100
+                <%- list_tags({
+                    show_count: true,
+                    style: false,
+                    separator: ''
                 }) %>
             </div>
         </div>
diff --git a/source/css/layout/_partial/tagcloud.styl b/source/css/layout/_partial/tagcloud.styl
index 3358153..e26ee3b 100644
--- a/source/css/layout/_partial/tagcloud.styl
+++ b/source/css/layout/_partial/tagcloud.styl
@@ -1,15 +1,56 @@
+$tag-count-height = 36px;
+$tag-count-width = 30px;
+$tag-link-padding = 12px;
+$tag-link-radius = 5px;
+
 .tagcloud-container {
 
-  keep-container(false, 0, 0, 30px, 30px);
+  keep-container(false, 0, 0, 30px, 0);
 
   .tagcloud-content {
+    position: relative;
+
+    a.tag-link {
+      position: relative;
+      height: $tag-count-height;
+      padding: 0 $tag-link-padding + $tag-count-height 0 $tag-link-padding;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0 1px 3px var(--shadow-color);
+      border-radius: $tag-link-radius;
+      box-sizing: border-box;
+      margin: 10px;
+
+
+      &:hover {
+        box-shadow: 0 2px 5px var(--shadow-hover-color);
+
+        .tag-count {
+          color: var(--default-text-color);
+        }
+      }
+
+      .tag-count {
+        position: absolute;
+        width: $tag-count-width;
+        height: 100%;
+        top: 0;
+        right: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: var(--second-background-color);
+        border-top-right-radius: $tag-link-radius;
+        border-bottom-right-radius: $tag-link-radius;
+
+        &:hover {
+          color: var(--default-text-color);
+        }
+
+      }
 
-    text-align: justify;
-    font-size: 1.2rem;
 
-    a {
-      padding: 8px 6px;
-      display: inline-block;
     }
   }
 }