Display title in post's page button.

_includes/related-posts.html

@@ -42,7 +42,7 @@
 {% if score_list.size > 0 %}
   {% assign score_list = score_list | sort | reverse %}
   {% assign count = 0 %}
-  <div id="related-posts" class="mt-4 mb-4 pb-3">
+  <div id="related-posts" class="mt-4 mb-2 mb-sm-4 pb-2">
     <h3 class="pt-2 mt-1 mb-4" data-toc-skip>Related Posts</h3>
     <div class="card-deck mb-4">
     {% for score_item in score_list %}

_layouts/post.html

@@ -88,21 +88,21 @@ layout: default
 
       <div class="post-pager d-flex justify-content-between">
       {% if page.previous.url %}
-        <a href="{{ site.baseurl }}{{page.previous.url}}" class="btn btn-outline-primary">
+        <a href="{{ site.baseurl }}{{ page.previous.url }}" class="btn btn-outline-primary">
+          <p>{{ page.previous.title }}</p>
       {% else %}
         <a href="javascript:;" class="btn btn-outline-primary disabled">
+          <p>-</p>
       {% endif %}
-          <i class="fas fa-angle-left mr-1"></i>
-          OLDER POST
         </a>
 
       {% if page.next.url %}
         <a href="{{ site.baseurl }}{{page.next.url}}" class="btn btn-outline-primary">
+          <p>{{ page.next.title }}</p>
       {% else %}
         <a href="javascript:;" class="btn btn-outline-primary disabled">
+          <p>-</p>
       {% endif %}
-        NEWER POST
-        <i class="fas fa-angle-right ml-1"></i>
         </a>
       </div> <!-- div.post-pager -->
 

assets/css/post.scss

@@ -23,11 +23,15 @@
 }
 
 .post-pager {
-  margin: 1rem 0 2rem;
+  border-top: 1px double #e9ecef;
+  border-bottom: 1px double #e9ecef;
+  padding: 1rem .2rem;
+  margin-bottom: 2rem;
 }
 
 .post-pager .btn,
 .post-pager .btn.disabled {
+  width: calc(50% - .5rem);
   color: #2a408e;
   border-color: #2a408e;
 }
@@ -45,6 +49,27 @@
   border-color: gray;
 }
 
+.post-pager a > p {
+  font-weight: 600;
+  line-height: 1.2rem;
+  margin-top: .3rem;
+  white-space: normal;
+}
+
+.post-pager a::before {
+  color: gray;
+  font-size: .85rem;
+  text-transform: uppercase;
+}
+
+.post-pager a:first-child::before {
+  content: "previous";
+}
+
+.post-pager a:last-child::before {
+  content: "next";
+}
+
 @keyframes fade-up {
   from {
     opacity: 0;
@@ -84,11 +109,7 @@
 
 /*--- Related Posts ---*/
 
-#related-posts {
-  border-bottom: 1px double #e9ecef;
-}
-
-#related-posts>h3 {
+#related-posts > h3 {
   color: gray;
   font-size: 1.1rem;
   font-family: 'Oswald', sans-serif;
@@ -135,7 +156,7 @@
   padding-inline-start: 1.5rem;
 }
 
-#related-posts ul>li::before {
+#related-posts ul > li::before {
   background: #c2c9d4;
   width: 5px;
   height: 5px;
@@ -159,7 +180,7 @@
 }
 
 @media all and (min-width: 768px) {
-  .post .post-meta>div:not(:first-child)::before {
+  .post .post-meta > div:not(:first-child)::before {
     content: "\2022";
     color: rgba(158, 158, 158, 0.8);
     font-weight: bold;
@@ -190,6 +211,11 @@
     -ms-transform: translateX(-50%);
     transform: translateX(-50%);
   }
+
+  .post-pager {
+    padding-left: 0;
+    padding-right: 0;
+  }
 }
 
 /*