style: optimize keep-container in stylus

This commit is contained in:
XPoet 2020-11-27 11:19:34 +08:00
parent 81a3cbea2a
commit 79b38c7ef1
11 changed files with 17 additions and 17 deletions

View File

@ -17,7 +17,7 @@
<% if (post.excerpt) { %> <% if (post.excerpt) { %>
<%- post.excerpt %> <%- post.excerpt %>
<% } else { %> <% } else { %>
<%- truncate(strip_html(post.content), {length: 168}) %> <%- truncate(strip_html(post.content), {length: 128}) %>
<% } %> <% } %>
</div> </div>

View File

@ -4,7 +4,7 @@ $friend-link-item-border-radius = 6px;
.empty-page-container { .empty-page-container {
keep-container(1.005, 1.01, 30px, true); keep-container(1.005, 1.01, 30px, 30px);
.empty-page-content { .empty-page-content {

View File

@ -1,6 +1,6 @@
.tagcloud-container { .tagcloud-container {
keep-container(1.005, 1.01, 30px, true); keep-container(1.005, 1.01, 30px, 30px);
.tagcloud-content { .tagcloud-content {

View File

@ -1,5 +1,5 @@
.archive-container { .archive-container {
keep-container(1.005, 1.01, 30px, true); keep-container(1.005, 1.01, 30px, 30px);
} }

View File

@ -4,7 +4,7 @@ $post-nav-max-width = 220px;
.article-content-container { .article-content-container {
keep-container(1.008, 1.002, 30px, true); keep-container(1.008, 1.002, 30px, 30px);
.article-title { .article-title {
color: var(--second-text-color); color: var(--second-text-color);
@ -109,7 +109,7 @@ $post-nav-max-width = 220px;
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
keep-container(1.08, 1.08, 10px, false); keep-container(1.08, 1.08, 10px, 0);
a { a {
position: relative; position: relative;

View File

@ -1,6 +1,6 @@
.category-container { .category-container {
keep-container(1.02, 1.02, 30px, true); keep-container(1.02, 1.02, 30px, 30px);
.category-name { .category-name {
color: var(--second-text-color); color: var(--second-text-color);

View File

@ -1,6 +1,6 @@
.category-list-container { .category-list-container {
keep-container(1.005, 1.01, 30px, true); keep-container(1.005, 1.01, 30px, 30px);
.category-list-content { .category-list-content {

View File

@ -1,4 +1,3 @@
$keep-container-margin-bottom = 30px;
$keep-container-border-radius = 5px; $keep-container-border-radius = 5px;
hover-style(scaleX, scaleY) { hover-style(scaleX, scaleY) {
@ -20,24 +19,25 @@ hover-style(scaleX, scaleY) {
} }
keep-container(scaleX, scaleY, padding, isMarginBottom) { keep-container(scaleX, scaleY, padding, marginBottomValue) {
background: var(--background-color); background: var(--background-color);
padding: padding; padding: padding;
border-radius: $keep-container-border-radius; border-radius: $keep-container-border-radius;
box-sizing: border-box; box-sizing: border-box;
if (isMarginBottom) { if (marginBottomValue != 0) {
margin-bottom: $keep-container-margin-bottom; margin-bottom: marginBottomValue;
+keep-tablet() { +keep-tablet() {
margin-bottom: $keep-container-margin-bottom * 0.8; margin-bottom: marginBottomValue * 0.8;
} }
+keep-mobile() { +keep-mobile() {
margin-bottom: $keep-container-margin-bottom * 0.6; margin-bottom: marginBottomValue * 0.6;
} }
} }
hover-style(scaleX, scaleY); hover-style(scaleX, scaleY);
+keep-tablet() { +keep-tablet() {

View File

@ -5,7 +5,7 @@
.home-article-item { .home-article-item {
position: relative; position: relative;
keep-container(1.02, 1.02, 28px, true); keep-container(1.02, 1.02, 28px, 38px);
.top-icon { .top-icon {
position: absolute; position: absolute;

View File

@ -128,7 +128,7 @@ $page-aside-width = $temp-width ? convert($temp-width) : 260px;
overflow-y: auto; overflow-y: auto;
border-radius: 0 !important; border-radius: 0 !important;
keep-container(1.02, 1.02, 18px, false); keep-container(1.02, 1.02, 18px, 0);
+keep-tablet() { +keep-tablet() {
left: 0 !important; left: 0 !important;

View File

@ -1,6 +1,6 @@
.tag-container { .tag-container {
keep-container(1.02, 1.02, 30px, true); keep-container(1.02, 1.02, 30px, 30px);
.tag-name { .tag-name {
color: var(--second-text-color); color: var(--second-text-color);