Simplify _zen.scss by using componets classes.

assets/sass/_zen.scss

@@ -35,8 +35,6 @@ figcaption {
 }
 
 .language-selector,
-article > header,
-.content-dates,
 .footer {
   font-size: var(--fs-xs);
 }
@@ -47,8 +45,6 @@ th,
 nav,
 label,
 legend,
-article > header,
-.content-dates,
 .header,
 .footer {
   color: var(--color-headings);
@@ -74,11 +70,6 @@ aside {
 }
 
 article {
-  & > header {
-    @include margin-bottom(.75);
-    color: var(--color-text-meta);
-  }
-
   .submitted,
   .tags {
     @include respond-to(s) {
@@ -89,21 +80,8 @@ article {
 
   .tags {
     ul {
-      display: inline-flex;
-      flex-wrap: wrap;
       margin: 0;
-      padding: 0;
     }
-
-    li {
-      list-style: none;
-      padding-right: .4rem;
-    }
-  }
-
-  .content-dates {
-    color: var(--color-text-meta);
-    text-align: right;
   }
 
   code {
@@ -136,11 +114,11 @@ article {
   margin-bottom: .2rem;
 }
 
-.meta {
-  color: var(--color-text-meta);
-  font-size: var(--fs-s);
+.content-dates {
+  text-align: right;
 }
 
+
 // Figure and image.
 
 figure,

assets/sass/components/flex-inline/_flex-inline.scss

@@ -17,4 +17,8 @@
   li {
     list-style: none;
   }
+
+  &--inline {
+    display: inline-flex;
+  }
 }

assets/sass/components/meta/_meta.scss

@@ -0,0 +1,8 @@
+// Style for meta content.
+
+.meta,
+%meta {
+  font-family: var(--ff-headings);
+  font-size: var(--fs-xs);
+  color: var(--color-text-meta);
+}

assets/sass/styles.scss

@@ -46,6 +46,7 @@
 @import 'components/language-selector/language-selector';
 @import 'components/list-straight-left/list-straight-left';
 @import 'components/messages/messages';
+@import 'components/meta/meta';
 @import 'components/responsive-video/responsive-video';
 @import 'components/stretch/stretch';
 @import 'components/visually-hidden/visually-hidden';

layouts/partials/dates.html

@@ -1,4 +1,4 @@
-<p class="content-dates">
+<div class="content-dates meta">
 {{ i18n "last_mod" }} {{ .Lastmod.Format ($.Param "dateformat" | default "2 January, 2006") }}<br>
 {{ i18n "created" }} {{ .Date.Format ($.Param "dateformat" | default "2 January, 2006") }}
-</p>
+</div>

layouts/partials/submitted.html

@@ -1,3 +1,3 @@
-<div class="submitted">
+<div class="submitted meta">
 {{ partial "author-date" . }}
 </div>

layouts/partials/tags.html

@@ -1,6 +1,6 @@
-<div class="tags">
+<div class="tags meta">
 {{ i18n "taxo_tags" }}:
-<ul>
+<ul class="flex-inline flex-inline--inline">
 {{ range (.GetTerms "tags") -}}
 <li><a href="{{ .Permalink }}">{{ .LinkTitle }}</a></li>
 {{ end -}}