gb/mercury
Template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Activity Actions

feat: better date colors

Browse source
This commit is contained in:
grassblock 2025-05-19 12:15:10 +08:00
parent 819bd91231
commit 9e5bf9309e
3 changed files with 19 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/pages/blog.astro
View file

@ -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;"> <div style="margin-top: 1rem; margin-left: 1rem;">
{posts.map((post) => ( {posts.map((post) => (
<p> <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> <a href={`/post/${post.slug}`}>{post.data.title}</a>
</p> </p>
))} ))}

8
src/pages/post/[...slug].astro
View file

@ -51,11 +51,3 @@ const cover = customFeaturedImage || matchedImage_src?.src || `/post/${slug}/fea
</div> </div>
</Layout> </Layout>
<style>
span.date {
color: #4c566a;
font-size: 0.9rem;
margin-bottom: 1.5rem;
display: block;
}
</style>

21
src/styles/global.css
View file

@ -4,7 +4,7 @@
/* Dark theme (default) */ /* Dark theme (default) */
--bg-color: #2e3440; --bg-color: #2e3440;
--text-color: #d8dee9; --text-color: #d8dee9;
--footer-text-color: #c8c8c8; --secondary-text-color: #c8c8c8;
--accent-color: #90a8c0; --accent-color: #90a8c0;
--border-color: #3b4351; --border-color: #3b4351;
--header-color: #eceff4; --header-color: #eceff4;
@ -18,7 +18,7 @@
:root:not([data-theme="dark"]) { :root:not([data-theme="dark"]) {
--bg-color: #eceff4; --bg-color: #eceff4;
--text-color: #2e3440; --text-color: #2e3440;
--footer-text-color: #4c566a; --secondary-text-color: #4c566a;
--accent-color: #486090; --accent-color: #486090;
--border-color: #d1d5db; --border-color: #d1d5db;
--header-color: #2e3440; --header-color: #2e3440;
@ -31,7 +31,7 @@
:root[data-theme="light"] { :root[data-theme="light"] {
--bg-color: #eceff4; --bg-color: #eceff4;
--text-color: #2e3440; --text-color: #2e3440;
--footer-text-color: #4c566a; --secondary-text-color: #4c566a;
--accent-color: #486090; --accent-color: #486090;
--border-color: #d1d5db; --border-color: #d1d5db;
--header-color: #2e3440; --header-color: #2e3440;
@ -135,7 +135,7 @@ main {
padding: 2rem 0; padding: 2rem 0;
font-size: 0.9rem; font-size: 0.9rem;
font-weight: 300; font-weight: 300;
color: var(--footer-text-color); color: var(--secondary-text-color);
} }
.footer svg { .footer svg {
@ -193,6 +193,19 @@ h1.title {
} }
div.content { div.content {
margin-bottom: 2rem; 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 { ul, ol, li {
list-style-position: inside; list-style-position: inside;