diff --git a/_assets/styles/_about.scss b/_assets/styles/_about.scss index dc7c78cfd..fd22da5a2 100644 --- a/_assets/styles/_about.scss +++ b/_assets/styles/_about.scss @@ -16,10 +16,6 @@ $about-hairline: rgb(167 151 139 / 55%); // Scoped to `main` to keep the resets off the navbar and footer, which are // its siblings under the same body class. The padding replaces what // `main > .container` gives the footer elsewhere. -.about main { - padding-bottom: 104px; -} - .about main h1, .about main h2, .about main p, @@ -34,21 +30,6 @@ $about-hairline: rgb(167 151 139 / 55%); list-style: none; } -.about main a { - color: $about-link; -} - -.about main :focus-visible { - outline: 2px solid $body-color; - outline-offset: 2px; -} - -.about .wrap { - max-width: $about-wrap; - padding-inline: $about-gutter; - margin-inline: auto; -} - /* --- Head: the question -------------------------------------------------- */ // Ink, so it carries on from the navbar rather than leaving a pale band @@ -127,10 +108,6 @@ $about-hairline: rgb(167 151 139 / 55%); /* --- Shared section furniture -------------------------------------------- */ -.about .band { - padding-block: clamp(2.5rem, 6vw, 4rem); -} - .about .section-head { display: flex; flex-wrap: wrap; @@ -139,17 +116,6 @@ $about-hairline: rgb(167 151 139 / 55%); justify-content: space-between; } -.about .section-title { - font-size: 1.125rem; - font-weight: 700; - letter-spacing: -0.01em; -} - -.about .section-more { - font-family: $font-family-monospace; - font-size: 0.8125rem; -} - /* --- In practice ----------------------------------------------------------- The page's substance, so it sits on its own ground: the same secondary tone home gives its SDK section. diff --git a/_assets/styles/_docs-page.scss b/_assets/styles/_docs-page.scss index a65ebdc2e..04323fd80 100644 --- a/_assets/styles/_docs-page.scss +++ b/_assets/styles/_docs-page.scss @@ -35,24 +35,6 @@ $doc-bad-text: shade-color($quaternary, 25%); // Scoped to `main` to keep the resets off the navbar and footer, which are // its siblings under the same body class. The padding replaces what // `main > .container` gives the footer elsewhere. -.doc-page main { - padding-bottom: 104px; -} - -.doc-page main a { - color: $doc-link; -} - -.doc-page main :focus-visible { - outline: 2px solid $body-color; - outline-offset: 2px; -} - -.doc-page .wrap { - max-width: $doc-wrap; - padding-inline: $doc-gutter; - margin-inline: auto; -} /* --- Head: breadcrumb, title, Key Point --------------------------------- A flat stack, not a grid: unlike the masthead, there is no second panel diff --git a/_assets/styles/_docs.scss b/_assets/styles/_docs.scss index 1951d36c0..3474e545c 100644 --- a/_assets/styles/_docs.scss +++ b/_assets/styles/_docs.scss @@ -21,10 +21,6 @@ $docs-flag-text: shade-color($quaternary, 25%); // Scoped to `main` to keep the resets off the navbar and footer, which are // its siblings under the same body class. The padding replaces what // `main > .container` gives the footer elsewhere. -.docs-index main { - padding-bottom: 104px; -} - .docs-index main h1, .docs-index main h2, .docs-index main p, @@ -39,21 +35,6 @@ $docs-flag-text: shade-color($quaternary, 25%); list-style: none; } -.docs-index main a { - color: $docs-link; -} - -.docs-index main :focus-visible { - outline: 2px solid $body-color; - outline-offset: 2px; -} - -.docs-index .wrap { - max-width: $docs-wrap; - padding-inline: $docs-gutter; - margin-inline: auto; -} - /* --- Head -------------------------------------------------------------- */ // Ink, so it carries on from the navbar rather than leaving a pale band @@ -164,37 +145,12 @@ $docs-flag-text: shade-color($quaternary, 25%); /* --- Shared section furniture ------------------------------------------ */ -.docs-index .band { - padding-block: clamp(2.5rem, 6vw, 4rem); -} - // The handbook is the substance of this page, so it sits on its own ground. .docs-index .band-quiet { background-color: color.mix($tertiary, $body-bg, 12%); border-block: 1px solid $docs-hairline; } -.docs-index .section-head { - display: flex; - flex-wrap: wrap; - gap: 0.5rem 1rem; - align-items: baseline; - justify-content: space-between; - padding-bottom: 0.75rem; - border-bottom: 2px solid $body-color; -} - -.docs-index .section-title { - font-size: 1.125rem; - font-weight: 700; - letter-spacing: -0.01em; -} - -.docs-index .section-more { - font-family: $font-family-monospace; - font-size: 0.8125rem; -} - .docs-index .section-count { font-family: $font-family-monospace; font-size: 0.8125rem; diff --git a/_assets/styles/_home.scss b/_assets/styles/_home.scss index 9625858fc..e5eb05846 100644 --- a/_assets/styles/_home.scss +++ b/_assets/styles/_home.scss @@ -30,10 +30,6 @@ // site absorbs with the bottom padding on `main > .container`. This page has // no such container, so it needs the room itself or the footer sits on top of // the last section. -.home main { - padding-bottom: 104px; -} - .home main h1, .home main h2, .home main h3, @@ -51,15 +47,6 @@ list-style: none; } -.home main a { - color: var(--primary-deep); -} - -.home main :focus-visible { - outline: 2px solid var(--ink); - outline-offset: 2px; -} - // The masthead and the rail are ink, and so is the ring above, so it would be // invisible over exactly the section holding the links people are meant to // follow. @@ -70,11 +57,6 @@ // `wrap` is a common enough name that another page could take it later and // silently inherit these, and the widths it reads are only declared on .home. -.home .wrap { - max-width: var(--wrap); - padding-inline: var(--gutter); - margin-inline: auto; -} /* --- Masthead ------------------------------------------------------ */ @@ -509,31 +491,6 @@ /* --- Shared section furniture --------------------------------------- */ -.band { - padding-block: clamp(2.5rem, 5vw, 3.75rem); -} - -.section-head { - display: flex; - flex-wrap: wrap; - gap: 0.5rem 1rem; - align-items: baseline; - justify-content: space-between; - padding-bottom: 0.75rem; - border-bottom: 2px solid var(--ink); -} - -.section-title { - font-size: 1.125rem; - font-weight: 700; - letter-spacing: -0.01em; -} - -.section-more { - font-family: var(--mono); - font-size: 0.8125rem; -} - /* --- Latest ---------------------------------------------------------- */ .home .latest { diff --git a/_assets/styles/_news-item.scss b/_assets/styles/_news-item.scss index b9068d8bd..9b5db0fef 100644 --- a/_assets/styles/_news-item.scss +++ b/_assets/styles/_news-item.scss @@ -15,24 +15,6 @@ $news-item-hairline: rgb(167 151 139 / 55%); // Scoped to `main` to keep the resets off the navbar and footer, which are // its siblings under the same body class. The padding replaces what // `main > .container` gives the footer elsewhere. -.news-item main { - padding-bottom: 104px; -} - -.news-item main a { - color: $news-item-link; -} - -.news-item main :focus-visible { - outline: 2px solid $body-color; - outline-offset: 2px; -} - -.news-item .wrap { - max-width: $news-item-wrap; - padding-inline: $news-item-gutter; - margin-inline: auto; -} /* --- Head: title, category, date, byline ---------------------------- Three elements, each given its own margin directly; the prose below keeps diff --git a/_assets/styles/_news.scss b/_assets/styles/_news.scss index f52133e6e..2d7951873 100644 --- a/_assets/styles/_news.scss +++ b/_assets/styles/_news.scss @@ -18,10 +18,6 @@ $news-quiet-bg: color.mix($tertiary, $body-bg, 12%); // Scoped to `main` to keep the resets off the navbar and footer, which are // its siblings under the same body class. The padding replaces what // `main > .container` gives the footer elsewhere. -.news main { - padding-bottom: 104px; -} - .news main h1, .news main h2, .news main h3, @@ -39,25 +35,6 @@ $news-quiet-bg: color.mix($tertiary, $body-bg, 12%); list-style: none; } -.news main a { - color: $news-link; -} - -.news main :focus-visible { - outline: 2px solid $body-color; - outline-offset: 2px; -} - -.news .wrap { - max-width: $news-wrap; - padding-inline: $news-gutter; - margin-inline: auto; -} - -.news .band { - padding-block: clamp(2.5rem, 6vw, 4rem); -} - /* --- Head ---------------------------------------------------------- */ // Ink, so it carries on from the navbar rather than leaving a pale band @@ -216,22 +193,6 @@ $news-quiet-bg: color.mix($tertiary, $body-bg, 12%); weight. */ -.news .section-head { - display: flex; - flex-wrap: wrap; - gap: 0.5rem 1rem; - align-items: baseline; - justify-content: space-between; - padding-bottom: 0.75rem; - border-bottom: 2px solid $body-color; -} - -.news .section-title { - font-size: 1.125rem; - font-weight: 700; - letter-spacing: -0.01em; -} - .news .archive-list { margin-top: 1.75rem; } diff --git a/_assets/styles/_shell.scss b/_assets/styles/_shell.scss new file mode 100644 index 000000000..b50de42ba --- /dev/null +++ b/_assets/styles/_shell.scss @@ -0,0 +1,59 @@ +// The shell every page reads in: a centered column of a fixed maximum width, +// the sections that stack down it, and the resets that keep a page's own +// styling from reaching the navbar and the footer. + +$wrap-width: 1200px; +$wrap-gutter: clamp(1rem, 4vw, 3rem); +$shell-link: shade-color($primary, 25%); + +// The footer carries `margin-top: -60px !important`, so a page has to leave +// the room itself. +main { + padding-bottom: 104px; +} + +// The error page centers its content absolutely against the viewport and has +// no flow to pad. +.error main { + padding-bottom: 0; +} + +main a { + color: $shell-link; +} + +main :focus-visible { + outline: 2px solid $body-color; + outline-offset: 2px; +} + +.wrap { + max-width: $wrap-width; + padding-inline: $wrap-gutter; + margin-inline: auto; +} + +.band { + padding-block: clamp(2.5rem, 6vw, 4rem); +} + +.section-head { + display: flex; + flex-wrap: wrap; + gap: 0.5rem 1rem; + align-items: baseline; + justify-content: space-between; + padding-bottom: 0.75rem; + border-bottom: 2px solid $body-color; +} + +.section-title { + font-size: 1.125rem; + font-weight: 700; + letter-spacing: -0.01em; +} + +.section-more { + font-family: $font-family-monospace; + font-size: 0.8125rem; +} diff --git a/_assets/styles/main.scss b/_assets/styles/main.scss index 42c93e07d..77ccdef65 100644 --- a/_assets/styles/main.scss +++ b/_assets/styles/main.scss @@ -17,6 +17,7 @@ @import '../../node_modules/bootstrap/scss/navbar'; @import '../../node_modules/bootstrap/scss/pagination'; @import 'about'; +@import 'shell'; @import 'docs'; @import 'docs-page'; @import 'error';