Fit smash rap image more nicely.

_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>
-  {% if paginator.previous_page %}
-  <li>
-    <a href="{{ paginator.previous_page_path | prepend: site.baseurl }}">Newer</a>
-  </li>
-  {% endif %}
-  {% if paginator.next_page %}
-  <li>
-    <a href="{{ paginator.next_page_path | prepend: site.baseurl }}">Older</a>
-  </li>
-  {% endif %}
-</ul>
+<nav aria-label="Page Navigation">
+  <ul class="pagination">
+    <!-- left arrow -->
+    {% if paginator.previous_page %}
+      {% assign prev_url = paginator.previous_page_path | prepend: site.baseurl %}
+    {% else %}
+      {% assign prev_url = '' %}
+    {% endif %}
+
+    <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">

_layouts/other.html

@@ -1,39 +0,0 @@
----
-layout: default
----
-
-{% for post in paginator.posts %} 
-  <div class="posts-container">
-    <h1>
-      {% if post.href %}
-      <a href="{{ post.href }}" target="_blank">{{ post.title }}</a>
-      {% else %}
-      {{ post.title }}
-      {% endif %}
-    </h1>
-    {% if post.image %}
-      <div class="thumbnail-container">
-        <a href="{{ post.href }}" target="_blank">
-          <img src="{{ site.github.url }}/assets/img/{{ post.image }}">
-        </a>
-      </div>
-    {% endif %}
-    <p>
-      <div class="post-tags">
-      {% for tag in post.tags %}
-        <div class="{{ tag }}">{{ tag }}</div>
-      {% endfor %}
-      </div>
-      <p>{{ post.content }}</p>
-      <span class="post-date">
-        {% if post.href %}
-        <a href="{{ post.href }}" target="_blank">{{ post.href }}</a> -
-        {% endif %}
-        <i class="fa fa-calendar" aria-hidden="true"></i>
-        {{ post.date | date_to_string }}
-      </span>
-    </p>
-  </div>
-{% endfor %}
-
-{% include post-paginator.html %}

_layouts/projects.html

@@ -1,39 +0,0 @@
----
-layout: default
----
-
-{% for post in paginator.posts %} 
-  <div class="posts-container">
-    <h1>
-      {% if post.href %}
-      <a href="{{ post.href }}" target="_blank">{{ post.title }}</a>
-      {% else %}
-      {{ post.title }}
-      {% endif %}
-    </h1>
-    {% if post.image %}
-      <div class="thumbnail-container">
-        <a href="{{ post.href }}" target="_blank">
-          <img src="{{ site.github.url }}/assets/img/{{ post.image }}">
-        </a>
-      </div>
-    {% endif %}
-    <p>
-      <div class="post-tags">
-      {% for tag in post.tags %}
-        <div class="{{ tag }}">{{ tag }}</div>
-      {% endfor %}
-      </div>
-      <p>{{ post.content }}</p>
-      <span class="post-date">
-        {% if post.href %}
-        <a href="{{ post.href }}" target="_blank">{{ post.href }}</a> -
-        {% endif %}
-        <i class="fa fa-calendar" aria-hidden="true"></i>
-        {{ post.date | date_to_string }}
-      </span>
-    </p>
-  </div>
-{% endfor %}
-
-{% include post-paginator.html %}

_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;
+  }
+}

other.html

@@ -1,7 +1,7 @@
 ---
-layout: other
+layout: home
 title: Other
-pagination: 
+pagination:
   enabled: true
   category: other
   indexpage: other

projects.html

@@ -1,7 +1,7 @@
 ---
-layout: projects
+layout: home
 title: Projects
-pagination: 
+pagination:
   enabled: true
   category: project
   indexpage: projects