group categories and tags metadata together

center the lists

assets/scss/_content.scss

@@ -72,6 +72,39 @@
     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 {
@@ -85,22 +118,39 @@
 
 .list {
   ul {
+    position: relative;
+    width: 100%;
     margin: 3.2rem 0 3.2rem 0;
     list-style: none;
     padding: 0;
+    @media only screen and (max-width: 768px) {
+      text-align: center;
+    }
     li {
       font-size: 1.8rem;
       @media only screen and (max-width: 768px) {
         margin: 1.6rem 0 1.6rem 0;
       }
+      @media only screen and (min-width: 768px) {
+        display: flex;
+        margin-bottom: 0.8rem;
+      }
       .date {
         display: inline-block;
-        width: 20rem;
+        width: 50%;
         text-align: right;
-        margin-right: 3rem;
+        padding-right: 1.5rem;
         @media only screen and (max-width: 768px) {
+          width: 100%;
+          text-align: center;
+          font-size: 0.9em;
           display: block;
-          text-align: left;
+          padding-right: 0;
+        }
+        @media only screen and (min-width: 768px) {
+          display: flex;
+          align-items: start;
+          justify-content: flex-end;
         }
       }
       .title {
@@ -108,6 +158,10 @@
         color: $fg-color;
         font-family: $heading-font-family;
         font-weight: $heading-font-weight--bold;
+        @media only screen and (min-width: 768px) {
+          padding-left: 1.5rem;
+          max-width: 20ch;
+        }
         &:hover,
         &:focus {
           color: $link-color;

layouts/partials/taxonomy/categories.html

@@ -1,9 +1,3 @@
-<div class="categories">
-  <i class="fas fa-folder"></i>
   {{- range $index, $el := . -}}
-    {{- if gt $index 0 }}
+    <a class="category" href="{{ ( printf "categories/%s/" ( . | urlize ) ) | relLangURL }}"><i class="icon fas fa-folder"></i>{{ . }}</a>
-      <span class="separator">•</span>
-    {{- end }}
-    <a href="{{ ( printf "categories/%s/" ( . | urlize ) ) | relLangURL }}">{{ . }}</a>
   {{- end -}}
-</div>

layouts/partials/taxonomy/tags.html

@@ -1,9 +1,3 @@
-<div class="tags">
-  <i class="fas fa-tag"></i>
   {{- range $index, $el := . -}}
-    {{- if gt $index 0 }}
+    <a class="tag" href="{{ ( printf "tags/%s/" ( . | urlize ) ) | relLangURL }}"><i class="icon fas fa-tag"></i>{{ . }}</a>
-      <span class="separator">•</span>
-    {{- end }}
-    <a href="{{ ( printf "tags/%s/" ( . | urlize ) ) | relLangURL }}">{{ . }}</a>
   {{- end -}}
-</div>

layouts/posts/single.html

@@ -21,9 +21,11 @@
               {{ i18n "reading_time" .ReadingTime }}
             </span>
           </div>
+          <div class="taxonomy">
             {{ with .Page.Params.Categories }}{{ partial "taxonomy/categories.html" . }}{{ end }}
             {{ with .Page.Params.Tags }}{{ partial "taxonomy/tags.html" . }}{{ end }}
           </div>
+        </div>
       </header>
 
       <div>