style: optimize keep-container in stylus
This commit is contained in:
parent
81a3cbea2a
commit
79b38c7ef1
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
.archive-container {
|
.archive-container {
|
||||||
keep-container(1.005, 1.01, 30px, true);
|
keep-container(1.005, 1.01, 30px, 30px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
||||||
|
|
|
@ -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() {
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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);
|
||||||
|
|
Loading…
Reference in New Issue