group categories and tags metadata together

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 {
@@ -204,27 +237,3 @@
     }
   }
 }
-
-.categories,
-.tags {
-  a {
-    font-size: 0.9em;
-    padding: 3px 6px 4px;
-    margin: 0 0.21em;
-    // box-shadow: 0 2px 3px 0 #cbcbcb, 0 2px 2px #dedede inset;
-    border-radius: 3px;
-    background-color: #e2e2e2;
-
-    color: #757575;
-    text-decoration: none;
-
-    &:hover {
-      opacity: 1;
-      color: #3a3a3a;
-    }
-  }
-
-  .icon {
-    color: inherit;
-  }
-}

layouts/partials/taxonomy/categories.html

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

layouts/partials/taxonomy/tags.html

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

layouts/posts/single.html

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