theme: bump base font to 17px and widen the page + sidebar

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)
This commit is contained in:
noether
2026-10-11 08:59:34 -06:00
parent 0d24df31ad
commit dd06c50374
+17
View File
@@ -3,3 +3,20 @@
// --pagefind-ui-background: #84DE02; // --pagefind-ui-background: #84DE02;
// } // }
// $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;