refactor: reduce duplicate scss

This commit is contained in:
Cotes Chung 2024-10-20 13:47:54 +08:00
parent 6f461132c0
commit c1bd9eb9ee
No known key found for this signature in database
GPG key ID: 0D9E54843167A808
6 changed files with 45 additions and 38 deletions

View file

@ -251,8 +251,8 @@ i {
> p { > p {
margin-left: 0.25em; margin-left: 0.25em;
margin-top: 0;
margin-bottom: 0; @include mt-mb(0);
} }
} }
} }
@ -769,8 +769,8 @@ $btn-mb: 0.5rem;
li.nav-item { li.nav-item {
opacity: 0.9; opacity: 0.9;
width: 100%; width: 100%;
padding-left: 1.5rem;
padding-right: 1.5rem; @include pl-pr(1.5rem);
a.nav-link { a.nav-link {
@include pt-pb(0.6rem); @include pt-pb(0.6rem);
@ -1043,7 +1043,7 @@ search {
a { a {
font-size: 1.4rem; font-size: 1.4rem;
line-height: 2.5rem; line-height: 1.5rem;
&:hover { &:hover {
@extend %link-hover; @extend %link-hover;
@ -1069,8 +1069,9 @@ search {
} }
> p { > p {
overflow: hidden; @extend %text-ellipsis;
text-overflow: ellipsis;
white-space: break-spaces;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
@ -1086,10 +1087,7 @@ search {
color: var(--topbar-text-color); color: var(--topbar-text-color);
text-align: center; text-align: center;
width: 70%; width: 70%;
overflow: hidden;
text-overflow: ellipsis;
word-break: keep-all; word-break: keep-all;
white-space: nowrap;
} }
#mask { #mask {
@ -1492,8 +1490,8 @@ search {
#main-wrapper > .container { #main-wrapper > .container {
max-width: $main-content-max-width; max-width: $main-content-max-width;
padding-left: 1.75rem !important;
padding-right: 1.75rem !important; @include pl-pr(1.75rem, true);
} }
main.col-12, main.col-12,

View file

@ -112,6 +112,16 @@
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
@mixin text-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
%text-ellipsis {
@include text-ellipsis;
}
%text-highlight { %text-highlight {
color: var(--text-muted-highlight-color); color: var(--text-muted-highlight-color);
font-weight: 600; font-weight: 600;
@ -158,9 +168,14 @@
padding-bottom: $val; padding-bottom: $val;
} }
@mixin pl-pr($val) { @mixin pl-pr($val, $important: false) {
padding-left: $val; @if $important {
padding-right: $val; padding-left: $val !important;
padding-right: $val !important;
} @else {
padding-left: $val;
padding-right: $val;
}
} }
@mixin placeholder { @mixin placeholder {

View file

@ -58,9 +58,8 @@
li { li {
font-size: 1.1rem; font-size: 1.1rem;
line-height: 3rem; line-height: 3rem;
white-space: nowrap;
overflow: hidden; @extend %text-ellipsis;
text-overflow: ellipsis;
&:nth-child(odd) { &:nth-child(odd) {
background-color: var(--main-bg, #ffffff); background-color: var(--main-bg, #ffffff);

View file

@ -63,9 +63,7 @@
} }
> a { > a {
white-space: nowrap; @include text-ellipsis;
overflow: hidden;
text-overflow: ellipsis;
} }
} }
} }

View file

@ -74,9 +74,8 @@
> div:first-child { > div:first-child {
display: block; display: block;
white-space: nowrap;
overflow: hidden; @extend %text-ellipsis;
text-overflow: ellipsis;
} }
} }
} }

View file

@ -1,6 +1,6 @@
/* /**
Post-specific style * Post-specific styles
*/ */
%btn-post-nav { %btn-post-nav {
width: 50%; width: 50%;
@ -97,7 +97,7 @@ header {
&:hover { &:hover {
i { i {
@extend %btn-share-hovor; @extend %btn-share-hover;
} }
} }
} }
@ -258,9 +258,8 @@ header {
.toc-link { .toc-link {
display: block; display: block;
white-space: nowrap;
overflow: hidden; @extend %text-ellipsis;
text-overflow: ellipsis;
&:hover { &:hover {
color: var(--toc-highlight); color: var(--toc-highlight);
@ -509,10 +508,11 @@ header {
} }
p { p {
@extend %text-ellipsis;
font-size: 0.9rem; font-size: 0.9rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
overflow: hidden; white-space: break-spaces;
text-overflow: ellipsis;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
@ -534,7 +534,7 @@ header {
max-width: 100%; max-width: 100%;
} }
%btn-share-hovor { %btn-share-hover {
color: var(--btn-share-hover-color) !important; color: var(--btn-share-hover-color) !important;
} }
@ -566,10 +566,8 @@ header {
/* Hide SideBar and TOC */ /* Hide SideBar and TOC */
@media all and (max-width: 849px) { @media all and (max-width: 849px) {
.post-navigation { .post-navigation {
padding-left: 0; @include pl-pr(0);
padding-right: 0; @include ml-mr(-0.5rem);
margin-left: -0.5rem;
margin-right: -0.5rem;
} }
} }