feat(docs): match the homepage's widths and spacing to the updated mock

apps/docs/src/app/page.module.css

@@ -10,13 +10,14 @@
   padding-block: var(--spacing-16) var(--spacing-8);
 }
 
-/* The mock caps the intro at 1280px, narrower than the 1664px the hero and
-   the favorites span, with the heading's 768px on the left and the
-   description and button bottom-aligned beside it. */
+/* The mock caps the intro at 1440px, as it does the favorites and the
+   features, narrower than the 1664px the hero spans, with the heading's
+   768px on the left and the description and button bottom-aligned beside
+   it. */
 .introRow {
   display: flex;
   align-items: flex-end;
-  max-width: var(--container-7xl);
+  max-width: var(--container-8xl);
   margin-inline: auto;
 }
 
@@ -33,7 +34,9 @@
 }
 
 /* The description takes what the heading leaves, 16px in from it and 16px
-   from the button, and the button sits on the description's last line. */
+   from the button, and the button sits on the description's last line. At
+   the full 1440px that leaves the description 523px, which wraps it to two
+   lines with the break between "Shading" and "Language", as in the mock. */
 .lede {
   display: flex;
   flex: 1;

apps/docs/src/components/favorites/favorites-list.tsx

@@ -220,9 +220,15 @@ function LiveScene({ slug, paused }: { slug: FavoriteSlug; paused: boolean }) {
   );
 }
 
-// The card window's size at the site container's full width, in CSS pixels.
-// Every favorite renders at this size, and scripts/build-posters.sh captures
-// every favorite's card poster at it.
+// The size every favorite renders at, in CSS pixels, and the size
+// scripts/build-posters.sh captures every favorite's card poster at. It is
+// the card window's size on a 1664px grid, 17.5% larger than the 320 by 233
+// window at the grid's full 1440px, so useCoverScale scales the scene down
+// to cover the window, as it does at every narrower width. Larger draws
+// more pixels than the window shows, and shrinks patterns sized in CSS
+// pixels, such as Dither's and LED Wall's cells. Smaller than the window
+// makes useCoverScale scale the scene up, which blurs it. SHA-220 sets it
+// to the window's size.
 const SCENE_SIZE = { width: 376, height: 275 };
 
 /**

apps/docs/src/components/favorites/favorites-reveal.tsx

@@ -28,7 +28,7 @@ export function FavoritesReveal({
   className,
   children,
 }: {
-  className: string;
+  className?: string;
   children: ReactNode;
 }) {
   const gridRef = useRef<HTMLDivElement>(null);

apps/docs/src/components/favorites/favorites.module.css

@@ -1,10 +1,12 @@
 /* The favorites section, after the Figma mocks: one grid holding the
    heading and seven cards, four across at full width, with the heading in
-   the first cell so the cards fill the two rows evenly. 64px of space sits
-   above it, 32 from this section and 32 from the hero's. The phone mock
-   tightens that to 40px, 16 here and 24 under the hero. */
+   the first cell so the cards fill the two rows evenly. 96px of space sits
+   above it, 48 from this section and 48 from the hero's, and the section's
+   48px below meets the features section's 48px above to make 96 again.
+   The phone mock tightens the space above to 40px, 16 here and 24 under
+   the hero. */
 .section {
-  padding-block: var(--spacing-8);
+  padding-block: var(--spacing-12);
 }
 
 @container site (width < 40rem) {
@@ -14,33 +16,37 @@
 }
 
 /* ---- The grid ----
-   Four columns at full width, two from 64rem of the site container down,
-   and one on a phone under 40rem. Eight cells divide evenly into four or
-   two columns, so no row is left with a gap. The one column matches the
-   phone mock. The two-column band has no mock. */
+   The mock caps it at 1440px, the features section's width, so the two
+   sections' columns line up at every width. Four columns at full width,
+   two from 64rem of the site container down, and one on a phone under
+   40rem. Eight cells divide evenly into four or two columns, so no row is
+   left with a gap. The one column matches the phone mock. The two-column
+   band has no mock. */
 .grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: var(--spacing-4);
