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: modified tagcloud style

This commit is contained in:
XPoet 2021-01-27 16:39:22 +08:00
parent 06d8444c54
commit 44a2d6b723
2 changed files with 51 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
layout/_partial/tagcloud.ejs
View File

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

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

@ -1,15 +1,56 @@
$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, 30px); keep-container(false, 0, 0, 30px, 0);
.tagcloud-content { .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;
} }
} }
} }