Improve pagination styling.
parent
24090c216c
commit
113e0c129a
|
@ -32,7 +32,7 @@ plugins:
|
|||
|
||||
pagination:
|
||||
enabled: true
|
||||
per_page: 10
|
||||
per_page: 5
|
||||
permalink: '/page/:num/'
|
||||
limit: 0
|
||||
sort_field: 'date'
|
||||
|
|
|
@ -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 %}
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue