feat: better post metadata

- move tags to post header
- clearer date format
- fine-tunes link style

2 files changed, 34 insertions, 36 deletions

diff --git a/assets/css/components/_post.scss b/assets/css/components/_post.scss
index e782f854..5ab58c85 100644
--- a/assets/css/components/_post.scss
+++ b/assets/css/components/_post.scss
@@ -3,33 +3,39 @@
 
 .post-header {
   margin-bottom: 2rem;
-}
 
-.post-title {
-  font-size: 2rem;
-  font-weight: 900;
-}
+  .post-title {
+    font-size: 2rem;
+    font-weight: 900;
+  }
 
-.post-subtitle {
-  display: block;
-  color: var(--secondary-text-color);
-  font-style: italic;
-  font-size: 1.2rem;
+  .post-subtitle {
+    display: block;
+    color: var(--secondary-text-color);
+    font-style: italic;
+    font-size: 1.2rem;
+  }
 }
 
-.post-tags a {
-  display: inline-block;
-  color: var(--secondary-text-color);
-  font-size: var(--content-font-size);
-}
+.post-meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    align-items: center;
 
-.post-date {
-  color: var(--secondary-text-color)
-}
+    .post-date, .post-tag {
+      color: var(--secondary-text-color)
+    }
 
-.post-author {
-  float: right;
-  font-weight: 600;
+    .post-category {
+        background-color: var(--block-background-color);
+        font-size: 0.9rem;
+        padding: 0.2rem 0.5rem;
+        border-radius: 0.2rem;
+        &:hover {
+            text-decoration: none;
+        }
+    }
 }
 
 .page-content {
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 1df1eec9..5b64f3bc 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -32,20 +32,19 @@
           {{ end }}
         </h1>
         <!-- Post Meta -->
-        <div class="row post-desc">
-          <div class="col-xs-6">
+        <div class="post-meta">
             {{ if .Date }}
             <time class="post-date" datetime="{{ .Date.Format "2006-01-02 15:04:05 MST" }}">
-              {{ .Date.Format "02 Jan 2006" }}
+              {{ .Date.Format "2006-1-2" }}
             </time>
             {{ end }}
+            <span>·</span>
             {{ if .Params.categories }}
-              <span> / </span>
-              <span>
-                <a href="/categories/{{ .Params.categories | urlize }}">{{ .Params.categories }}</a>
-              </span>
+            <a class="post-category" href="/categories/{{ .Params.categories | urlize }}">{{ .Params.categories }}</a>
+            {{ end }}
+            {{ range .Params.tags }}
+            <a class="post-tag" href="{{ site.LanguagePrefix }}/tags/{{ lower . | urlize }}/">#{{ . }}</a>
             {{ end }}
-          </div>
         </div>
         {{ end }}
       </header>
@@ -59,13 +58,6 @@
         {{ .Content }}
       </div>
 
-      <!-- Post Tags -->
-      <div class="post-tags">
-        {{ range .Params.tags }}
-        <a class="taxonomy-tags-item" href="{{ site.LanguagePrefix }}/tags/{{ lower . | urlize }}/">#{{ . }}</a>
-        {{ end }}
-      </div>
-
       {{ if in .Site.Params.mainSections .Type }}
         {{ partial "components/comment.html" . }}
       {{ end }}