mirror of
https://github.com/tiennm99/tsuki.git
synced 2026-05-31 18:20:28 +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/
48 lines
1.9 KiB
CSS
48 lines
1.9 KiB
CSS
/* tsuki: per-post extras — breadcrumbs, prev/next, details, code-copy polish, TOC narrow */
|
||
|
||
.breadcrumbs {
|
||
margin-block-end: var(--tsuki-space-4);
|
||
font-size: var(--tsuki-fs-sm);
|
||
color: var(--tsuki-fg-muted);
|
||
}
|
||
.breadcrumbs ol {
|
||
list-style: none; padding: 0; margin: 0;
|
||
display: flex; flex-wrap: wrap; gap: var(--tsuki-space-2);
|
||
}
|
||
.breadcrumbs li + li::before { content: "›"; margin-inline-end: var(--tsuki-space-2); color: var(--tsuki-fg-subtle); }
|
||
.breadcrumbs a { color: var(--tsuki-fg-muted); }
|
||
.breadcrumbs a:hover { color: var(--tsuki-fg); }
|
||
.breadcrumbs [aria-current="page"] { color: var(--tsuki-fg); }
|
||
|
||
.prev-next {
|
||
display: grid; grid-template-columns: 1fr 1fr; gap: var(--tsuki-space-4);
|
||
margin-block-start: var(--tsuki-space-12);
|
||
padding-block-start: var(--tsuki-space-6);
|
||
border-block-start: 1px solid var(--tsuki-border);
|
||
}
|
||
.prev-next a {
|
||
display: flex; flex-direction: column; gap: var(--tsuki-space-1);
|
||
padding: var(--tsuki-space-3);
|
||
border: 1px solid var(--tsuki-border); border-radius: var(--tsuki-radius);
|
||
color: var(--tsuki-fg); text-decoration: none; min-block-size: 3rem;
|
||
}
|
||
.prev-next a:hover { border-color: var(--tsuki-fg-muted); }
|
||
.prev-next-next { text-align: end; }
|
||
.prev-next-label { font-size: var(--tsuki-fs-xs); color: var(--tsuki-fg-muted); }
|
||
.prev-next-title { font-weight: 550; }
|
||
@media (max-width: 32rem) {
|
||
.prev-next { grid-template-columns: 1fr; }
|
||
.prev-next-next { text-align: start; }
|
||
}
|
||
|
||
details {
|
||
border: 1px solid var(--tsuki-border); border-radius: var(--tsuki-radius);
|
||
padding: var(--tsuki-space-3) var(--tsuki-space-4);
|
||
margin-block: var(--tsuki-space-4);
|
||
}
|
||
details > summary { cursor: pointer; font-weight: 550; }
|
||
details[open] > summary { margin-block-end: var(--tsuki-space-3); }
|
||
|
||
.code-copy:hover { background: var(--tsuki-code-bg); }
|
||
.code-copy[data-state="copied"] { opacity: 1; color: var(--tsuki-accent); border-color: var(--tsuki-accent); }
|