Fix footer overlap issue on blog posts with navigation (#342)

* feat: Wrap prev-next partial in post-navigation container

* feat: Apply clear fix to post navigation

* feat: Add consistent spacing between post navigation and post content

* feat: Adjust spacing for floats when post navigation is enabled

* refactor: Remove has pseudo class from body and ensure scope

* refactor: Change div tag to nav and add aria label

* refactor: Alphabatize declarations in clearfix rule

Author: kitbur

assets/css/main.css

@@ -34,6 +34,10 @@ body {
   margin-bottom: 170px;
 }
 
+body.blog-post.has-post-navigation {
+  margin-bottom: 80px;
+}
+
 b,
 strong {
   font-weight: bold;
@@ -640,6 +644,16 @@ table td {
   overflow: hidden;
 }
 
+.post-navigation {
+  padding: 40px 0;
+}
+
+.post-navigation::after {
+  clear: both;
+  content: "";
+  display: table;
+}
+
 .prev-post {
   float: left;
   text-align: left;

layouts/partials/prev-next.html

@@ -1,29 +1,31 @@
-{{ with .PrevInSection }}
-<div class="prev-post">
-    <p>
-        <a href="{{ .RelPermalink }}">
-            &#8592;
-            {{ i18n "previous" }}:
-            {{ .Title | markdownify }}
-        </a>
-    </p>
-    <p class="prev-post-date">
-        {{ dateFormat (or .Site.Params.dateFormat "January 2, 2006") .Date}}
-    </p>
-</div>
-{{ end }}
-
-{{ with .NextInSection }}
-<div class="next-post">
-    <p>
-        <a href="{{ .RelPermalink }}">
-            {{ i18n "next" }}:
-            {{ .Title | markdownify }}
-            &#8594;
-        </a>
-    </p>
-        <p class="next-post-date">
+<nav aria-label="Post navigation" class="post-navigation">
+    {{ with .PrevInSection }}
+    <div class="prev-post">
+        <p>
+            <a href="{{ .RelPermalink }}">
+                &#8592;
+                {{ i18n "previous" }}:
+                {{ .Title | markdownify }}
+            </a>
+        </p>
+        <p class="prev-post-date">
             {{ dateFormat (or .Site.Params.dateFormat "January 2, 2006") .Date}}
         </p>
-</div>
-{{ end }}
+    </div>
+    {{ end }}
+
+    {{ with .NextInSection }}
+    <div class="next-post">
+        <p>
+            <a href="{{ .RelPermalink }}">
+                {{ i18n "next" }}:
+                {{ .Title | markdownify }}
+                &#8594;
+            </a>
+        </p>
+            <p class="next-post-date">
+                {{ dateFormat (or .Site.Params.dateFormat "January 2, 2006") .Date}}
+            </p>
+    </div>
+    {{ end }}
+</nav>