feat: better post metadata

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

1 files changed, 27 insertions, 21 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 {