lianglianglee
/
hexo-theme-keep
mirror of https://github.com/liangliangle/hexo-theme-keep.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

style: tag cloud rollback the previous style

This commit is contained in:
XPoet 2021-01-28 15:14:34 +08:00
parent 8ee7891be7
commit b427909cc0
2 changed files with 11 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
layout/_partial/tagcloud.ejs
View File

@ -2,10 +2,11 @@
<div class="fade-in-down-animation"> <div class="fade-in-down-animation">
<div class="tagcloud-container"> <div class="tagcloud-container">
<div class="tagcloud-content"> <div class="tagcloud-content">
<%- list_tags({ <%- tagcloud({
show_count: true, min_font: 1,
style: false, max_font: 1.6,
separator: '' unit: 'rem',
amount: 100
}) %> }) %>
</div> </div>
</div> </div>

53
source/css/layout/_partial/tagcloud.styl
View File

@ -1,56 +1,15 @@
$tag-count-height = 36px;
$tag-count-width = 30px;
$tag-link-padding = 12px;
$tag-link-radius = 5px;
.tagcloud-container { .tagcloud-container {
keep-container(false, 0, 0, 30px, 0); keep-container(false, 0, 0, 20px, 0);
.tagcloud-content { .tagcloud-content {
position: relative;
a.tag-link { text-align: justify;
position: relative;
height: $tag-count-height; a {
padding: 0 $tag-link-padding + $tag-count-height 0 $tag-link-padding; padding: 10px 8px;
display: inline-flex; display: inline-block;
align-items: center;
justify-content: center;
box-shadow: 0 1px 3px var(--shadow-color);
border-radius: $tag-link-radius;
box-sizing: border-box; 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);
}
}
} }
} }
} }