The docs' top bar is the app's: 4rem tall with a line under it, above the section tabs
The docs header's top row was 3.5rem and ran straight into the tabs. It is now the app's top bar (h-16, border-line), and the header grows to 6.75rem to hold it; the phone menu button stays centred in the row.
2 files+9−40/2 viewed
| 26 | 26 | flex-direction: column; | |
| 27 | 27 | height: 100%; | |
| 28 | 28 | } | |
| 29 | + | /* The same bar as the app's: 4rem, and a line under it. */ | |
| 29 | 30 | .g1t-header-top { | |
| 30 | − | height: 3.5rem; | |
| 31 | + | box-sizing: border-box; | |
| 32 | + | height: 4rem; | |
| 33 | + | flex-shrink: 0; | |
| 31 | 34 | padding: 0 var(--sl-nav-pad-x); | |
| 35 | + | border-bottom: 1px solid var(--g1t-line); | |
| 32 | 36 | } | |
| 33 | 37 | /* On phones the menu button sits at the top row's end: leave it room. */ | |
| 34 | 38 | @media (max-width: 49.99rem) { |
| 37 | 37 | --sl-text-body: 0.9375rem; | |
| 38 | 38 | --sl-line-height: 1.75; | |
| 39 | 39 | --sl-content-width: 46rem; | |
| 40 | − | /* The header's row, and the tabs beneath it. */ | |
| 41 | − | --sl-nav-height: 6.25rem; | |
| 40 | + | /* The header's row, as tall as the app's top bar (4rem), and the tabs | |
| 41 | + | beneath it. */ | |
| 42 | + | --sl-nav-height: 6.75rem; | |
| 42 | 43 | --sl-sidebar-width: 17rem; | |
| 43 | 44 | ||
| 44 | 45 | color-scheme: dark; | |
| 62 | 63 | } | |
| 63 | 64 | /* On phones the menu button sits in the header's top row, not its middle. */ | |
| 64 | 65 | .sl-menu-button { | |
| 65 | − | top: calc((3.5rem - var(--sl-menu-button-size)) / 2) !important; | |
| 66 | + | top: calc((4rem - var(--sl-menu-button-size)) / 2) !important; | |
| 66 | 67 | } | |
| 67 | 68 | site-search button[data-open-modal] { | |
| 68 | 69 | border-radius: 0.5rem; |