Use bulma tags for tags

static/src/scss/_content.scss

@@ -4,11 +4,27 @@ section.content {
 }
 
 .content-details {
-  span + span {
+  & > span + span {
     margin-left: 0.5rem;
   }
 
   i {
     margin-right: 5px;
   }
+
+  .tags {
+    display: inline-flex;
+    margin-bottom: 0;
+
+    .tag {
+      background-color: unset;
+      font-size: inherit;
+      margin-bottom: 0;
+      padding: 0;
+
+      & &:not(:last-child) {
+        margin-right: 0.2rem !important;
+      }
+    }
+  }
 }

website/common/templates/common/content-details.html

@@ -6,6 +6,15 @@
   <span title="{{ page.word_count }} words"><i class="far fa-clock"></i>{{ page.reading_time }} minutes</span>
 {% endif %}
 
+{% spaceless %}
   {% if page.tags.all %}
-  <span class="is-family-code"><i class="fas fa-tags"></i>{% for tag in page.tags.all %}<a title="{{ tag.name }}">#{{ tag.slug }}</a>{% endfor %}</span>
+    <span>
+      <i class="fas fa-tags"></i>
+      <div class="tags is-family-code">
+        {% for tag in page.tags.all %}
+          <span class="tag"><a title="{{ tag.name }}">#{{ tag.slug }}</a></span>
+        {% endfor%}
+      </div>
+    <span>
   {% endif %}
+{% endspaceless %}