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 @@
- <%- tagcloud({
- min_font: 1,
- max_font: 1.6,
- unit: 'rem',
- amount: 100
+ <%- list_tags({
+ show_count: true,
+ style: false,
+ separator: ''
}) %>
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;
}
}
}