feat: separate footer color & font to meet accessibility guidelines

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

View file

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

8
pnpm-lock.yaml generated
View file

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

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;">
{posts.map((post) => (
<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>
</p>
))}

View file

@ -1,22 +1,24 @@
@import url(@fontsource/space-mono);
@import url(@fontsource-variable/jetbrains-mono);
/* Global Styles for Terminal Blog */
:root {
/* Dark theme (default) */
--bg-color: #2e3440;
--text-color: #d8dee9;
--footer-text-color: #c8c8c8;
--accent-color: #90a8c0;
--border-color: #3b4351;
--header-color: #eceff4;
--terminal-green: #a3be8c;
--terminal-yellow: #ebcb8b;
--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 */
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) {
--bg-color: #eceff4;
--text-color: #2e3440;
--footer-text-color: #4c566a;
--accent-color: #486090;
--border-color: #d1d5db;
--header-color: #2e3440;
@ -29,6 +31,7 @@
:root[data-theme="light"] {
--bg-color: #eceff4;
--text-color: #2e3440;
--footer-text-color: #4c566a;
--accent-color: #486090;
--border-color: #d1d5db;
--header-color: #2e3440;
@ -130,8 +133,8 @@ main {
text-align: center;
padding: 2rem 0;
font-size: 0.9rem;
color: var(--text-color);
opacity: 0.7;
font-weight: 300;
color: var(--footer-text-color);
}
.footer svg {