Improve pagination styling.
parent
24090c216c
commit
113e0c129a
|
@ -32,7 +32,7 @@ plugins:
|
||||||
|
|
||||||
pagination:
|
pagination:
|
||||||
enabled: true
|
enabled: true
|
||||||
per_page: 10
|
per_page: 5
|
||||||
permalink: '/page/:num/'
|
permalink: '/page/:num/'
|
||||||
limit: 0
|
limit: 0
|
||||||
sort_field: 'date'
|
sort_field: 'date'
|
||||||
|
|
|
@ -1,14 +1,32 @@
|
||||||
{% if paginator.total_pages > 1 %}
|
{% if paginator.total_pages > 1 %}
|
||||||
<ul>
|
<nav aria-label="Page Navigation">
|
||||||
|
<ul class="pagination">
|
||||||
|
<!-- left arrow -->
|
||||||
{% if paginator.previous_page %}
|
{% if paginator.previous_page %}
|
||||||
<li>
|
{% assign prev_url = paginator.previous_page_path | prepend: site.baseurl %}
|
||||||
<a href="{{ paginator.previous_page_path | prepend: site.baseurl }}">Newer</a>
|
{% else %}
|
||||||
</li>
|
{% assign prev_url = '' %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if paginator.next_page %}
|
|
||||||
<li>
|
<li class="page-item {% unless paginator.previous_page %}disabled{% endunless %}">
|
||||||
<a href="{{ paginator.next_page_path | prepend: site.baseurl }}">Older</a>
|
<a class="page-link" href="{{ prev_url }}" aria-label="previous-page">
|
||||||
|
<i class="fa fa-angle-left"></i>
|
||||||
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
|
<!-- right arrow -->
|
||||||
|
{% if paginator.next_page_path %}
|
||||||
|
{% assign next_url = paginator.next_page_path | prepend: site.baseurl %}
|
||||||
|
{% else %}
|
||||||
|
{% assign next_url = '#' %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</ul>
|
|
||||||
|
<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 %}
|
{% endif %}
|
||||||
|
|
|
@ -2,6 +2,7 @@
|
||||||
layout: default
|
layout: default
|
||||||
---
|
---
|
||||||
|
|
||||||
|
{% if paginator.page_path contains "index" %}
|
||||||
<p class="home-description">
|
<p class="home-description">
|
||||||
Most applications listed below are served from <a href="https://nixos.org/" target="_blank">NixOS</a>
|
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>.
|
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
|
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>.
|
credit using my <a href="https://m.do.co/c/c65b89434c1b" target="_blank">referral link</a>.
|
||||||
</p>
|
</p>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
{% for post in paginator.posts %}
|
{% for post in paginator.posts %}
|
||||||
<div class="posts-container">
|
<div class="posts-container">
|
||||||
|
|
|
@ -10,3 +10,24 @@
|
||||||
max-height: 220px;
|
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