Turn blog's next and previous posts into a grid container

This commit is contained in:
Helen Chong 2024-06-15 12:38:32 +08:00
parent 1614230583
commit a1da0d7f7c
1 changed files with 42 additions and 13 deletions

View File

@ -5,23 +5,52 @@ isArticle: true
{{ content | safe }} {{ content | safe }}
{%- if collections.posts %} <nav class="blog__post--pagination" aria-labelledby="blog-pagination">
<h2 class="visually-hidden">Next and Previous Blog Posts</h2>
{%- if collections.posts %}
{%- set previousPost = collections.posts | getPreviousCollectionItem %} {%- set previousPost = collections.posts | getPreviousCollectionItem %}
{%- set nextPost = collections.posts | getNextCollectionItem %} {%- set nextPost = collections.posts | getNextCollectionItem %}
{%- if nextPost or previousPost %} {%- if nextPost or previousPost %}
<ul class="blog__post--nextprev"> <ul class="blog__post--nextprev">
{%- if previousPost %}<li>Previous Post: <a href="{{ previousPost.url }}">{{ previousPost.data.articleTitle }}</a></li>{% endif %} {%- if previousPost %}
{%- if nextPost %}<li>Next Post: <a href="{{ nextPost.url }}">{{ nextPost.data.articleTitle }}</a></li>{% endif %} <li class="blog__post--prev">
<p>Previous Post:</p>
<a href="{{ previousPost.url }}">{{ previousPost.data.articleTitle }}</a>
</li>
{% endif %}
{%- if nextPost %}
<li class="blog__post--next">
<p>Next Post:</p>
<a href="{{ nextPost.url }}">{{ nextPost.data.articleTitle }}</a>
</li>
{% endif %}
</ul> </ul>
{%- endif %} {%- endif %}
{%- endif %} {%- endif %}
</nav>
<style> <style>
.blog__post--nextprev { .blog__post--pagination {
list-style: none; padding-top: 1em;
padding-left: 0;
padding-top: 0.8em;
margin-top: 2.5em; margin-top: 2.5em;
border-top: 0.1em solid var(--clr-title-border); border-top: 0.1em solid var(--clr-title-border);
} }
.blog__post--nextprev {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 0.7em;
grid-template-columns: repeat(2, 1fr);
grid-template-areas: 'prev next';
}
.blog__post--prev {
grid-area: prev;
}
.blog__post--next {
grid-area: next;
}
</style> </style>