💄♻️：keep the page shell in one place

_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.

_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

_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;

_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 {

_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

_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;
 }

_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;
+}

_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';