assets/scss/_content.scss

@@ -72,39 +72,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 {
@@ -118,39 +85,22 @@
 
 .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: 50%;
+        width: 20rem;
         text-align: right;
-        padding-right: 1.5rem;
+        margin-right: 3rem;
         @media only screen and (max-width: 768px) {
-          width: 100%;
-          text-align: center;
-          font-size: 0.9em;
           display: block;
-          padding-right: 0;
+          text-align: left;
-        }
-        @media only screen and (min-width: 768px) {
-          display: flex;
-          align-items: start;
-          justify-content: flex-end;
         }
       }
       .title {
@@ -158,10 +108,6 @@
         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,3 +1,9 @@
+<div class="categories">
+  <i class="fas fa-folder"></i>
   {{- range $index, $el := . -}}
-    <a class="category" href="{{ ( printf "categories/%s/" ( . | urlize ) ) | relLangURL }}"><i class="icon fas fa-folder"></i>{{ . }}</a>
+    {{- if gt $index 0 }}
+      <span class="separator">•</span>
+    {{- end }}
+    <a href="{{ ( printf "categories/%s/" ( . | urlize ) ) | relLangURL }}">{{ . }}</a>
   {{- end -}}
+</div>

layouts/partials/taxonomy/tags.html

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

layouts/posts/single.html

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