From 62bcd601fcadc602c81672b1d4b937231396c3c0 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Wed, 6 Sep 2023 00:13:10 +0800
Subject: [PATCH] feat(ui): redesign the pagination button on home page

---
 _includes/post-paginator.html      | 162 +++++++++++++++--------------
 _sass/addon/commons.scss           |   2 +-
 _sass/colors/typography-dark.scss  |  10 +-
 _sass/colors/typography-light.scss |   2 -
 _sass/layout/home.scss             |  43 +++-----
 5 files changed, 103 insertions(+), 116 deletions(-)

diff --git a/_includes/post-paginator.html b/_includes/post-paginator.html
index 668b49f..c74e978 100644
--- a/_includes/post-paginator.html
+++ b/_includes/post-paginator.html
@@ -1,89 +1,91 @@
 <!-- The paginator for post list on HomgPage. -->
 
-<ul class="pagination align-items-center mt-4 mb-1 ps-lg-2">
-  <!-- left arrow -->
-  {% if paginator.previous_page %}
-    {% assign prev_url = paginator.previous_page_path | relative_url %}
-  {% else %}
-    {% assign prev_url = '#' %}
-  {% endif %}
-
-  <li class="page-item {% unless paginator.previous_page %}disabled{% endunless %}">
-    <a class="page-link btn-box-shadow" href="{{ prev_url }}" aria-label="previous-page">
-      <i class="fas fa-angle-left"></i>
-    </a>
-  </li>
-
-  <!-- page numbers -->
-  {% assign left_ellipsis = false %}
-  {% assign right_ellipsis = false %}
-
-  {% for i in (1..paginator.total_pages) %}
-    {% assign pre = paginator.page | minus: 1 %}
-    {% assign next = paginator.page | plus: 1 %}
-    {% assign pre_less = pre | minus: 1 %}
-    {% assign next_more = next | plus: 1 %}
-    {% assign show = false %}
-
-    {% if paginator.page == 1 %}
-      {% if i <= 3 or i == paginator.total_pages %}
-        {% assign show = true %}
-      {% endif %}
-    {% elsif paginator.page == paginator.total_pages %}
-      {% if i == 1 or i >= pre_less %}
-        {% assign show = true %}
-      {% endif %}
+<nav aria-label="Page Navigation">
+  <ul class="pagination align-items-center mt-4 mb-0">
+    <!-- left arrow -->
+    {% if paginator.previous_page %}
+      {% assign prev_url = paginator.previous_page_path | relative_url %}
     {% else %}
-      {% if i == 1 or i == paginator.total_pages %}
-        {% assign show = true %}
-      {% elsif i >= pre and i <= next %}
-        {% assign show = true %}
-      {% endif %}
+      {% assign prev_url = '#' %}
     {% endif %}
 
-    {% if show %}
-      <!-- show number -->
-      <li class="page-item {% if i == paginator.page %} active{% endif %}">
-        <a
-          class="page-link btn-box-shadow"
-          href="{% if i > 1 %}{{ site.paginate_path | replace: ':num', i | relative_url }}{% else %}{{ '/' | relative_url }}{% endif %}"
-        >
-          {{- i -}}
-        </a>
-      </li>
-    {% else %}
-      <!-- hide number -->
-      {% if i < pre and left_ellipsis == false %}
-        <li class="page-item disabled">
-          <span class="page-link btn-box-shadow">...</span>
-        </li>
-        {% assign left_ellipsis = true %}
-      {% elsif i > next and right_ellipsis == false %}
-        <li class="page-item disabled">
-          <span class="page-link btn-box-shadow">...</span>
-        </li>
-        {% assign right_ellipsis = true %}
+    <li class="page-item {% unless paginator.previous_page %}disabled{% endunless %}">
+      <a class="page-link" href="{{ prev_url }}" aria-label="previous-page">
+        <i class="fas fa-angle-left"></i>
+      </a>
+    </li>
+
+    <!-- page numbers -->
+    {% assign left_ellipsis = false %}
+    {% assign right_ellipsis = false %}
+
+    {% for i in (1..paginator.total_pages) %}
+      {% assign pre = paginator.page | minus: 1 %}
+      {% assign next = paginator.page | plus: 1 %}
+      {% assign pre_less = pre | minus: 1 %}
+      {% assign next_more = next | plus: 1 %}
+      {% assign show = false %}
+
+      {% if paginator.page == 1 %}
+        {% if i <= 3 or i == paginator.total_pages %}
+          {% assign show = true %}
+        {% endif %}
+      {% elsif paginator.page == paginator.total_pages %}
+        {% if i == 1 or i >= pre_less %}
+          {% assign show = true %}
+        {% endif %}
+      {% else %}
+        {% if i == 1 or i == paginator.total_pages %}
+          {% assign show = true %}
+        {% elsif i >= pre and i <= next %}
+          {% assign show = true %}
+        {% endif %}
       {% endif %}
