From 4a4d6dd9338e31da9c27c185e34b62aebb37fdd3 Mon Sep 17 00:00:00 2001 From: gbanyan Date: Fri, 21 Nov 2025 01:29:57 +0800 Subject: [PATCH] Refine typography palette and dark heading colors --- styles/globals.css | 33 +++++++++++++++++++++++++++------ 1 file changed, 27 insertions(+), 6 deletions(-) diff --git a/styles/globals.css b/styles/globals.css index 4b08c1e..9cb8570 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -13,9 +13,24 @@ --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; + /* 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); } +.dark { + --color-ink-strong: #e2e8f0; + --color-ink-body: #cbd5e1; + --color-ink-muted: #94a3b8; + --color-accent: #a78bfa; + --color-accent-soft: #1f1a3d; +} + @media (min-width: 2560px) { :root { font-size: 20px; @@ -27,6 +42,7 @@ body { font-size: 1rem; line-height: var(--line-height-body); font-family: var(--font-system-sans); + color: var(--color-ink-body); } @keyframes timeline-scroll { @@ -95,17 +111,17 @@ body { .prose blockquote { @apply transition-transform transition-shadow duration-180 ease-snappy; 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; font-style: italic; - color: rgba(15, 23, 42, 0.75); + color: rgba(15, 23, 42, 0.78); position: relative; } .dark .prose blockquote { - background: linear-gradient(135deg, rgba(96, 165, 250, 0.12), rgba(96, 165, 250, 0.06)); - color: rgba(226, 232, 240, 0.8); - border-left-color: rgba(96, 165, 250, 0.9); + background: linear-gradient(135deg, rgba(167, 139, 250, 0.12), rgba(124, 58, 237, 0.08)); + color: rgba(226, 232, 240, 0.85); + border-left-color: rgba(167, 139, 250, 0.9); } .prose blockquote:hover { @@ -134,27 +150,32 @@ body { .prose { font-size: clamp(1rem, 0.2vw + 0.9rem, 1.2rem); line-height: var(--line-height-body); + color: var(--color-ink-body); } .prose h1 { font-size: clamp(2.2rem, 1.4rem + 2.2vw, 3.4rem); line-height: 1.25; + color: var(--color-ink-strong); } .prose h2 { font-size: clamp(1.8rem, 1.1rem + 1.6vw, 2.8rem); line-height: 1.3; + color: var(--color-ink-strong); } .prose h3 { font-size: clamp(1.4rem, 0.9rem + 1vw, 2rem); line-height: 1.35; + color: var(--color-ink-strong); } .prose p, .prose li { font-size: clamp(1rem, 0.2vw + 0.9rem, 1.15rem); line-height: var(--line-height-body); + color: var(--color-ink-body); } .prose small, @@ -596,4 +617,4 @@ body { --callout-bg-end: rgba(248, 113, 113, 0.06); --callout-title-color: #fca5a5; @apply border-red-400; -} \ No newline at end of file +}