fix: correct tag display

src/_components/postslist.njk

@@ -5,13 +5,17 @@
         <h2>
           <a href="{{ post.url }}" class="post-list-link">{% if post.data.title %}{{ post.data.title }}{% else %}<code>{{ post.url }}</code>{% endif %}</a>
         </h2>
-        <ul class="post-metadata">
-          <li class="post-metadata__header">Le <time datetime="{{ post.data.date | htmlDateString }}">{{ post.data.date | readableDate }}</time> {{ post.data.authors | readableAuthors }}</li>
+        <div class="post-metadata">
+          <div>
+            Le <time datetime="{{ post.data.date | htmlDateString }}">{{ post.data.date | readableDate }}</time> {{ post.data.authors | readableAuthors }}
+          </div>
+          <ul >
             {%- for tag in post.data.tags | filterTagList %}
               {%- set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
               <li><a href="{{ tagUrl }}" class="post-tag">#{{ tag }}</a>{%- if not loop.last %} {% endif %}</li>
             {%- endfor %}
           </ul>
+        </div>
       </header>
       <p>{{ post.data.resume }}</p>
     <footer  class="post-list-footer">

src/_layouts/post.njk

@@ -4,15 +4,17 @@ templateClass: tmpl-post
 ---
 <h1>{{ title }}</h1>
 
-<ul class="post-metadata">
-  <li class="post-metadata__header">
+<div class="post-metadata">
+  <div class="post-metadata__header">
     Le <time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time> {{ authors | readableAuthors }}
-  </li>
+  </div>
+  <ul>
     {%- 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>
     {%- endfor %}
   </ul>
+</div>
 
 {{ content | safe }}
 

src/assets/css/index.scss

@@ -269,22 +269,26 @@ figure figcaption {
 .post-metadata {
   display: flex;
   gap: .5em;
-  list-style: none;
-  padding: 0;
-  margin: 0;
+  font-size: 0.8125rem; /* 13px /16 */
+  color: var(--text-color-sub);
 }
 
 .post-list .post-metadata {
   flex-direction: column;
 }
 
+.post-metadata ul {
+  display: flex;
+  gap: .5em;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
 h1 + .post-metadata {
   margin: 0 0 4rem;
 }
-.post-list time {
-  font-size: 0.8125rem; /* 13px /16 */
-  color: var(--text-color-sub);
-}
+
 .post-metadata .post-metadata__header {
   flex-grow: 1;
   font-size: 0.8125rem; /* 13px /16 */
@@ -424,6 +428,13 @@ pre[class*="language-diff-"] {
     padding-left: 0;
     padding-top: 5rem;
   }
+  h1 + .post-metadata {
+    flex-direction: column;
+  }
+
+  h1 + .post-metadata ul {
+    flex-wrap: wrap;
+  }
   .main-footer {
     flex-direction: column-reverse;
     height: auto;