gbanyan/blog-nextjs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine typography palette and dark heading colors

Browse Source
This commit is contained in:
gbanyan
2025-11-21 01:29:57 +08:00
parent 7bf2c4149d
commit 4a4d6dd933
1 changed files with 27 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
styles/globals.css
View File

@@ -13,9 +13,24 @@
--font-weight-semibold: 600; --font-weight-semibold: 600;
--font-system-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'PingFang TC', 'PingFang SC', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Segoe UI Variable Text', 'Segoe UI', 'Microsoft JhengHei', 'Microsoft YaHei', 'Noto Sans TC', 'Noto Sans SC', 'Noto Sans CJK TC', 'Noto Sans CJK SC', 'Source Han Sans TC', 'Source Han Sans SC', 'Roboto', 'Ubuntu', 'Cantarell', 'Inter', 'Helvetica Neue', Arial, sans-serif; --font-system-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'PingFang TC', 'PingFang SC', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Segoe UI Variable Text', 'Segoe UI', 'Microsoft JhengHei', 'Microsoft YaHei', 'Noto Sans TC', 'Noto Sans SC', 'Noto Sans CJK TC', 'Noto Sans CJK SC', 'Source Han Sans TC', 'Source Han Sans SC', 'Roboto', 'Ubuntu', 'Cantarell', 'Inter', 'Helvetica Neue', Arial, sans-serif;
/* Ink + accent palette */
--color-ink-strong: #0f172a;
--color-ink-body: #1f2937;
--color-ink-muted: #475569;
--color-accent: #7c3aed;
--color-accent-soft: #f4f0ff;
font-size: clamp(15px, 0.65vw + 11px, 19px); font-size: clamp(15px, 0.65vw + 11px, 19px);
} }
.dark {
--color-ink-strong: #e2e8f0;
--color-ink-body: #cbd5e1;
--color-ink-muted: #94a3b8;
--color-accent: #a78bfa;
--color-accent-soft: #1f1a3d;
}
@media (min-width: 2560px) { @media (min-width: 2560px) {
:root { :root {
font-size: 20px; font-size: 20px;
@@ -27,6 +42,7 @@ body {
font-size: 1rem; font-size: 1rem;
line-height: var(--line-height-body); line-height: var(--line-height-body);
font-family: var(--font-system-sans); font-family: var(--font-system-sans);
color: var(--color-ink-body);
} }
@keyframes timeline-scroll { @keyframes timeline-scroll {
@@ -95,17 +111,17 @@ body {
.prose blockquote { .prose blockquote {
@apply transition-transform transition-shadow duration-180 ease-snappy; @apply transition-transform transition-shadow duration-180 ease-snappy;
border-left: 4px solid var(--color-accent, #2563eb); border-left: 4px solid var(--color-accent, #2563eb);
background: linear-gradient(135deg, rgba(37, 99, 235, 0.04), rgba(37, 99, 235, 0.08)); background: linear-gradient(135deg, rgba(124, 58, 237, 0.06), rgba(124, 58, 237, 0.1));
padding: 1.2rem 1.5rem; padding: 1.2rem 1.5rem;
font-style: italic; font-style: italic;
color: rgba(15, 23, 42, 0.75); color: rgba(15, 23, 42, 0.78);
position: relative; position: relative;
} }
.dark .prose blockquote { .dark .prose blockquote {
background: linear-gradient(135deg, rgba(96, 165, 250, 0.12), rgba(96, 165, 250, 0.06)); background: linear-gradient(135deg, rgba(167, 139, 250, 0.12), rgba(124, 58, 237, 0.08));
color: rgba(226, 232, 240, 0.8); color: rgba(226, 232, 240, 0.85);
border-left-color: rgba(96, 165, 250, 0.9); border-left-color: rgba(167, 139, 250, 0.9);
} }
.prose blockquote:hover { .prose blockquote:hover {
@@ -134,27 +150,32 @@ body {
.prose { .prose {
font-size: clamp(1rem, 0.2vw + 0.9rem, 1.2rem); font-size: clamp(1rem, 0.2vw + 0.9rem, 1.2rem);
line-height: var(--line-height-body); line-height: var(--line-height-body);
color: var(--color-ink-body);
} }
.prose h1 { .prose h1 {
font-size: clamp(2.2rem, 1.4rem + 2.2vw, 3.4rem); font-size: clamp(2.2rem, 1.4rem + 2.2vw, 3.4rem);
line-height: 1.25; line-height: 1.25;
color: var(--color-ink-strong);
} }
.prose h2 { .prose h2 {
font-size: clamp(1.8rem, 1.1rem + 1.6vw, 2.8rem); font-size: clamp(1.8rem, 1.1rem + 1.6vw, 2.8rem);
line-height: 1.3; line-height: 1.3;
color: var(--color-ink-strong);
} }
.prose h3 { .prose h3 {
font-size: clamp(1.4rem, 0.9rem + 1vw, 2rem); font-size: clamp(1.4rem, 0.9rem + 1vw, 2rem);
line-height: 1.35; line-height: 1.35;
color: var(--color-ink-strong);
} }
.prose p, .prose p,
.prose li { .prose li {
font-size: clamp(1rem, 0.2vw + 0.9rem, 1.15rem); font-size: clamp(1rem, 0.2vw + 0.9rem, 1.15rem);
line-height: var(--line-height-body); line-height: var(--line-height-body);
color: var(--color-ink-body);
} }
.prose small, .prose small,