fix: correct tags CSS

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>

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>

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>

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;
 }