♻️ refactor: wrap tags in ul>li

Long tags will get wrapped onto new lines now.

sass/parts/_header.scss

@@ -73,6 +73,7 @@ header {
   letter-spacing: -0.5px;
   font-size: 0.8rem;
   font-weight: 300;
+  padding: 0;
   padding-top: 0.7vmin;
   padding-bottom: 3vmin;
   line-height: 1.4rem;
@@ -85,6 +86,11 @@ header {
   text-decoration: none;
 }
 
+.meta ul, li{
+  list-style-type: none;
+  display: inline;
+}
+
 .card-meta {
   color: var(--meta-color);
   font-size: 0.92rem;

templates/macros/content.html

@@ -3,43 +3,42 @@
 
 <main>
     <article>
-        <div>
-            <div class="article-title">
-                {{ page.title }}
-            </div>
-            <div class="meta">
-                {% if page.draft %}
-                <span class="draft-label">DRAFT</span>
-                {% endif %}
+        <div class="article-title">
+            {{ page.title }}
+        </div>
 
-                {% if page.date %}
-                    {{ macros_format_date::format_date(date=page.date) }}
-                    {{ separator }}
-                {% endif %}
+        <ul class="meta">
+            {% if page.draft %}
+                <span class="draft-label">DRAFT</span>
+            {% endif %}
 
-                <span title="{{ page.word_count }} words">{{ page.reading_time }} min read</span>
+            {% if page.date %}
+                <span>{{ macros_format_date::format_date(date=page.date) }}</span>
+                {{ separator }}
+            {% endif %}
 
-                {% if page.taxonomies and page.taxonomies.tags %}
-                <nav class="nav tags">&nbsp;{{ separator }}&nbsp;Tags:
-                    {% for tag in page.taxonomies.tags %}
-                    <a href={{ get_taxonomy_url(kind='tags' , name=tag) | safe }}>{{ tag }}</a>{% if not loop.last %},
-                    {% endif %}
-                    {% endfor %}
-                </nav>
-                {% endif %}
+            <span title="{{ page.word_count }} words">{{ page.reading_time }} min read</span>
 
-                {% if page.updated %}
-                    <br>Last updated on {{ macros_format_date::format_date(date=page.updated) }}
-                {% endif %}
+            {% if page.taxonomies and page.taxonomies.tags %}
+                {{ separator }}&nbsp;Tags:
+                {% for tag in page.taxonomies.tags %}
+                    <li><a href={{ get_taxonomy_url(kind='tags' , name=tag) | safe }}>{{ tag }}</a></li>
+                    {%- if not loop.last -%}
+                        ,
+                    {%- endif -%}
+                {% endfor %}
+            {% endif %}
 
-            </div>
-        </div>
+            {% if page.updated %}
+                <br><span>Last updated on {{ macros_format_date::format_date(date=page.updated) }}</span>
+            {% endif %}
+        </ul>
 
         {% if page.extra.tldr %}
-        <div class="tldr">
-            <h3>TL;DR:</h3>
-            <p>{{ page.extra.tldr }}</p>
-        </div>
+            <div class="tldr">
+                <h3>TL;DR:</h3>
+                <p>{{ page.extra.tldr }}</p>
+            </div>
         {% endif %}
 
         {# Optional table of contents #}