+  max-width: var(--container-8xl);
+  margin-inline: auto;
 }
 
 @container site (width < 64rem) {
   .grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 
 @container site (width < 40rem) {
   .grid {
     grid-template-columns: minmax(0, 1fr);
   }
 }
 
 /* The list's items take the grid's cells directly, so the heading and the
    cards share one set of columns. The list stays in the accessibility tree
    as a list of seven, which homepage.spec.ts checks by finding it through
    its role and the heading's name. */
 .list {
   display: contents;
   list-style: none;
 }
@@ -132,10 +138,11 @@
    (card-tab.tsx), placed as in the mock: on the window's right edge, its
    foot 16px above the window's bottom, clear of the 12px corner. Its size
    is the outline's, CARD_TAB_PATH's 24 by 168 CSS pixels, on a window at
-   least 200px tall. A shorter window would clip the strip's head, such as
-   the 143px window each of four columns gets at a 1024px viewport. There
-   the strip shortens to keep 16px clear at the top, as at the foot, and
-   the outline stretches to fit (card-tab.tsx). It comes after the
+   least 200px tall. Four columns give a 233px window at the grid's full
+   1440px, but under 1328px of site the window drops below 200px and would
+   clip the strip's head, such as the 143px window at a 1024px viewport.
+   There the strip shortens to keep 16px clear at the top, as at the foot,
+   and the outline stretches to fit (card-tab.tsx). It comes after the
    poster and the scene in the window, so it paints over both. Its slide
    and its name's fade are Motion's, set inline from card-tab.tsx, and the
    window's overflow clips the strip while it is out past the edge.

apps/docs/src/components/favorites/favorites.tsx

@@ -20,7 +20,7 @@ export function Favorites({ favorites }: { favorites: Favorite[] }) {
     // Out of the search index, like the components index: each card only
     // repeats a name its component page is already indexed under.
     <section className={`site-gutter ${styles.section}`} data-pagefind-ignore="all">
-      <FavoritesReveal className={`site-container ${styles.grid}`}>
+      <FavoritesReveal className={styles.grid}>
         <h2 className={styles.heading} id={headingId}>
           Add some fun to your website
         </h2>

apps/docs/src/components/features/features.module.css

@@ -1,6 +1,6 @@
 /* The features section, after the Figma mock: the heading 40px over a grid
-   of four feature cards, in a 1440px container, narrower than the 1664px
-   the favorites span. The section's own 48px sits above and below it. */
+   of four feature cards, in a 1440px container, the width the favorites
+   span. The section's own 48px sits above and below it. */
 .section {
   padding-block: var(--spacing-12);
 }
@@ -24,38 +24,37 @@
 
 /* ---- The grid ----
    Four columns at full width, two from 64rem of the site container down,
-   and one on a phone under 40rem: the favorites' steps. Below 1504px of
-   site, where the 1440px cap and the two 32px gutters meet, both sections
-   fill the same width, so the cards sit under the favorites' columns. The
-   mock draws only the full width. */
+   and one on a phone under 40rem: the favorites' steps. Both sections
+   share the 1440px cap and the gap, so at every width the cards sit under
+   the favorites' columns. The mock draws only the full width. */
 .grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: var(--spacing-4);
   padding: 0;
   list-style: none;
 }
 
 @container site (width < 64rem) {
   .grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 
 @container site (width < 40rem) {
   .grid {
     grid-template-columns: minmax(0, 1fr);
   }
 }
 
 /* ---- The card ----
    The mock's card is 348 by 435 with a 2px border, 24px corners, and 16px
    inside the border: the illustration's window on top, then 12px, then the
    title and description. The illustration keeps the mock's 312 by 309
    shape at any width, so the card's height follows its column and its
    copy. In a row whose copy wraps unevenly, the windows and titles still
    line up, and the shorter cards end in space below their description. */
 .card {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-3);

apps/docs/src/components/home-footer/home-footer.module.css

@@ -1,14 +1,16 @@
-/* The homepage footer, after the Figma mock: 32px around a container whose
-   own 32px on top and at the sides frame the wordmark. With the wordmark's
-   240px line, that makes the mock's 336px footer. */
+/* The homepage footer, after the Figma mock: 96px above a container whose
+   own 32px at the sides frame the wordmark, and 32px under the wordmark.
+   With the wordmark's 240px line, that makes the mock's 368px footer. The
+   features section's 48px below its grid and these 96px put 144px between
+   the grid and the wordmark. */
 .footer {
-  padding-block: var(--spacing-8);
+  padding-block: var(--spacing-24) var(--spacing-8);
 }
 
 .row {
   display: flex;
   justify-content: center;
-  padding: var(--spacing-8) var(--spacing-8) 0;
+  padding-inline: var(--spacing-8);
 }
 
 /* The mock sets the wordmark at 239.593px on its 1728px artboard, with the

apps/docs/src/components/home-hero/home-hero.module.css

@@ -39,11 +39,11 @@
 
 /* ---- Hero ---- */
 
-/* 32px above and below the stage, the hero section's padding, which keeps
-   64px between the intro and the hero's frame, and 64px between the frame
-   and the favorites with their own 32px. */
+/* 32px above the stage and 48px below it, the hero section's padding,
+   which keeps 64px between the intro and the hero's frame, and 96px
+   between the frame and the favorites with their own 48px. */
 .hero {
-  padding-block: var(--spacing-8);
+  padding-block: var(--spacing-8) var(--spacing-12);
 }
 
 /* On a phone the intro's own 24px is the space above the hero, and 24px

scripts/build-posters.sh

@@ -122,8 +122,7 @@ $CLI \
   --height 696 \
   --background "#0b0f1a"
 
-# The homepage favorites render every live scene at the card window's size
-# at the site container's full width, 376 by 275 (SCENE_SIZE in
+# The homepage favorites render every live scene at 376 by 275 (SCENE_SIZE in
 # apps/docs/src/components/favorites/favorites-list.tsx), and scale it with
 # the card. Each favorite's card poster is captured at that size, over the
 # ground its scene sits on there, so the poster frames and crops the scene