diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss index e332f21..2bf99b8 100644 --- a/_sass/addon/commons.scss +++ b/_sass/addon/commons.scss @@ -251,8 +251,8 @@ i { > p { 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 { opacity: 0.9; width: 100%; - padding-left: 1.5rem; - padding-right: 1.5rem; + + @include pl-pr(1.5rem); a.nav-link { @include pt-pb(0.6rem); @@ -1043,7 +1043,7 @@ search { a { font-size: 1.4rem; - line-height: 2.5rem; + line-height: 1.5rem; &:hover { @extend %link-hover; @@ -1069,8 +1069,9 @@ search { } > p { - overflow: hidden; - text-overflow: ellipsis; + @extend %text-ellipsis; + + white-space: break-spaces; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; @@ -1086,10 +1087,7 @@ search { color: var(--topbar-text-color); text-align: center; width: 70%; - overflow: hidden; - text-overflow: ellipsis; word-break: keep-all; - white-space: nowrap; } #mask { @@ -1492,8 +1490,8 @@ search { #main-wrapper > .container { 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, diff --git a/_sass/addon/module.scss b/_sass/addon/module.scss index 34ac67b..1dfb735 100644 --- a/_sass/addon/module.scss +++ b/_sass/addon/module.scss @@ -112,6 +112,16 @@ -webkit-box-orient: vertical; } +@mixin text-ellipsis { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +%text-ellipsis { + @include text-ellipsis; +} + %text-highlight { color: var(--text-muted-highlight-color); font-weight: 600; @@ -158,9 +168,14 @@ padding-bottom: $val; } -@mixin pl-pr($val) { - padding-left: $val; - padding-right: $val; +@mixin pl-pr($val, $important: false) { + @if $important { + padding-left: $val !important; + padding-right: $val !important; + } @else { + padding-left: $val; + padding-right: $val; + } } @mixin placeholder { diff --git a/_sass/layout/archives.scss b/_sass/layout/archives.scss index 3a2e86b..fd1979b 100644 --- a/_sass/layout/archives.scss +++ b/_sass/layout/archives.scss @@ -58,9 +58,8 @@ li { font-size: 1.1rem; line-height: 3rem; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + + @extend %text-ellipsis; &:nth-child(odd) { background-color: var(--main-bg, #ffffff); diff --git a/_sass/layout/category-tag.scss b/_sass/layout/category-tag.scss index 9e43a91..fe7d99c 100644 --- a/_sass/layout/category-tag.scss +++ b/_sass/layout/category-tag.scss @@ -63,9 +63,7 @@ } > a { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + @include text-ellipsis; } } } diff --git a/_sass/layout/home.scss b/_sass/layout/home.scss index 0d95d7b..7fff3ba 100644 --- a/_sass/layout/home.scss +++ b/_sass/layout/home.scss @@ -74,9 +74,8 @@ > div:first-child { display: block; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + + @extend %text-ellipsis; } } } diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss index 01021f3..b66e906 100644 --- a/_sass/layout/post.scss +++ b/_sass/layout/post.scss @@ -1,6 +1,6 @@ -/* - Post-specific style -*/ +/** + * Post-specific styles + */ %btn-post-nav { width: 50%; @@ -97,7 +97,7 @@ header { &:hover { i { - @extend %btn-share-hovor; + @extend %btn-share-hover; } } } @@ -258,9 +258,8 @@ header { .toc-link { display: block; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + + @extend %text-ellipsis; &:hover { color: var(--toc-highlight); @@ -509,10 +508,11 @@ header { } p { + @extend %text-ellipsis; + font-size: 0.9rem; margin-bottom: 0.5rem; - overflow: hidden; - text-overflow: ellipsis; + white-space: break-spaces; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; @@ -534,7 +534,7 @@ header { max-width: 100%; } -%btn-share-hovor { +%btn-share-hover { color: var(--btn-share-hover-color) !important; } @@ -566,10 +566,8 @@ header { /* Hide SideBar and TOC */ @media all and (max-width: 849px) { .post-navigation { - padding-left: 0; - padding-right: 0; - margin-left: -0.5rem; - margin-right: -0.5rem; + @include pl-pr(0); + @include ml-mr(-0.5rem); } }