From d283d0ccf32fdd19f02d50bc2ed077c7404270c8 Mon Sep 17 00:00:00 2001
From: Nicolas Doby <nicolas.doby@itsonus.fr>
Date: Mon, 14 Nov 2022 09:36:46 +0100
Subject: [PATCH] fix: correct tags CSS

---
 src/_components/articlesList.njk |  4 ++--
 src/_components/tagslist.njk     |  2 +-
 src/_layouts/article.njk         |  4 ++--
 src/blog_assets/css/index.scss   | 30 ++++++++++++++++--------------
 4 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/src/_components/articlesList.njk b/src/_components/articlesList.njk
index f4d098f..7ae4335 100644
--- a/src/_components/articlesList.njk
+++ b/src/_components/articlesList.njk
@@ -9,10 +9,10 @@
           <div>
             Le <time datetime="{{ article.data.date | htmlDateString }}">{{ article.data.date | readableDate }}</time> {{ article.data.authors | readableAuthors }}
           </div>
-          <ul >
+          <ul class="post-tags">
             {%- for tag in article.data.tags | filterTagList %}
               {%- set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
-              <li><a href="{{ tagUrl }}" class="post-tag">#{{ tag }}</a>{%- if not loop.last %} {% endif %}</li>
+              <li class="post-tag"><a href="{{ tagUrl }}">#{{ tag }}</a>{%- if not loop.last %} {% endif %}</li>
             {%- endfor %}
           </ul>
         </div>
diff --git a/src/_components/tagslist.njk b/src/_components/tagslist.njk
index 98b165e..c99578d 100644
--- a/src/_components/tagslist.njk
+++ b/src/_components/tagslist.njk
@@ -2,6 +2,6 @@
 <ul class="tags">
   {% for tag in collections.all | getAllTags | filterTagList %}
     {% set tagUrl %}/blog/tags/{{ tag | slugify }}/{% endset %}
-    <li><a href="{{ tagUrl }}" class="post-tag">#{{ tag }}</a></li>
+    <li class="post-tag"><a href="{{ tagUrl }}">#{{ tag }}</a></li>
   {% endfor %}
 </ul>
diff --git a/src/_layouts/article.njk b/src/_layouts/article.njk
index c9ff9cf..f84e293 100644
--- a/src/_layouts/article.njk
+++ b/src/_layouts/article.njk
@@ -9,10 +9,10 @@ templateClass: tmpl-post
     <div class="post-metadata__header">
       Le <time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time> {{ authors | readableAuthors }}
     </div>
-    <ul>
+    <ul class="post-tags article-tags">
       {%- for tag in tags | filterTagList %}
       {%- set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
-      <li><a href="{{ tagUrl }}" class="post-tag">#{{ tag }}</a>{%- if not loop.last %} {% endif %}</li>
+      <li class="post-tag"><a href="{{ tagUrl }}">#{{ tag }}</a>{%- if not loop.last %} {% endif %}</li>
       {%- endfor %}
     </ul>
   </div>
diff --git a/src/blog_assets/css/index.scss b/src/blog_assets/css/index.scss
index ba7b5e4..783c8a7 100644
--- a/src/blog_assets/css/index.scss
+++ b/src/blog_assets/css/index.scss
@@ -256,15 +256,25 @@ figure figcaption {
 }
 
 /* Tags */
+.post-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: .5rem;
+  margin: 0.5rem 0;
+  list-style: none;
+  padding: 0;
+}
 .post-tag {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--text-color);
-  background: var(--text-color-tertiary);
   padding: 4px;
-  font-size: 0.8125rem; /* 13px /16 */
   border-radius: 5px;
+  background: var(--text-color-tertiary);
+}
+.article-tags {
+  margin: 0;
+}
+.post-tag a {
+  color: var(--text-color);
+  font-size: 0.8125rem; /* 13px /16 */
   text-decoration: none;
 }
 
@@ -280,14 +290,6 @@ figure figcaption {
   flex-direction: column;
 }
 
-.post-metadata ul {
-  display: flex;
-  gap: .5em;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
 h1 + .post-metadata {
   margin: 0 0 4rem;
 }