From 6a7e9a0d5330d60192aaedf5c540448ddd26c4ea Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sun, 20 Oct 2024 13:47:54 +0800
Subject: [PATCH] refactor: reduce duplicate scss

---
 _sass/addon/commons.scss       | 22 ++++++++++------------
 _sass/addon/module.scss        | 21 ++++++++++++++++++---
 _sass/layout/archives.scss     |  5 ++---
 _sass/layout/category-tag.scss |  4 +---
 _sass/layout/home.scss         |  5 ++---
 _sass/layout/post.scss         | 26 ++++++++++++--------------
 6 files changed, 45 insertions(+), 38 deletions(-)

diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index e332f21336a..56ad90e917e 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 pr-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 34ac67b95ea..1dfb735fd01 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 3a2e86b1191..fd1979b8f91 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 9e43a911ace..fe7d99cec25 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 0d95d7ba6a6..7fff3ba1627 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 01021f3f615..b66e906c87f 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);
   }
 }