mirror of
https://github.com/tiennm99/tsuki.git
synced 2026-05-23 10:25:30 +00:00
tiennm99
c96cea81c6
- search/list.html: Pagefind UI container + module init with full vi
i18n strings; loads /pagefind/pagefind-ui.{css,js} from generated dir
- search-button.html in header, gated by params.search.enable
- comments.html for Giscus, opt-in via params.comments.giscus.enable;
reads repo/repoId/category/categoryId/mapping/theme/lang from params
- giscus-theme.js: MutationObserver on data-theme, postMessage iframe
on toggle so Giscus theme stays in sync with site
- search.css: header-actions row, search button, Pagefind UI tokens
mapped to tsuki design tokens
- comments.css: min-block-size on iframe to prevent layout shift
- exampleSite/hugo.yaml: commented giscus params block as docs
- i18n/vi.yml: Pagefind UI strings (clear, loadMore, zeroResults...)
Both features no-op when disabled. CSS bundle 3.5 KB gz (budget 15).
44 lines
1.2 KiB
CSS
44 lines
1.2 KiB
CSS
/* tsuki: search page — Pagefind UI overrides */
|
|
|
|
.site-header-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tsuki-space-2);
|
|
margin-inline-start: var(--tsuki-space-3);
|
|
}
|
|
|
|
.search-button {
|
|
display: inline-grid;
|
|
place-items: center;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
border: 1px solid var(--tsuki-border);
|
|
border-radius: 999px;
|
|
color: var(--tsuki-fg-muted);
|
|
transition: var(--tsuki-transition);
|
|
}
|
|
.search-button:hover {
|
|
color: var(--tsuki-fg);
|
|
border-color: var(--tsuki-fg-muted);
|
|
text-decoration: none;
|
|
}
|
|
.search-button svg { width: 1rem; height: 1rem; }
|
|
|
|
.site-nav { margin-inline-start: auto; }
|
|
|
|
.search-container { margin-block: var(--tsuki-space-6); min-block-size: 6rem; }
|
|
|
|
/* Pagefind UI tokens — see https://pagefind.app/docs/ui/#styling */
|
|
:root {
|
|
--pagefind-ui-primary: var(--tsuki-accent);
|
|
--pagefind-ui-text: var(--tsuki-fg);
|
|
--pagefind-ui-background: var(--tsuki-bg);
|
|
--pagefind-ui-border: var(--tsuki-border);
|
|
--pagefind-ui-tag: var(--tsuki-code-bg);
|
|
--pagefind-ui-border-width: 1px;
|
|
--pagefind-ui-border-radius: var(--tsuki-radius);
|
|
--pagefind-ui-font: var(--tsuki-font-sans);
|
|
}
|
|
|
|
.search-noscript { color: var(--tsuki-fg-muted); }
|