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:
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user