feat: review the bottom navigation

src/_layouts/article.njk

@@ -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 %}

src/blog_assets/css/index.scss

@@ -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 */