Add site-level overrides to themes/hugo-book/assets/_variables.scss
(imported after _defaults.scss, so plain assignments override the theme):
--font-size: 17px base font up from the theme's 16px (all rem
sizes scale off it)
$container-max-width: 100rem content cap up from 80rem, so a 1920px
display no longer leaves ~310px dead gutters
on each side
$menu-width: 18.75rem sidebar (category list + search box + search
results pane) up from the 10rem theme default
so search results are readable
$mobile-breakpoint recomputed from the new values (it is derived
in _defaults.scss, so the override must redo
the arithmetic or the mobile collapse breaks)
Remove the legacy Fuse.js search from html-head.html (it double-loaded
with the new Pagefind UI; backup kept at html-head.html.bkup) and add a
Pagefind Default-UI partial (search.html) injected into the sidebar via
menu.html.
Index scoping: tag the article element with data-pagefind-body in
baseof.html, term.html, and posts/{single,list}.html so Pagefind indexes
page content only (pages without the tag are skipped; 404.html stays
untagged).
search.html (all overrides #search-scoped, since pagefind-ui.css loads in
<body> after the head CSS):
- compact input/magnifier/clear-button fitted to the sidebar; clear
button uses fixed px (not %) because the results drawer is an in-flow
child of the form, which stretches the form to results height
- hide the empty .result-thumb placeholder (no images in the index) that
was pushing result text ~90px right
- restyle matched-term <mark> from UA yellow to subdued slate
- keyboard navigation (Pagefind 1.5.2 has none; stock Enter is a silent
no-op): capture-phase keydown implements ArrowUp/Down highlighting with
wraparound across top-level hits AND their nested sub-results (each sub
highlights its own .result-nested row), Enter opens the highlighted
result (or the top result), and a fingerprint-aware MutationObserver
keeps the highlight across Pagefind's async re-renders without
resetting it on every DOM patch
noether
surfninjas