💄 Arrange la liste de tag

assets/css/style.css

@@ -198,6 +198,22 @@ ba {
 
 bt {
   font-size: 12px;
+  display: inline-block;
+}
+
+ul.tag-list {
+  list-style: none;
+  display: inline-block;
+  padding: 0;
+}
+
+ul.tag-list li {
+  display: inline-block;
+}
+
+ul.tag-list li:not(:last-child):after {
+  content: ", ";
+  margin-right: 3px;
 }
 
 /* ================== PORTFOLIO IMAGES HOVER EFFECT ================== */

layouts/partials/article-labels.html

@@ -1,16 +1,19 @@
 {{- if or .Params.categories .Params.tags -}}
-<p>
+<div>
     <bt>CATÉGORIES :&nbsp;
         {{- range .Params.categories -}}
         {{- $url := print "/categories/" (. | urlize) "/" -}}
         <a class="category" href={{- $url | relLangURL -}}>{{- . -}}</a> -
         {{- end -}}
     </bt>
-    <bt>TAGS :&nbsp;
+    <bt>TAGS :&nbsp;</bt>
+    <ul class="tag-list">
         {{- range .Params.tags -}}
         {{- $url := print "/tags/" (. | urlize) "/" -}}
-        <a class="tag" href={{- $url | relLangURL -}}>{{- . -}}</a>
+        <li><a $url -}} class="tag" href={{- relLangURL |>
+            <bt>{{- . -}}</bt>
+        </a></li>
         {{- end -}}
-    </bt>
-</p>
+    </ul>
+</div>
 {{- end -}}

layouts/partials/note-labels.html

@@ -1,8 +1,8 @@
 {{- if or .Params.categories .Params.tags -}}
-    <p class="note labels">
+    <ul class="note labels tag-list">
         {{- range .Params.tags -}}
         {{- $url := print "/tags/" (. | urlize) "/" -}}
-            <a class="tag" href="{{- $url | relLangURL -}}">{{- . -}}</a>
+        <li><a class="tag" href="{{- $url | relLangURL -}}">{{- . -}}</a></li>
         {{- end -}}
-    </p>
+    </ul>
 {{- end -}}