From 66debf54cf6fe217781e1eb3ce718030fadef3a7 Mon Sep 17 00:00:00 2001
From: Fredrik Jonsson <frjo@xdeb.org>
Date: Fri, 24 Feb 2023 15:52:24 +0100
Subject: [PATCH] Simplify _zen.scss by using componets classes.

---
 assets/sass/_zen.scss                         | 28 ++-----------------
 .../components/flex-inline/_flex-inline.scss  |  4 +++
 assets/sass/components/meta/_meta.scss        |  8 ++++++
 assets/sass/styles.scss                       |  1 +
 layouts/partials/dates.html                   |  4 +--
 layouts/partials/submitted.html               |  2 +-
 layouts/partials/tags.html                    |  4 +--
 7 files changed, 21 insertions(+), 30 deletions(-)
 create mode 100644 assets/sass/components/meta/_meta.scss

diff --git a/assets/sass/_zen.scss b/assets/sass/_zen.scss
index 192848f..94f0c37 100644
--- a/assets/sass/_zen.scss
+++ b/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,
diff --git a/assets/sass/components/flex-inline/_flex-inline.scss b/assets/sass/components/flex-inline/_flex-inline.scss
index 9859284..ca72a56 100644
--- a/assets/sass/components/flex-inline/_flex-inline.scss
+++ b/assets/sass/components/flex-inline/_flex-inline.scss
@@ -17,4 +17,8 @@
   li {
     list-style: none;
   }
+
+  &--inline {
+    display: inline-flex;
+  }
 }
diff --git a/assets/sass/components/meta/_meta.scss b/assets/sass/components/meta/_meta.scss
new file mode 100644
index 0000000..fcd831d
--- /dev/null
+++ b/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);
+}
diff --git a/assets/sass/styles.scss b/assets/sass/styles.scss
index 92ddd0a..cebb400 100644
--- a/assets/sass/styles.scss
+++ b/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';
diff --git a/layouts/partials/dates.html b/layouts/partials/dates.html
index 31fff9f..40af195 100644
--- a/layouts/partials/dates.html
+++ b/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>
diff --git a/layouts/partials/submitted.html b/layouts/partials/submitted.html
index b41bf73..27d58b9 100644
--- a/layouts/partials/submitted.html
+++ b/layouts/partials/submitted.html
@@ -1,3 +1,3 @@
-<div class="submitted">
+<div class="submitted meta">
 {{ partial "author-date" . }}
 </div>
diff --git a/layouts/partials/tags.html b/layouts/partials/tags.html
index 82c6d67..013d967 100644
--- a/layouts/partials/tags.html
+++ b/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 -}}