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

feat: separate footer color & font to meet accessibility guidelines

Browse source
This commit is contained in:
grassblock 2025-05-19 11:31:45 +08:00
parent c7b86e53ae
commit 44186453a4
4 changed files with 13 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -16,7 +16,7 @@
"@astrojs/node": "^9.2.1", "@astrojs/node": "^9.2.1",
"@astrojs/rss": "^4.0.1", "@astrojs/rss": "^4.0.1",
"@astrojs/sitemap": "^3.3.1", "@astrojs/sitemap": "^3.3.1",
"@fontsource/space-mono": "^5.2.5", "@fontsource-variable/jetbrains-mono": "^5.2.5",
"astro": "^5.2.5", "astro": "^5.2.5",
"fuse.js": "^7.0.0", "fuse.js": "^7.0.0",
"sharp": "^0.34.1", "sharp": "^0.34.1",

8
pnpm-lock.yaml generated
View file

@ -23,7 +23,7 @@ importers:
'@astrojs/sitemap': '@astrojs/sitemap':
specifier: ^3.3.1 specifier: ^3.3.1
version: 3.3.1 version: 3.3.1
'@fontsource/space-mono': '@fontsource-variable/jetbrains-mono':
specifier: ^5.2.5 specifier: ^5.2.5
version: 5.2.5 version: 5.2.5
astro: astro:
@ -548,8 +548,8 @@ packages:
resolution: {integrity: sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==} resolution: {integrity: sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==}
engines: {node: '>=14'} engines: {node: '>=14'}
'@fontsource/space-mono@5.2.5': '@fontsource-variable/jetbrains-mono@5.2.5':
resolution: {integrity: sha512-yFU6K17ko4LEDHl5554n6mCrmDbuc2xYGCZZkCRpAvRtCaJisUjxFdDdph2d2hiIElaiMlinmkmV8IWlbQCMJA==} resolution: {integrity: sha512-G3sN1xq1moZd0JL+hFaA4MEdsiQS+JXC/z7m+EqA5/Fzn5CQlXGUaaNKFGQdDsFuLTnCfW0KOOSWHjygNfjEPw==}
'@hapi/hoek@9.3.0': '@hapi/hoek@9.3.0':
resolution: {integrity: sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ==} resolution: {integrity: sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ==}
@ -3755,7 +3755,7 @@ snapshots:
'@fastify/busboy@2.1.1': {} '@fastify/busboy@2.1.1': {}
'@fontsource/space-mono@5.2.5': {} '@fontsource-variable/jetbrains-mono@5.2.5': {}
'@hapi/hoek@9.3.0': {} '@hapi/hoek@9.3.0': {}

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: #4c566a">{new Date(post.data.pubDate).toISOString().split('T')[0]}</span> <span style="color: #d8d8d8">{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>
))} ))}

11
src/styles/global.css
View file

@ -1,22 +1,24 @@
@import url(@fontsource/space-mono); @import url(@fontsource-variable/jetbrains-mono);
/* Global Styles for Terminal Blog */ /* Global Styles for Terminal Blog */
:root { :root {
/* Dark theme (default) */ /* Dark theme (default) */
--bg-color: #2e3440; --bg-color: #2e3440;
--text-color: #d8dee9; --text-color: #d8dee9;
--footer-text-color: #c8c8c8;
--accent-color: #90a8c0; --accent-color: #90a8c0;
--border-color: #3b4351; --border-color: #3b4351;
--header-color: #eceff4; --header-color: #eceff4;
--terminal-green: #a3be8c; --terminal-green: #a3be8c;
--terminal-yellow: #ebcb8b; --terminal-yellow: #ebcb8b;
--terminal-red: #bf616a; --terminal-red: #bf616a;
--font-mono: 'Space Mono',ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --font-mono: 'JetBrains Mono',ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
} }
/* Light theme */ /* Light theme */
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
: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;
--accent-color: #486090; --accent-color: #486090;
--border-color: #d1d5db; --border-color: #d1d5db;
--header-color: #2e3440; --header-color: #2e3440;
@ -29,6 +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;
--accent-color: #486090; --accent-color: #486090;
--border-color: #d1d5db; --border-color: #d1d5db;
--header-color: #2e3440; --header-color: #2e3440;
@ -130,8 +133,8 @@ main {
text-align: center; text-align: center;
padding: 2rem 0; padding: 2rem 0;
font-size: 0.9rem; font-size: 0.9rem;
color: var(--text-color); font-weight: 300;
opacity: 0.7; color: var(--footer-text-color);
} }
.footer svg { .footer svg {