From 23f016ecc3982fcbfb2084dc4dc1595bf0811e18 Mon Sep 17 00:00:00 2001
From: Nicolas Doby <nicolas.doby@itsonus.fr>
Date: Sun, 20 Nov 2022 14:52:05 +0100
Subject: [PATCH] feat: review the bottom navigation

---
 src/_layouts/article.njk       | 14 ++++++++++++--
 src/blog_assets/css/index.scss | 35 +++++++++++++++++++++++++++++++++-
 2 files changed, 46 insertions(+), 3 deletions(-)

diff --git a/src/_layouts/article.njk b/src/_layouts/article.njk
index a9e5634..25d7bf2 100644
--- a/src/_layouts/article.njk
+++ b/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 %}
diff --git a/src/blog_assets/css/index.scss b/src/blog_assets/css/index.scss
index 5feba35..5db6e02 100644
--- a/src/blog_assets/css/index.scss
+++ b/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 */