Improve pagination styling.

_config.yml

@@ -32,7 +32,7 @@ plugins:
 
 pagination:
   enabled: true
-  per_page: 10
+  per_page: 5
   permalink: '/page/:num/'
   limit: 0
   sort_field: 'date'

_includes/post-paginator.html

@@ -1,14 +1,32 @@
 {% if paginator.total_pages > 1 %}
-<ul>
+<nav aria-label="Page Navigation">
+  <ul class="pagination">
+    <!-- left arrow -->
     {% if paginator.previous_page %}
-  <li>
-    <a href="{{ paginator.previous_page_path | prepend: site.baseurl }}">Newer</a>
-  </li>
+      {% assign prev_url = paginator.previous_page_path | prepend: site.baseurl %}
+    {% else %}
+      {% assign prev_url = '' %}
     {% endif %}
-  {% if paginator.next_page %}
-  <li>
-    <a href="{{ paginator.next_page_path | prepend: site.baseurl }}">Older</a>
+
+    <li class="page-item {% unless paginator.previous_page %}disabled{% endunless %}">
+      <a class="page-link" href="{{ prev_url }}" aria-label="previous-page">
+        <i class="fa fa-angle-left"></i>
+      </a>
     </li>
+
+    <!-- right arrow -->
+    {% if paginator.next_page_path %}
+      {% assign next_url = paginator.next_page_path | prepend: site.baseurl %}
+    {% else %}
+      {% assign next_url = '#' %}
     {% endif %}
+
+    <li class="page-item {% unless paginator.next_page_path %}disabled{% endunless %}">
+      <a class="page-link" href="{{ next_url }}" aria-label="next-page">
+        <i class="fa fa-angle-right"></i>
+      </a>
+    </li>
   </ul>
+</nav>
+<!-- .pagination -->
 {% endif %}

_layouts/home.html

@@ -2,6 +2,7 @@
 layout: default
 ---
 
+{% if paginator.page_path contains "index" %}
 <p class="home-description">
   Most applications listed below are served from <a href="https://nixos.org/" target="_blank">NixOS</a>
   machines hosted on <a href="https://www.digitalocean.com/" target="_blank">Digital Ocean</a>.
@@ -9,6 +10,7 @@ layout: default
   If interested in starting a similar hosting solution, consider getting a $200
   credit using my <a href="https://m.do.co/c/c65b89434c1b" target="_blank">referral link</a>.
 </p>
+{% endif %}
 
 {% for post in paginator.posts %}
   <div class="posts-container">

_sass/_home.scss

@@ -10,3 +10,24 @@
     max-height: 220px;
   }
 }
+
+ul.pagination {
+  list-style: none;
+  display: flex;
+  gap: 2rem;
+  padding: 0;
+  margin-bottom: 0;
+  justify-content: center;
+
+  li.disabled {
+    opacity: 0.5;
+
+    .page-link i {
+      cursor: not-allowed;
+    }
+  }
+
+  .page-link i {
+    font-size: 1.75rem;
+  }
+}