From a42a5bfab4c49fb61cbd5ad2a58b5e4a60d70fc7 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Fri, 3 Jan 2020 19:33:49 +0800
Subject: [PATCH] Beautified the navigation button in post.

---
 _layouts/post.html   |  4 +--
 assets/css/post.scss | 59 ++++++++++++++++++++++++++++----------------
 2 files changed, 40 insertions(+), 23 deletions(-)

diff --git a/_layouts/post.html b/_layouts/post.html
index 464856d..643132e 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -86,7 +86,7 @@ layout: default
     <div class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
       {% include related-posts.html %}
 
-      <div class="post-pager d-flex justify-content-between">
+      <div class="post-navigation d-flex justify-content-between">
       {% if page.previous.url %}
         <a href="{{ site.baseurl }}{{ page.previous.url }}" class="btn btn-outline-primary">
           <p>{{ page.previous.title }}</p>
@@ -104,7 +104,7 @@ layout: default
           <p>-</p>
       {% endif %}
         </a>
-      </div> <!-- div.post-pager -->
+      </div> <!-- div.post-navigation -->
 
     {% if site.disqus.comments and page.comments %}
       {% include disqus.html %}
diff --git a/assets/css/post.scss b/assets/css/post.scss
index a82d587..1c34964 100644
--- a/assets/css/post.scss
+++ b/assets/css/post.scss
@@ -22,52 +22,69 @@
   font-size: 0.85rem;
 }
 
-.post-pager {
-  border-top: 1px double #e9ecef;
-  border-bottom: 1px double #e9ecef;
+.post-navigation {
   padding: 1rem .2rem;
   margin-bottom: 2rem;
 }
 
-.post-pager .btn,
-.post-pager .btn.disabled {
-  width: calc(50% - .5rem);
+.post-navigation .btn,
+.post-navigation .btn.disabled {
+  width: 50%;
+  position: relative;
   color: #2a408e;
+  border-color: #e9ecef;
+}
+
+.post-navigation .btn:hover {
+  background: #2a408e;
+  color: #fff;
   border-color: #2a408e;
 }
 
-.post-pager .btn:hover {
-  background: #2a408e;
-  color: #fff;
-}
-
-.post-pager a.btn.disabled {
+.post-navigation a.btn.disabled {
   pointer-events: auto;
   cursor: not-allowed;
   background: none;
   color: gray;
-  border-color: gray;
+  border-color: #e9ecef;
 }
 
-.post-pager a > p {
+.post-navigation a.btn.btn-outline-primary.disabled:focus {
+  box-shadow: none;
+}
+
+.post-navigation a > p {
+  font-size: 1.1rem;
   font-weight: 600;
   line-height: 1.2rem;
   margin-top: .3rem;
   white-space: normal;
 }
 
-.post-pager a::before {
+.post-navigation a:first-child {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  left: .5px;
+}
+
+.post-navigation a:last-child {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  right: .5px;
+}
+
+.post-navigation a::before {
   color: gray;
-  font-size: .85rem;
+  font-size: .65rem;
   text-transform: uppercase;
 }
 
-.post-pager a:first-child::before {
-  content: "previous";
+.post-navigation a:first-child::before {
+  content: "Older";
 }
 
-.post-pager a:last-child::before {
-  content: "next";
+.post-navigation a:last-child::before {
+  content: "Newer";
 }
 
 @keyframes fade-up {
@@ -212,7 +229,7 @@
     transform: translateX(-50%);
   }
 
-  .post-pager {
+  .post-navigation {
     padding-left: 0;
     padding-right: 0;
   }