improve posts pagination

src/_includes/components/pagination.njk

@@ -1,10 +1,4 @@
-<nav>
+<nav class="pagination">
-    {% if pagination.nextPageLink -%}
-        {% set nextPageNumber = pagination.pageNumber + 1 %}
-        {% set nextPageLink = 'page/' ~ nextPageNumber %}
-        <a href="/{{ page.fileSlug }}/{{ nextPageLink }}" rel="prev">Older</a>
-    {%- endif %}
-
     {% if pagination.previousPageLink -%}
         {% set previousPageNumber = pagination.pageNumber - 1 %}
         {%- if pagination.pageNumber == 1 -%}
@@ -12,6 +6,14 @@
         {%- else -%}
             {% set previousPageLink = 'page/' ~ previousPageNumber %}
         {%- endif -%}
-        <a href="/{{ page.fileSlug }}/{{ previousPageLink }}" rel="next">Newer</a>
+        <a class="next" href="/{{ page.fileSlug }}/{{ previousPageLink }}" rel="next">newer posts</a>
+    {% else %}
+        <div class="next"></div>
+    {%- endif %}
+
+    {% if pagination.nextPageLink -%}
+        {% set nextPageNumber = pagination.pageNumber + 1 %}
+        {% set nextPageLink = 'page/' ~ nextPageNumber %}
+        <a class="prev" href="/{{ page.fileSlug }}/{{ nextPageLink }}" rel="prev">older posts</a>
     {%- endif %}
 </nav>

src/css/style.scss

@@ -36,6 +36,15 @@ footer {
   }
 }
 
+.pagination {
+  display: flex;
+  justify-content: space-between;
+  a {
+    font-weight: bolder;
+    font-size: large;
+  }
+}
+
 footer,
 #site_header,
 .lavender-webring-container {

src/posts.njk

@@ -9,6 +9,8 @@ permalink: /posts/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumbe
 ---
 {% extends 'layouts/default.njk' %}
 {% block main %}
+  {% include "components/pagination.njk" %}
+
   <ul>
     {% for entry in pagination.items %}
     <li class="list-entry">