Home page walking skeleton: the proof-sheet hero with the install command #62

Parent

#61

What to build

Build the walking skeleton of thirdshift.app: a home page that opens locally and shows the approved hero. It establishes the look every later ticket builds on.

• Site directory: a site directory in the repository, with plain HTML, one shared stylesheet, and no build step or dependencies (see Spec: thirdshift.app, a site that shows how the factory works #61, "Stack").

• Shared stylesheet:

  • the prototype's ink set A tokens and the "Subtle" effects (halftone 35%, misregistration 1px, scanlines 12%);
  • the faint blueprint grid;
  • a [hidden] { display: none !important; } reset.

  The token values are in Spec: thirdshift.app, a site that shows how the factory works #61 and in the prototype on branch prototype/site at 5b559d0.

• Fonts:

  • Big Shoulders Display 800, JetBrains Mono and Playfair Display italic from Google Fonts;
  • the "The Third Shift" wordmark either as inline SVG or in a UnifrakturMaguntia subset, so it doesn't delay the first paint. The prototype's shortcut of loading every font in full must not be copied.

• Hero ("Proof, compact", prototype hero D):

  • a paper-white proof sheet with crop marks, registration marks and a colour bar;
  • the blackletter wordmark heading the sheet, with its slug;
  • the headline "Your issues go to press overnight." at clamp(44px, 7.2vw, 100px);
  • on the left, the Day shift / third shift framing sentence from CONTEXT.md and "Built on Matt Pocock's skills", linking https://www.aihero.dev/skills and https://github.com/mattpocock/skills;
  • on the right, printed on the sheet, the install block: curl -fsSL https://thirdshift.app/install.sh | sh with a copy button, and a toggle revealing curl -LsSf https://github.com/JacobStephens2/thirdshift/releases/latest/download/thirdshift-installer.sh | sh.

  The hero is never faded in from invisible.

• Footer: GitHub, releases, licence, and credit to Matt Pocock's skills.

• Page extras: a registration-mark SVG favicon, a robots.txt that allows everything, and a page title and description.

Serve it with python3 -m http.server and compare it with the prototype at /prototype/?h=D&p=D&t=A&mode=motion&fx=subtle.

Acceptance criteria

• The home page opens from a plain static file server, with no build step and no npm dependencies.
• The hero matches prototype hero D, and the install command is on the first screen at laptop (1440×900) and phone (390×844) sizes.
• Copy puts the short install command on the clipboard, and the toggle reveals the full GitHub command.
• Colours come from CSS custom properties with the ink set A values, and process magenta is used only for large text and fills.
• The wordmark doesn't block rendering: it's either inline SVG or a subset font.
• The hero is visible on first paint, with no opacity or fade-in animation.
• The footer, favicon, robots.txt, title and description are present.
• Screenshots at both sizes are attached to the pull request.

Blocked by

None (can start immediately)