… the full posting runs here.
… the full posting runs here.
.roles: one flex row of full job titles. At three it sits on one line and looks "
"tidy, which is the trap — look at the nine. There is no alignment to run the eye "
"down, the titles are different lengths so nothing lines up, and a wrapped row of links reads "
"as a paragraph rather than a list. Adi's objection, drawn."),
("P1", "cards", P1,
"A card per role, three across, wrapping. The count stops mattering — nine is "
"three rows, twelve is four — and every card is the same size whatever the length of its "
"title, which is the one thing a flex row cannot do. Cost: a card is a big object for a line "
"of text, so three cards take more room than three rows do, and the panel makes each role look "
"like a product."),
("P2", "ruled rows", P2,
"One row per role with the columns aligned down the page: name, place, door. Alignment is "
"exactly what the wrapping row cannot give you, and it is what makes a long list scannable "
"— the eye runs down one column instead of through a paragraph of links. The cheapest of "
"the five in vertical space per role. Cost: it is plain, and at three roles it can read as a "
"list of files rather than an invitation."),
("P3", "sticky rail", P3,
"The roles stay on screen while the postings scroll past them, so a reader deep in the third "
"posting can still see the first two exist. The sidebar round already measured what this "
"costs: a sticky block taller than the viewport has a bottom the reader can never reach, "
"so the rail is capped at calc(100vh - 48px) and scrolls inside itself — "
"which is precisely the case a long board produces. Cost: it spends 280px of width on "
"navigation for a page most visitors read once."),
("P4", "no index at all", P4,
"The postings and nothing above them. Every other option here is an index plus the postings; "
"this one asks whether the index earns its place. At three it plainly does not — "
"the three headers are visible in one and a half screens. The frames below are the posting "
"HEADERS, so the cost at nine is visible too: nine of them is nine screenfuls with nothing to "
"jump with, and the page has no way to tell a visitor what it holds."),
("P5", "grouped", P5,
"Roles under headings. The only option whose readability improves as the board grows: "
"three roles do not need grouping, nine do, and at twelve it is the difference between a list "
"and an inventory. It also answers a question none of the others do — a conveyancing "
"assistant and an articling student are not looking for the same page. The grouping is a "
"proposal derived from the titles; the firm has not published one, which is the same "
"standing the injury claims are grouped on. If it is wrong, this option is wrong in a way "
"P1–P4 are not."),
]
HEAD = """
Five ways to list the open positions on careers.html, plus the row that is on the
page today so the comparison has a baseline.
.roles is one flex row of
full job titles — at three it fits on one line and looks tidy, which is exactly the trap.
A component that only works at the count it was drawn for is not a component.
| option | at three | at nine | what it costs |
|---|---|---|---|
| P0 — today's flex row | __H0a__ | __H0b__ | no alignment; wraps into a paragraph |
| P1 — cards | __H1a__ | __H1b__ | a big object for a line of text |
| P2 — ruled rows | __H2a__ | __H2b__ | plain |
| P3 — sticky rail | __H3a__ | __H3b__ | 280px of width, always |
| P4 — no index | __H4a__ | __H4b__ | nothing to jump with |
| P5 — grouped | __H5a__ | __H5b__ | needs a taxonomy the firm has not given |
#6B6B6B 5.33:1, doors #2F7186 5.50:1, hover
#A94A29 5.68:1. Brand orange is 3.03:1 and carries no word: it is a rule and a
border, nothing else.%s
\n' '