Patterns
Whole pages built from the kit: a personal homepage, a paper page, a blog post, a demo, and a CV.
In this chapter 6 pages
Patterns show how the parts combine, at full size, with their own site chrome. Each page carries a banner saying its names, papers, and numbers are example content. Copy the source of a pattern to start a real page.
| Pattern | For | Built from |
|---|---|---|
| Homepage | The personal academic site, which recruiters scan and academics check. Students come to it for notes. | Top bar, mast with the complex, publication wall, notes list. |
| Paper page | One page per paper, linked from the PDF and the talk slides. | Paper header, a wide key figure, abstract, a margin figure, equations, theorem environments, citations, BibTeX. |
| Blog post | Notes and explainers, for students and for anyone reading past the abstract. | Post header, sidenotes, a margin figure, a table, equations, code. |
| Demo page | An interactive figure or a small tool that goes with a paper or a lecture. | App shell, sliders, segmented control, readout, status, the machine. |
| CV page | Where you have studied and worked. Recruiters skim the entries; the globe shows the path between them. | Mast, the Atlas. |
What stays the same on every page
- The Ultra wordmark at top left and the 3px rule under the top bar.
- One exhibit per page: a working model, a key figure, or the demo itself.
- A reading column of about 68 characters for anything longer than a paragraph.
- Tomato marks where you are and what moves, and the small marks that lead the eye there: the full stop, list markers, reference numbers.