xaymar/com.xaymar.www
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add proper pagination

Browse Source
This commit is contained in:
Michael Fabian 'Xaymar' Dirks
2022-11-25 22:44:47 +01:00
parent a935052987
commit dffbe447d6
4 changed files with 72 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_layouts/index.liquid
+18 -3
View File
@@ -14,13 +14,28 @@
{% if paginator.total_pages > 1 %}
<ul class="pager">
{% if paginator.previous_page %}
<li class="previous">
<a href="{{ paginator.previous_page_path | absolute_url }}">&larr; Newer Posts</a>
<li class="first">
<a href="{{ paginator.first_page_path | absolute_url }}" alt="Oldest Entries">&laquo</a>
</li>
<li class="prev">
<a href="{{ paginator.previous_page_path | absolute_url }}" alt="Older Entries">&larr;</a>
</li>
{% endif %}
{% if paginator.page_trail %}
{% for trail in paginator.page_trail %}
<li class="page{% if page.url == trail.path %} selected{% endif %}">
<a href="{{ trail.path | absolute_url }}">{{ trail.num }}</a>
</li>
{% endfor %}
{% endif %}
{% if paginator.next_page %}
<li class="next">
<a href="{{ paginator.next_page_path | absolute_url }}">Older Posts &rarr;</a>
<a href="{{ paginator.next_page_path | absolute_url }}" alt="Newer Entries">&rarr;</a>
</li>
<li class="last">
<a href="{{ paginator.last_page_path | absolute_url }}" alt="Newest Entries">&raquo;</a>
</li>
{% endif %}
</ul>
_sass/_base.scss
+9
View File
@@ -47,6 +47,15 @@ $theme-button-background: hsl($theme-hue, 100%, 30.0%);
$theme-button-background-active: hsl($theme-hue, 100%, 50%);
$theme-button-color: hsl($theme-hue, 0%, 100%);
$theme-button-color-active: hsl($theme-hue, 100%, 100%);
$theme-pagination-background: hsl($theme-hue, 50%, 10%);
$theme-pagination-background-active: hsl($theme-hue, 100%, 50%);
$theme-pagination-background-selected: hsl($theme-hue, 100%, 33%);
$theme-pagination-shadow: 0px 3px 6px 1px hsla(0, 0, 0, 0.75);
$theme-pagination-shadow-active: 0px 3px 6px 1px hsla(0, 0, 0, 0.75);
$theme-pagination-shadow-selected: 0px 3px 6px 1px hsla(0, 0, 0, 0.75);
$theme-pagination-color: $theme-content-color;
$theme-pagination-color-active: hsl($theme-hue, 100%, 100%);
$theme-pagination-color-selected: hsl($theme-hue, 100%, 50%);
* {
box-sizing: border-box;
_sass/_content.scss
+1
View File
@@ -11,3 +11,4 @@ body > .content {
@import "_blocks.scss";
@import "_comments.scss";
@import "_index.scss";
@import "_pagination.scss";
_sass/_pagination.scss
+44
View File
@@ -0,0 +1,44 @@
.pager {
display: block;
width: fit-content;
margin: 1rem auto;
padding: 0;
list-style: none inside;
}
.pager > li {
display: inline-block;
margin: 0 .25rem;
padding: 0;
font-weight: bold;
font-size: 1.333rem;
line-height: 1.333rem;
vertical-align: top;
background: $theme-pagination-background;
box-shadow: $theme-pagination-shadow;
color: $theme-pagination-color;
}
.pager > li:hover,
.pager > li:focus {
background: $theme-pagination-background-active;
box-shadow: $theme-pagination-shadow-active;
color: $theme-pagination-color-active;
}
.pager > .selected {
background: $theme-pagination-background-selected;
box-shadow: $theme-pagination-shadow-selected;
color: $theme-pagination-color-selected;
}
.pager > li > a {
display: block;
margin: 0;
padding: 0;
text-align: center;
line-height: 2.5rem;
width: 5rem;
height: 2.5rem;
}