Refactor content details to use tags

static/src/scss/_content.scss

@@ -4,26 +4,20 @@ section.content {
 }
 
 .content-details {
-  & > 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) {
+  .control {
-        margin-right: 0.2rem !important;
+    font-size: inherit;
+
+    &:not(:last-child) {
+      margin-right: 0.5rem !important;
+    }
+
+    &.page-tags {
+      .tag:not(:first-child) {
+        padding-right: 0;
       }
     }
   }

static/src/scss/_hero.scss

@@ -61,6 +61,7 @@ section.hero {
   }
 
   .content-details {
+    font-size: 90%;
     margin-bottom: 0.5rem;
   }
 }

static/src/scss/_listing.scss

@@ -20,8 +20,9 @@
     max-height: 175px;
   }
 
-  .subtitle {
+  .content-details {
-    margin-bottom: 0.25rem !important;
+    font-size: 80%;
+    margin-top: $subtitle-negative-margin;
   }
 
   .media-content .content {

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

@@ -1,20 +1,31 @@
-{% if page.date %}
+<div class="content-details field is-grouped is-grouped-multiline {{extra_classes}}">
-  <span title="{{ page.date }}"><i class="far fa-calendar-alt"></i>{{ page.date|date:"Y-m-d" }}</span>
-{% endif %}
 
-{% if page.reading_time %}
+  {% if page.date %}
-  <span title="{{ page.word_count }} words"><i class="far fa-clock"></i>{{ page.reading_time }} minutes</span>
+    <div class="control">
-{% endif %}
+      <div class="tags has-addons">
-
+        <span class="tag is-dark"><i class="far fa-calendar-alt"></i></span>
-{% spaceless %}
+        <span class="tag is-light">{{ page.date|date:"Y-m-d" }}</span>
-  {% if page.tags.all %}
+      </div>
-    <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 %}
+
+  {% if page.reading_time %}
+    <div class="control">
+      <div class="tags has-addons">
+        <span class="tag is-dark"><i class="far fa-clock"></i></span>
+        <span class="tag is-light" title="{{ page.word_count }} words">{{ page.reading_time }} minutes</span>
+      </div>
+    </div>
+  {% endif %}
+
+  {% if page.tags.all %}
+    <div class="control page-tags">
+      <div class="tags has-addons">
+        <span class="tag is-dark"><i class="fas fa-tags"></i></span>
+        {% for tag in page.tags.all %}
+          <span class="tag is-white"><a title="{{ tag.name }}">#{{ tag.slug }}</a></span>
+        {% endfor %}
+      </div>
+    </div>
+  {% endif %}
+</div>

website/common/templates/common/hero.html

@@ -14,9 +14,8 @@
           {% if page.subtitle %}
             <h2 class="subtitle">{{ page.subtitle }}</h2>
           {% endif %}
-          <h3 class="is-size-6 content-details">
+
           {% include "common/content-details.html" %}
-          </h3>
         </div>
         <div class="column is-narrow dropdown-wrapper is-hidden-touch is-grouped">
           {% if page.table_of_contents %}

website/common/templates/common/listing-item.html

@@ -12,7 +12,7 @@
     <div class="media-content column">
       <div>
         <h2 class="title is-3"><a href="{% pageurl page %}">{{ page.title }}</a></h2>
-        <h3 class="subtitle is-6 content-details">{% include "common/content-details.html" %}</h3>
+        {% include "common/content-details.html" %}
         {% lorem 1 p %}
       </div>
     </div>