+
+      {% if show %}
+        <!-- show number -->
+        <li class="page-item {% if i == paginator.page %} active{% endif %}">
+          <a
+            class="page-link"
+            href="{% if i > 1 %}{{ site.paginate_path | replace: ':num', i | relative_url }}{% else %}{{ '/' | relative_url }}{% endif %}"
+          >
+            {{- i -}}
+          </a>
+        </li>
+      {% else %}
+        <!-- hide number -->
+        {% if i < pre and left_ellipsis == false %}
+          <li class="page-item disabled">
+            <span class="page-link">...</span>
+          </li>
+          {% assign left_ellipsis = true %}
+        {% elsif i > next and right_ellipsis == false %}
+          <li class="page-item disabled">
+            <span class="page-link">...</span>
+          </li>
+          {% assign right_ellipsis = true %}
+        {% endif %}
+      {% endif %}
+    {% endfor %}
+
+    <!-- mobile pagination -->
+    <li class="page-index align-middle">
+      <span>{{ paginator.page }}</span>
+      <span class="text-muted">/ {{ paginator.total_pages }}</span>
+    </li>
+
+    <!-- right arrow -->
+    {% if paginator.next_page_path %}
+      {% assign next_url = paginator.next_page_path | relative_url %}
+    {% else %}
+      {% assign next_url = '#' %}
     {% endif %}
-  {% endfor %}
 
-  <!-- mobile pagination -->
-  <li class="page-index align-middle">
-    <span>{{ paginator.page }}</span>
-    <span class="text-muted">/ {{ paginator.total_pages }}</span>
-  </li>
-
-  <!-- right arrow -->
-  {% if paginator.next_page_path %}
-    {% assign next_url = paginator.next_page_path | relative_url %}
-  {% else %}
-    {% assign next_url = '#' %}
-  {% endif %}
-
-  <li class="page-item {% unless paginator.next_page_path %}disabled{% endunless %}">
-    <a class="page-link btn-box-shadow" href="{{ next_url }}" aria-label="next-page">
-      <i class="fas fa-angle-right"></i>
-    </a>
-  </li>
-</ul>
+    <li class="page-item {% unless paginator.next_page_path %}disabled{% endunless %}">
+      <a class="page-link" href="{{ next_url }}" aria-label="next-page">
+        <i class="fas fa-angle-right"></i>
+      </a>
+    </li>
+  </ul>
+</nav>
 <!-- .pagination -->
diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index 2be59c7..2a67dd1 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -604,7 +604,7 @@ i {
 }
 
 .btn-box-shadow {
-  box-shadow: 0 0 8px 0 var(--btn-box-shadow) !important;
+  box-shadow: var(--card-shadow);
 }
 
 /* overwrite bootstrap muted */
diff --git a/_sass/colors/typography-dark.scss b/_sass/colors/typography-dark.scss
index ff55628..f43f17c 100644
--- a/_sass/colors/typography-dark.scss
+++ b/_sass/colors/typography-dark.scss
@@ -17,10 +17,10 @@
   --blockquote-text-color: #868686;
   --link-color: rgb(138, 180, 248);
   --link-underline-color: rgb(82, 108, 150);
