Page shell

The page shell is what every page has around its content: the nav at the top, the grid with its rails, the footer, the round buttons in the corner, and the skip link a keyboard reader meets first.

Open at 1280px ↗

How a page is put together

---
import {
  ContentGrid, FloatingControls, Footer, SidebarCard, SkipLink, ThemeScript, ThemeToggle, TopNav
} from "@rottensea/ds-personal-website/components";
---
<html>
  <head>
    <ThemeScript />
  </head>
  <body>
    <SkipLink />
    <TopNav brand="Field Notes" links={links} active="Blog" />
    <main id="main">
      <ContentGrid>
        <Fragment slot="left">…</Fragment>
        <article>…</article>
        <Fragment slot="right">
          <SidebarCard title="Stats">…</SidebarCard>
        </Fragment>
      </ContentGrid>
    </main>
    <Footer brand="Field Notes" columns={columns} note="© 2026 Field Notes." />
    <FloatingControls>
      <ThemeToggle />
    </FloatingControls>
  </body>
</html>

Widths

The shell uses three widths and no others. Above 1080px a page can have both rails. From 768px to 1080px the right rail is gone. Below 768px everything is one column, the nav’s links become a menu button, and every button grows to the 44px touch target.

The parts

Component	What it does
TopNav	The nav bar, with a menu sheet on small screens; NavDrawer for grouped navigation
ContentGrid	The main column between a left and a right rail
SidebarCard	A card in a rail; Surface, the card body under every card
Footer	The dark band that closes the page
FloatingControls	Back to top and up to two other round buttons; IconButton
ThemeToggle	The light and dark switch; ThemeScript, which sets the theme before the first paint
SkipLink	The link past the nav for keyboard readers
Starfield	Stars that drift behind a page
DotGlobe	A turning globe of dots for a page that is one screen