From af2f4231e10317a80d9c75b7abc99bd24faec141 Mon Sep 17 00:00:00 2001 From: Hunter Garrett Date: Fri, 9 Oct 2026 08:28:13 -0400 Subject: [PATCH] feat(docs): match the homepage's widths and spacing to the updated mock The updated mock caps the intro and the favorites at 1440px, the width the features section already uses, and gives the hero, the favorites, and the footer more vertical space. - The intro row caps at --container-8xl, up from --container-7xl, so the lede wraps to two lines at full width. - The hero section's bottom padding grows from 32px to 48px. - The favorites grid caps itself at 1440px in place of the 1664px site container, and the section's padding grows from 32px to 48px. - The footer's top padding grows from 32px to 96px, and its container drops its own 32px on top. Comments that cited the old widths and gaps now cite the new ones. The phone values are unchanged. FavoritesReveal's className is now optional, because a CSS module class is typed string | undefined. --- apps/docs/src/app/page.module.css | 13 +++++--- .../components/favorites/favorites-list.tsx | 12 +++++-- .../components/favorites/favorites-reveal.tsx | 2 +- .../components/favorites/favorites.module.css | 31 ++++++++++++------- .../src/components/favorites/favorites.tsx | 2 +- .../components/features/features.module.css | 11 +++---- .../home-footer/home-footer.module.css | 12 ++++--- .../components/home-hero/home-hero.module.css | 8 ++--- scripts/build-posters.sh | 3 +- 9 files changed, 55 insertions(+), 39 deletions(-) diff --git a/apps/docs/src/app/page.module.css b/apps/docs/src/app/page.module.css index 356110a1..487157b2 100644 --- a/apps/docs/src/app/page.module.css +++ b/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; diff --git a/apps/docs/src/components/favorites/favorites-list.tsx b/apps/docs/src/components/favorites/favorites-list.tsx index ff8ef99a..60decbbf 100644 --- a/apps/docs/src/components/favorites/favorites-list.tsx +++ b/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 }; /** diff --git a/apps/docs/src/components/favorites/favorites-reveal.tsx b/apps/docs/src/components/favorites/favorites-reveal.tsx index e1e19009..afe3cf65 100644 --- a/apps/docs/src/components/favorites/favorites-reveal.tsx +++ b/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(null); diff --git a/apps/docs/src/components/favorites/favorites.module.css b/apps/docs/src/components/favorites/favorites.module.css index 86af21c3..99aedea2 100644 --- a/apps/docs/src/components/favorites/favorites.module.css +++ b/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,14 +16,18 @@ } /* ---- 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) { @@ -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. diff --git a/apps/docs/src/components/favorites/favorites.tsx b/apps/docs/src/components/favorites/favorites.tsx index 33e9b8de..f1bcaaad 100644 --- a/apps/docs/src/components/favorites/favorites.tsx +++ b/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.
- +

Add some fun to your website

diff --git a/apps/docs/src/components/features/features.module.css b/apps/docs/src/components/features/features.module.css index 671d2f93..bb0e4adf 100644 --- a/apps/docs/src/components/features/features.module.css +++ b/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,10 +24,9 @@ /* ---- 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)); diff --git a/apps/docs/src/components/home-footer/home-footer.module.css b/apps/docs/src/components/home-footer/home-footer.module.css index 5e68884a..f449ea42 100644 --- a/apps/docs/src/components/home-footer/home-footer.module.css +++ b/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 diff --git a/apps/docs/src/components/home-hero/home-hero.module.css b/apps/docs/src/components/home-hero/home-hero.module.css index c8ed5d88..24af4782 100644 --- a/apps/docs/src/components/home-hero/home-hero.module.css +++ b/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 diff --git a/scripts/build-posters.sh b/scripts/build-posters.sh index 300df755..f7e02fef 100755 --- a/scripts/build-posters.sh +++ b/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