Improve the paginator design for the mobile screens (#331)

_includes/post-paginator.html

@@ -2,13 +2,14 @@
   The paginator for post list on HomgPage.
 -->
 
-<ul class="pagination mt-4 mb-0 pl-lg-2">
+<ul class="pagination align-items-center mt-4 mb-0 pl-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>
@@ -65,12 +66,19 @@
 
   {% 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>

_sass/layout/home.scss

@@ -3,27 +3,24 @@
 */
 
 .pagination {
-  font-size: 1rem;
+  color: var(--btn-patinator-text-color);
+  font-family: 'Lato', sans-serif;
+
   a:hover {
     text-decoration: none;
   }
 
   .page-item {
     .page-link {
-      color: var(--btn-patinator-text-color);
+      color: inherit;
       width: 2.5rem;
       height: 2.5rem;
       padding: 0;
-      text-align: center;
       display: -webkit-box;
-      display: flex;
       -webkit-box-pack: center;
-      justify-content: center;
       -webkit-box-align: center;
-      align-items: center;
       border-radius: 50%;
       border: 1px solid var(--btn-paginator-border-color);
-      font-family: 'Lato', sans-serif;
       background-color: var(--button-bg);
       &:hover {
         background-color: var(--btn-paginator-hover-color);
@@ -49,9 +46,6 @@
     &:last-child .page-link {
       border-radius: 50%;
     }
-    &:not(:last-child) {
-      margin-right: 0.7rem;
-    }
   } // .page-item
 
 } // .pagination
@@ -116,7 +110,15 @@
 /* Hide SideBar and TOC */
 @media all and (max-width: 830px) {
   .pagination {
-    justify-content: center;
+    justify-content: space-evenly;
+
+    .page-item {
+      &:not(:first-child):not(:last-child) {
+        display: none;
+      }
+
+    }
+
   }
 }
 
@@ -144,11 +146,24 @@
 
   .pagination {
     font-size: 0.85rem;
-    .page-item .page-link {
-      width: 2.2rem;
-      height: 2.2rem;
+
+    .page-item {
+      &:not(:last-child) {
+        margin-right: 0.7rem;
+      }
+
+      .page-link {
+        width: 2rem;
+        height: 2rem;
+      }
+
     }
-  }
+
+    .page-index {
+      display: none;
+    }
+
+  } // .pagination
 
 }