update metadata styling

assets/scss/_content.scss

@@ -38,6 +38,10 @@
       margin-bottom: 0.75em;
     }
     .post-meta {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+
       i {
         text-align: center;
         width: 1.6rem;
@@ -46,11 +50,49 @@
       }
       .date {
         .posted-on {
-          margin-left: 0;
+          // margin-left: 0;
-          margin-right: 1.5rem;
+          // margin-right: 1.5rem;
         }
       }
     }
+
+    .taxonomy {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+    }
+
+    .meta-tag {
+      padding: 0 12px;
+      margin: 3px;
+      border: 1px solid #eaeaea;
+      border-radius: 1px;
+      background-color: #ededed;
+
+      color: #333;
+
+      i {
+        font-size: 0.9em;
+      }
+
+      &--link {
+        font-size: 0.8em;
+        text-decoration: underline;
+
+        &:hover {
+          opacity: 1;
+          color: #999;
+        }
+
+        i {
+          font-size: 1em;
+        }
+      }
+
+      .icon {
+        color: inherit;
+      }
+    }
   }
   img {
     display: block;
@@ -72,39 +114,6 @@
     margin-left: auto;
     margin-right: auto;
   }
-
-  .taxonomy {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    @media only screen and (min-width: 768px) {
-      max-width: 50%;
-      margin-left: auto;
-      margin-right: auto;
-    }
-  }
-
-  .category,
-  .tag {
-    font-size: 0.8em;
-    padding: 0 12px;
-    margin: 3px;
-    border-radius: 1px;
-    background-color: #ededed;
-
-    color: #333;
-    text-decoration: none;
-
-    &:hover {
-      opacity: 1;
-      color: #555;
-      text-decoration: underline;
-    }
-
-    .icon {
-      color: inherit;
-    }
-  }
 }
 
 .avatar img {

layouts/partials/taxonomy/categories.html

@@ -1,3 +1,3 @@
   {{- range $index, $el := . -}}
-    <a class="category" href="{{ ( printf "categories/%s/" ( . | urlize ) ) | relLangURL }}"><i class="icon fas fa-folder"></i>{{ . }}</a>
+    <a class="meta-tag meta-tag--link" href="{{ ( printf "categories/%s/" ( . | urlize ) ) | relLangURL }}"><i class="icon fas fa-folder"></i>{{ . }}</a>
   {{- end -}}

layouts/partials/taxonomy/tags.html

@@ -1,3 +1,3 @@
   {{- range $index, $el := . -}}
-    <a class="tag" href="{{ ( printf "tags/%s/" ( . | urlize ) ) | relLangURL }}"><i class="icon fas fa-tag"></i>{{ . }}</a>
+    <a class="meta-tag meta-tag--link" href="{{ ( printf "tags/%s/" ( . | urlize ) ) | relLangURL }}"><i class="icon fas fa-tag"></i>{{ . }}</a>
   {{- end -}}

layouts/posts/single.html

@@ -9,17 +9,15 @@
           <h1 class="title">{{ .Title }}</h1>
         </div>
         <div class="post-meta">
-          <div class="date">
+          <div class="meta-tag posted-on">
-            <span class="posted-on">
+            <i class="fas fa-calendar"></i>
-              <i class="fas fa-calendar"></i>
+            <time datetime='{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}'>
-              <time datetime='{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}'>
+              {{ .Date.Format (.Site.Params.dateFormat | default "January 2, 2006" ) }}
-                {{ .Date.Format (.Site.Params.dateFormat | default "January 2, 2006" ) }}
+            </time>
-              </time>
+          </div>
-            </span>
+          <div class="meta-tag reading-time">
-            <span class="reading-time">
+            <i class="fas fa-clock"></i>
-              <i class="fas fa-clock"></i>
+            {{ i18n "reading_time" .ReadingTime }}
-              {{ i18n "reading_time" .ReadingTime }}
-            </span>
           </div>
           <div class="taxonomy">
             {{ with .Page.Params.Categories }}{{ partial "taxonomy/categories.html" . }}{{ end }}