From 9e5bf9309e3777bfdc1af3c21eb03a90506614d1 Mon Sep 17 00:00:00 2001
From: grassblock <hi@imgb.space>
Date: Mon, 19 May 2025 12:15:10 +0800
Subject: [PATCH] feat: better date colors

---
 src/pages/blog.astro           |  2 +-
 src/pages/post/[...slug].astro | 10 +---------
 src/styles/global.css          | 21 +++++++++++++++++----
 3 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/pages/blog.astro b/src/pages/blog.astro
index 5c4ce59..d3b3a7d 100644
--- a/src/pages/blog.astro
+++ b/src/pages/blog.astro
@@ -17,7 +17,7 @@ posts.sort((a, b) => new Date(b.data.pubDate).getTime() - new Date(a.data.pubDat
       <div style="margin-top: 1rem; margin-left: 1rem;">
         {posts.map((post) => (
           <p>
-            <span style="color: #d8d8d8">{new Date(post.data.pubDate).toISOString().split('T')[0]}</span>
+            <span class="list-date">{new Date(post.data.pubDate).toISOString().split('T')[0]}</span>
             <a href={`/post/${post.slug}`}>{post.data.title}</a>
           </p>
         ))}
diff --git a/src/pages/post/[...slug].astro b/src/pages/post/[...slug].astro
index a81740e..9f28920 100644
--- a/src/pages/post/[...slug].astro
+++ b/src/pages/post/[...slug].astro
@@ -50,12 +50,4 @@ const cover = customFeaturedImage || matchedImage_src?.src || `/post/${slug}/fea
     <a href="/blog">&larr; Back to posts</a>
   </div>
 
-</Layout>
-<style>
-span.date {
-    color: #4c566a;
-    font-size: 0.9rem;
-    margin-bottom: 1.5rem;
-    display: block;
-}
-</style>
\ No newline at end of file
+</Layout>
\ No newline at end of file
diff --git a/src/styles/global.css b/src/styles/global.css
index 3cc34a8..d7aca76 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -4,7 +4,7 @@
   /* Dark theme (default) */
   --bg-color: #2e3440;
   --text-color: #d8dee9;
-  --footer-text-color: #c8c8c8;
+  --secondary-text-color: #c8c8c8;
   --accent-color: #90a8c0;
   --border-color: #3b4351;
   --header-color: #eceff4;
@@ -18,7 +18,7 @@
   :root:not([data-theme="dark"]) {
     --bg-color: #eceff4;
     --text-color: #2e3440;
-    --footer-text-color: #4c566a;
+    --secondary-text-color: #4c566a;
     --accent-color: #486090;
     --border-color: #d1d5db;
     --header-color: #2e3440;
@@ -31,7 +31,7 @@
 :root[data-theme="light"] {
   --bg-color: #eceff4;
   --text-color: #2e3440;
-  --footer-text-color: #4c566a;
+  --secondary-text-color: #4c566a;
   --accent-color: #486090;
   --border-color: #d1d5db;
   --header-color: #2e3440;
@@ -135,7 +135,7 @@ main {
   padding: 2rem 0;
   font-size: 0.9rem;
   font-weight: 300;
-  color: var(--footer-text-color);
+  color: var(--secondary-text-color);
 }
 
 .footer svg {
@@ -193,6 +193,19 @@ h1.title {
 }
 div.content {
   margin-bottom: 2rem;
+  span.date {
+    color: var(--secondary-text-color);
+    font-size: 0.9rem;
+    font-weight: 300;
+    margin-bottom: 1.5rem;
+    display: block;
+  }
+  span.list-date {
+    color: var(--secondary-text-color);
+    font-size: 0.9rem;
+    font-weight: 300;
+    margin-bottom: 1.5rem;
+  }
 
   ul, ol, li {
     list-style-position: inside;