Better style on next/prev

This commit is contained in:
Zach Leatherman 2024-04-24 17:26:21 -05:00
parent 26303bb5f1
commit 02b4fdf991
2 changed files with 13 additions and 3 deletions

View File

@ -21,8 +21,8 @@ layout: layouts/base.njk
{%- set nextPost = collections.posts | getNextCollectionItem %} {%- set nextPost = collections.posts | getNextCollectionItem %}
{%- if nextPost or previousPost %} {%- if nextPost or previousPost %}
<ul class="links-nextprev"> <ul class="links-nextprev">
{%- if previousPost %}<li>Previous: <a href="{{ previousPost.url }}">{{ previousPost.data.title }}</a></li>{% endif %} {%- if previousPost %}<li class="links-nextprev-prev">← Previous<br> <a href="{{ previousPost.url }}">{{ previousPost.data.title }}</a></li>{% endif %}
{%- if nextPost %}<li>Next: <a href="{{ nextPost.url }}">{{ nextPost.data.title }}</a></li>{% endif %} {%- if nextPost %}<li class="links-nextprev-next">Next →<br><a href="{{ nextPost.url }}">{{ nextPost.data.title }}</a></li>{% endif %}
</ul> </ul>
{%- endif %} {%- endif %}
{%- endif %} {%- endif %}

View File

@ -106,10 +106,19 @@ header:after {
} }
.links-nextprev { .links-nextprev {
list-style: none; display: flex;
justify-content: space-between;
gap: .5em 1em;
list-style: "";
border-top: 1px dashed var(--color-gray-20); border-top: 1px dashed var(--color-gray-20);
padding: 1em 0; padding: 1em 0;
} }
.links-nextprev > * {
flex-grow: 1;
}
.links-nextprev-next {
text-align: right;
}
table { table {
margin: 1em 0; margin: 1em 0;
@ -137,6 +146,7 @@ pre:not([class*="language-"]) {
white-space: pre; white-space: pre;
word-spacing: normal; word-spacing: normal;
word-break: normal; word-break: normal;
overflow-x: auto;
} }
code { code {
word-break: break-all; word-break: break-all;