feat: review the bottom navigation

pull/2/head
Nicolas Doby 2022-11-20 14:52:05 +01:00
parent 0523e7ae12
commit 23f016ecc3
2 changed files with 46 additions and 3 deletions

View File

@ -28,8 +28,18 @@ templateClass: tmpl-post
{%- if nextArticle or previousArticle %}
<nav class="post-nav">
<ul>
{%- if previousArticle %}<li class="previous">Précédent : <a href="{{ previousArticle.url }}">{{ previousArticle.data.title }}</a></li>{% endif %}
{%- if nextArticle %}<li class="next">Suivant : <a href="{{ nextArticle.url }}">{{ nextArticle.data.title }}</a></li>{% endif %}
{%- if previousArticle %}<li class="previous">
<a href="{{ previousArticle.url }}" title="Article précédent">
<span class="icon" aria-hidden="true">«</span>
<span>{{ previousArticle.data.title }}</span>
</a>
</li>{% endif %}
{%- if nextArticle %}<li class="next">
<a href="{{ nextArticle.url }}" title="Article suivant">
<span>{{ nextArticle.data.title }}</span>
<span class="icon" aria-hidden="true">»</span>
</a>
</li>{% endif %}
</ul>
</nav>
{%- endif %}

View File

@ -311,10 +311,43 @@ h1 + .post-metadata {
}
.post-nav ul {
display: flex;
gap: 1rem;
margin: 0;
justify-content: space-around;
list-style: none;
padding: 0;
margin: 2rem 1rem 0 0;
a {
display: flex;
flex-direction: row;
text-decoration: none;
align-items: center;
padding: 1.5rem;
color: var(--text-color);
height: 100%;
}
.icon {
font-size: 36px;
}
.previous, .next {
flex-basis: 50%;
background: var(--color-gray-20);
border-radius: 8px;
&:hover {
background: var(--color-gray-50);
}
}
.previous {
.icon {
margin-right: 2rem;
}
}
.next {
.icon {
margin-left: 2rem;
}
}
}
/* Direct Links / Markdown Headers */