mirror of
https://github.com/tiennm99/tsuki.git
synced 2026-08-08 22:26:13 +00:00
tiennm99
d1828c9590
Headline outcomes: - Feature parity with Stack/PaperMod on Tier A polish: breadcrumbs (+BreadcrumbList JSON-LD), prev/next post navigation (rel=prev/next), language switcher UI (gated on hugo.IsMultilingual), code-copy button polish, <details> styling. - Per-page-kind CSS bundles: core loads everywhere; home/single/archive/ search bundles load only where needed. Frees ~1 KB gz from non-post pages. code-copy.js gated to post pages. - Lighthouse-relevant network polish: Pagefind UI CSS preload-swap, conditional preconnect to giscus.app on comment-enabled posts, hreflang alternates on multilingual sites, <meta name=theme-color> light/dark variants, aria-pressed SSR-rendered on theme-toggle. - WCAG AA contrast: --tsuki-fg-subtle darkened to #6b6b6b (light); was 3.54:1 on bg, now 5:1. Pagination disabled uses --tsuki-fg-muted without opacity compound. Header tap targets bumped to 40×40; pagination to 44×44. - i18n: full i18n/en.yml mirror (~50 keys); render-heading aria-label i18n-driven via linkToSection key; new keys for breadcrumb*, prevPost, nextPost, copyCode, copiedCode. - Discovery: /llm.txt output format (llmstxt.org) on home; Speculation Rules opt-in via params.prefetch.enable. - <html lang> fallback: site.Language.LanguageCode → Lang → "en" (was hard-coded "vi"). Per-kind bundle gz sizes on demo: home 3673 / post 4167 / list 2897 / archives 3363 / search 3179 B (all under 4200 B cap). Plan: plans/260510-0144-tsuki-v0.3.0/
75 lines
2.1 KiB
CSS
75 lines
2.1 KiB
CSS
/* tsuki: design tokens — colors, type scale, spacing */
|
|
|
|
:root {
|
|
--tsuki-bg: #fbfaf7;
|
|
--tsuki-fg: #1a1a1a;
|
|
--tsuki-fg-muted: #666;
|
|
--tsuki-fg-subtle: #6b6b6b;
|
|
--tsuki-border: #e5e3dd;
|
|
--tsuki-accent: #4a6fa5;
|
|
--tsuki-accent-hover: #2c4a7a;
|
|
--tsuki-code-bg: #f1efe9;
|
|
--tsuki-selection-bg: #d4dff0;
|
|
--tsuki-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 4px 12px rgb(0 0 0 / 0.04);
|
|
|
|
--tsuki-font-sans: "Inter", "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
|
|
--tsuki-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
|
|
--tsuki-font-serif: "Source Serif 4", Georgia, "Iowan Old Style", serif;
|
|
|
|
--tsuki-fs-xs: 0.8125rem;
|
|
--tsuki-fs-sm: 0.9375rem;
|
|
--tsuki-fs-base: 1rem;
|
|
--tsuki-fs-lg: 1.125rem;
|
|
--tsuki-fs-xl: 1.375rem;
|
|
--tsuki-fs-2xl: 1.75rem;
|
|
--tsuki-fs-3xl: 2.25rem;
|
|
|
|
--tsuki-lh-tight: 1.3;
|
|
--tsuki-lh-body: 1.7;
|
|
|
|
--tsuki-space-1: 0.25rem;
|
|
--tsuki-space-2: 0.5rem;
|
|
--tsuki-space-3: 0.75rem;
|
|
--tsuki-space-4: 1rem;
|
|
--tsuki-space-6: 1.5rem;
|
|
--tsuki-space-8: 2rem;
|
|
--tsuki-space-12: 3rem;
|
|
--tsuki-space-16: 4rem;
|
|
|
|
--tsuki-radius: 0.375rem;
|
|
--tsuki-radius-lg: 0.625rem;
|
|
|
|
--tsuki-content-width: 42rem;
|
|
--tsuki-wide-width: 64rem;
|
|
|
|
--tsuki-transition: 180ms ease;
|
|
}
|
|
|
|
:where([data-theme="dark"]) {
|
|
--tsuki-bg: #14151a;
|
|
--tsuki-fg: #ececec;
|
|
--tsuki-fg-muted: #a0a0a0;
|
|
--tsuki-fg-subtle: #777;
|
|
--tsuki-border: #2a2c33;
|
|
--tsuki-accent: #8ab0ea;
|
|
--tsuki-accent-hover: #b1c8f0;
|
|
--tsuki-code-bg: #1c1e25;
|
|
--tsuki-selection-bg: #2a3a5a;
|
|
--tsuki-shadow: 0 1px 2px rgb(0 0 0 / 0.2), 0 4px 12px rgb(0 0 0 / 0.25);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:where(:root:not([data-theme="light"])) {
|
|
--tsuki-bg: #14151a;
|
|
--tsuki-fg: #ececec;
|
|
--tsuki-fg-muted: #a0a0a0;
|
|
--tsuki-fg-subtle: #777;
|
|
--tsuki-border: #2a2c33;
|
|
--tsuki-accent: #8ab0ea;
|
|
--tsuki-accent-hover: #b1c8f0;
|
|
--tsuki-code-bg: #1c1e25;
|
|
--tsuki-selection-bg: #2a3a5a;
|
|
--tsuki-shadow: 0 1px 2px rgb(0 0 0 / 0.2), 0 4px 12px rgb(0 0 0 / 0.25);
|
|
}
|
|
}
|