Improve next/prev links

layouts/partials/entry_nav.html

 {{ if gt ( len ( where .Site.RegularPages "Section" .Section ) ) 1 }}
 <nav class='entry-nav'>
-  {{- if .PrevInSection -}}
-    <div class='prev-entry sep-before'>
+  <div class='prev-entry sep-before'>
+    {{- if .PrevInSection -}}
       <a href='{{ .PrevInSection.Permalink | relURL }}'>
-        <i class="fas fa-chevron-left"></i> Previous
+        <strong><i class="fas fa-chevron-left"></i> Previous</strong>
+        {{ .PrevInSection.Title }}
       </a>
-    </div>
-  {{- end -}}
+    {{- end -}}
+  </div>
 
-  {{- if .NextInSection -}}
-    <div class='next-entry sep-before'>
+  <div class='next-entry sep-before'>
+    {{- if .NextInSection -}}
       <a href='{{ .NextInSection.Permalink | relURL }}'>
-        Next <i class="fas fa-chevron-right"></i>
+        <strong>Next <i class="fas fa-chevron-right"></i></strong>
+        {{ .NextInSection.Title }}
       </a>
-    </div>
-  {{- end -}}
+    {{- end -}}
+  </div>
 </nav>
 {{ end }}

static/style.css

@@ -364,20 +364,30 @@ body {
       text-decoration: none; }
 
 .entry-nav {
-  overflow: hidden;
+  display: flex;
+  margin: 0 -15px;
   margin-bottom: 30px; }
   .entry-nav a {
     color: #79b9e7;
-    display: inline-block;
+    display: block;
     border: 1px solid #303643;
     padding: 10px 14px;
     border-radius: 4px;
     font-weight: 500;
-    text-decoration: none; }
-  .entry-nav .prev-entry {
-    float: left; }
+    text-decoration: none;
+    font-size: 12px; }
+    .entry-nav a strong {
+      display: block;
+      font-size: 16px;
+      margin-bottom: 6px; }
+  .entry-nav .prev-entry,
+  .entry-nav .next-entry {
+    box-sizing: border-box;
+    width: 50%;
+    flex: 0 0 auto;
+    padding: 0 15px; }
   .entry-nav .next-entry {
-    float: right; }
+    text-align: right; }
 
 .pagination {
   display: -ms-flexbox;

static/style.scss

@@ -514,25 +514,37 @@ body {
 }
 
 .entry-nav {
-  overflow: hidden;
+  display: flex;
+  margin: 0 -15px;
   margin-bottom: 30px;
 
   a {
     color: lighten($vibrant, 18%);
-    display: inline-block;
+    display: block;
     border: 1px solid lighten($darkest, 8%);
     padding: 10px 14px;
     border-radius: 4px;
     font-weight: 500;
     text-decoration: none;
+    font-size: 12px;
+
+    strong {
+      display: block;
+      font-size: 16px;
+      margin-bottom: 6px;
+    }
   }
 
-  .prev-entry {
-    float: left;
+  .prev-entry,
+  .next-entry {
+    box-sizing: border-box;
+    width: 50%;
+    flex: 0 0 auto;
+    padding: 0 15px;
   }
 
   .next-entry {
-    float: right;
+    text-align: right;
   }
 }