Turn blog's next and previous posts into a grid container
This commit is contained in:
parent
1614230583
commit
a1da0d7f7c
|
@ -5,23 +5,52 @@ isArticle: true
|
|||
|
||||
{{ content | safe }}
|
||||
|
||||
{%- if collections.posts %}
|
||||
{%- set previousPost = collections.posts | getPreviousCollectionItem %}
|
||||
{%- set nextPost = collections.posts | getNextCollectionItem %}
|
||||
{%- if nextPost or previousPost %}
|
||||
<ul class="blog__post--nextprev">
|
||||
{%- if previousPost %}<li>Previous Post: <a href="{{ previousPost.url }}">{{ previousPost.data.articleTitle }}</a></li>{% endif %}
|
||||
{%- if nextPost %}<li>Next Post: <a href="{{ nextPost.url }}">{{ nextPost.data.articleTitle }}</a></li>{% endif %}
|
||||
</ul>
|
||||
<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 nextPost = collections.posts | getNextCollectionItem %}
|
||||
{%- if nextPost or previousPost %}
|
||||
<ul class="blog__post--nextprev">
|
||||
{%- if previousPost %}
|
||||
<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>
|
||||
{%- endif %}
|
||||
{%- endif %}
|
||||
{%- endif %}
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
.blog__post--nextprev {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
padding-top: 0.8em;
|
||||
.blog__post--pagination {
|
||||
padding-top: 1em;
|
||||
margin-top: 2.5em;
|
||||
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>
|
Loading…
Reference in New Issue