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)
23 lines
846 B
SCSS
23 lines
846 B
SCSS
/* You can override SCSS variables here. */
|
|
// :root {
|
|
// --pagefind-ui-background: #84DE02;
|
|
// }
|
|
// $pagefind-ui-background: #84DE02;
|
|
|
|
// Site-wide font: +1pt (16px -> 17px). Every rem-based theme size scales with this.
|
|
:root {
|
|
--font-size: 17px;
|
|
}
|
|
|
|
// Widen the page so wide screens don't leave ~310px dead gutters on each side.
|
|
// (1280px cap -> 1700px; on a 1920px display the gutters drop 313px -> ~103px.)
|
|
$container-max-width: 100rem;
|
|
|
|
// Widen the left sidebar (the category list + search bar + search-results pane
|
|
// are all this one column). 12.5rem -> 18.75rem (a 50% increase, per request).
|
|
$menu-width: 18.75rem;
|
|
|
|
// $mobile-breakpoint in _defaults.scss is derived from the values above; recompute it
|
|
// so the mobile layout still collapses at the right width.
|
|
$mobile-breakpoint: $menu-width + $body-min-width * 1.2 + $toc-width;
|