feat: add style for date and categories

src/_layouts/post.html

@@ -2,9 +2,13 @@
 layout: base
 ---
 
-<p>{{ date }}</p>
+<article class="flow">
-<h1>{{ title }}</h1>
+    <header class="flow" style="--flow-space: 1rem">
-<ul>
+        <time class="date" datetime="{{ date }}">{{ date | formatDate("MMMM D, YYYY") }}</time>
-    {% for category in categories %}<li>#{{ category }}</li>{% endfor %}
+        <h1>{{ title }}</h1>
-</ul>
+        <ul class="categories">
-{{ content | safe }}
+            {% for category in categories %}<li>{{ category }}</li>{% endfor %}
+        </ul>
+    </header>
+    {{ content | safe }}
+</article>

src/assets/css/blocks/categories.css

@@ -0,0 +1,14 @@
+.categories {
+  color: var(--color-text-soft);
+  display: flex;
+  gap: 1rem;
+  list-style-type: none;
+  margin-block-end: 0;
+  padding: 0;
+}
+
+.categories li::before {
+  content: "#";
+  margin-inline-end: 0.125rem;
+  user-select: none;
+}

src/assets/css/blocks/date.css

@@ -0,0 +1,3 @@
+.date {
+  color: var(--color-text-soft);
+}

src/assets/css/global.css

@@ -3,4 +3,5 @@
 
 @import "global/global-styles.css";
 
+@import-glob "blocks/*.css";
 @import-glob "utils/*.css";

src/assets/css/global/global-styles.css

@@ -54,6 +54,7 @@ a {
   color: currentColor;
   text-decoration-color: var(--color-primary);
   text-decoration-thickness: 2px;
+  transition: text-decoration-color var(--transition-duration);
 }
 
 a:hover,
@@ -75,7 +76,7 @@ ol li::marker {
 }
 
 blockquote {
-  border-inline-start: 2px solid var(--color-primary-faded);
+  border-inline-start: 2px solid var(--color-text-soft);
   margin-inline-start: 0;
   padding-inline: 1rem;
 }

src/assets/css/global/variables.css

@@ -8,6 +8,7 @@
 
   --color-bg: var(--color-light);
   --color-text: var(--color-dark);
+  --color-text-soft: var(--color-neutral-600);
   --color-primary: var(--color-aqua-400);
   --color-primary-highlight: var(--color-aqua-300);
   --color-primary-subtle: var(--color-aqua-500);