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

View File

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

View File

@ -1,56 +1,15 @@
$tag-count-height = 36px;
$tag-count-width = 30px;
$tag-link-padding = 12px;
$tag-link-radius = 5px;
.tagcloud-container {
keep-container(false, 0, 0, 30px, 0);
keep-container(false, 0, 0, 20px, 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;
text-align: justify;
a {
padding: 10px 8px;
display: inline-block;
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);
}
}
}
}
}