-  --button-bg: rgb(39, 40, 43);
-  --btn-border-color: rgb(63, 65, 68);
+  --button-bg: #1e1e1e;
+  --btn-border-color: #2e2f31;
   --btn-backtotop-color: var(--text-color);
-  --btn-backtotop-border-color: var(--btn-border-color);
+  --btn-backtotop-border-color: #212122;
   --btn-box-shadow: var(--main-bg);
   --card-header-bg: #292929;
   --checkbox-color: rgb(118, 120, 121);
@@ -55,9 +55,7 @@
   /* Home page */
   --post-list-text-color: rgb(175, 176, 177);
   --btn-patinator-text-color: var(--text-color);
-  --btn-paginator-hover-color: rgb(64, 65, 66);
-  --btn-paginator-border-color: var(--btn-border-color);
-  --btn-text-color: var(--text-color);
+  --btn-paginator-hover-color: #2e2e2e;
 
   /* Posts */
   --toc-highlight: rgb(116, 178, 243);
diff --git a/_sass/colors/typography-light.scss b/_sass/colors/typography-light.scss
index f0cd983..f7037a0 100644
--- a/_sass/colors/typography-light.scss
+++ b/_sass/colors/typography-light.scss
@@ -59,8 +59,6 @@
   --post-list-text-color: dimgray;
   --btn-patinator-text-color: #555555;
   --btn-paginator-hover-color: var(--sidebar-bg);
-  --btn-paginator-border-color: var(--sidebar-bg);
-  --btn-text-color: #676666;
 
   /* Posts */
   --toc-highlight: #0550ae;
diff --git a/_sass/layout/home.scss b/_sass/layout/home.scss
index 499de47..bca2ca4 100644
--- a/_sass/layout/home.scss
+++ b/_sass/layout/home.scss
@@ -89,8 +89,9 @@
 } /* #post-list */
 
 .pagination {
-  color: var(--btn-patinator-text-color);
+  color: var(--text-color);
   font-family: Lato, sans-serif;
+  justify-content: space-evenly;
 
   a:hover {
     text-decoration: none;
@@ -98,26 +99,27 @@
 
   .page-item {
     .page-link {
-      color: inherit;
-      width: 2.5rem;
-      height: 2.5rem;
-      padding: 0;
+      color: var(--btn-patinator-text-color);
+      padding: 0 0.6rem;
       display: -webkit-box;
       -webkit-box-pack: center;
       -webkit-box-align: center;
-      border-radius: 50%;
-      border: 1px solid var(--btn-paginator-border-color);
-      background-color: var(--button-bg);
-
-      &:hover {
-        background-color: var(--btn-paginator-hover-color);
-      }
+      border-radius: 0.5rem;
+      border: 0;
+      background-color: inherit;
     }
 
     &.active {
       .page-link {
         background-color: var(--btn-paginator-hover-color);
-        color: var(--btn-text-color);
+      }
+    }
+
+    &:not(.active) {
+      .page-link {
+        &:hover {
+          box-shadow: inset var(--btn-border-color) 0 0 0 1px;
+        }
       }
     }
 
@@ -126,15 +128,8 @@
 
       .page-link {
         color: rgba(108, 117, 125, 0.57);
-        border-color: var(--btn-paginator-border-color);
-        background-color: var(--button-bg);
       }
     }
-
-    &:first-child .page-link,
-    &:last-child .page-link {
-      border-radius: 50%;
-    }
   } /* .page-item */
 } /* .pagination */
 
@@ -175,8 +170,6 @@
 /* Hide SideBar and TOC */
 @media all and (max-width: 830px) {
   .pagination {
-    justify-content: space-evenly;
-
     .page-item {
       &:not(:first-child):not(:last-child) {
         display: none;
@@ -193,16 +186,12 @@
 
   .pagination {
     font-size: 0.85rem;
+    justify-content: center;
 
     .page-item {
       &:not(:last-child) {
         margin-right: 0.7rem;
       }
-
-      .page-link {
-        width: 2rem;
-        height: 2rem;
-      }
     }
 
     .page-index {