|
29 | 29 | max-width: 1168px !important; |
30 | 30 | } |
31 | 31 |
|
| 32 | +/* Stabilise the scrollbar gutter. |
| 33 | +
|
| 34 | + The whole page scrolls on <html>, and the entire layout (navbar + doc) is |
| 35 | + centered within --vp-layout-max-width. Pages whose content overflows show a |
| 36 | + vertical scrollbar; pages that fit do not. On browsers that reserve space for |
| 37 | + classic scrollbars (e.g. macOS "Show scroll bars: Always", common on external |
| 38 | + monitors), that ~15px width change re-centers the layout, so the logo, nav and |
| 39 | + content column visibly shift left/right when navigating between a scrolling and |
| 40 | + a non-scrolling page (e.g. /reference/ vs /concepts/). Reserving the gutter on |
| 41 | + every page keeps the layout fixed. No-op where scrollbars are overlays. */ |
| 42 | +html { |
| 43 | + scrollbar-gutter: stable; |
| 44 | +} |
| 45 | + |
| 46 | +/* Keep internal (sidebar) pages gutter-aware so the navbar and content line up |
| 47 | + with the home page. |
| 48 | +
|
| 49 | + VitePress positions the sidebar-page navbar and main content with 100vw-based |
| 50 | + padding, e.g. padding-right: calc((100vw - var(--vp-layout-max-width)) / 2). |
| 51 | + 100vw includes the scrollbar gutter reserved above, but the home page navbar |
| 52 | + centers via 100% (gutter-aware, margin: 0 auto). On wide screens that half- |
| 53 | + gutter difference makes the navbar's right-hand items (search, version |
| 54 | + selector, social links) and the content/outline column sit ~half a scrollbar |
| 55 | + width off from the home page — so the version selector visibly shifts when |
| 56 | + navigating Home <-> any menu page. |
| 57 | +
|
| 58 | + Recomputing the same offsets with 100% instead of 100vw makes the internal |
| 59 | + pages gutter-aware too, so the home navbar, the internal-page navbars and the |
| 60 | + content/outline column all align at every width. max() floors the values so |
| 61 | + narrow viewports fall back to VitePress defaults. Revisit if VitePress changes |
| 62 | + these paddings upstream. */ |
| 63 | +@media (min-width: 1440px) { |
| 64 | + .VPNavBar.has-sidebar .content { |
| 65 | + padding-right: max(32px, calc((100% - var(--vp-layout-max-width)) / 2 + 32px)) !important; |
| 66 | + } |
| 67 | + |
| 68 | + .VPContent.has-sidebar { |
| 69 | + padding-right: max(0px, calc((100% - var(--vp-layout-max-width)) / 2)) !important; |
| 70 | + padding-left: calc(max(0px, (100% - var(--vp-layout-max-width)) / 2) + var(--vp-sidebar-width)) !important; |
| 71 | + } |
| 72 | +} |
| 73 | + |
32 | 74 |
|
33 | 75 | @media (min-width: 640px) { |
34 | 76 | :root { |
|
0 commit comments