FIT VERDICTmeta — the sheet chrome every plate is set in, dimensioned: 33 instances, one geometry; 57 variables measured in chromium at 1440 and 390 wide or read from chrome.mjs; the 1.5 px frame draws at 1 px
the SHEET, DIMENSIONED
APPENDIX · META — the sheet every plate is set in, as a dimensional drawing: the double frame, the head, the plate and its fill button, the schedule, the caption, the notes and the title block, in codes · 33 instances, one geometry · measured at www/atlas @ eca2d156, outside the cabinet
SPACING — padding, margins and insets
| code | variable | value | source | formula |
|---|---|---|---|---|
| S1 | inner rule inset (::before) | 8 px | measured @1440 and @390 | — |
| S1R | inner rule offset from the outer edge | 9 px | derived | B + S1 |
| S2 | sheet padding | 22 px | measured @1440 and @390 | — |
| S2C | clearance, inner rule to content | 13 px | derived | S2 − S1 − B2 |
| S3 | sheet margin-block-end | 40 px | measured @1440 and @390 | — |
| S4 | sheet-head padding-block-start | 4 px | measured @1440 and @390 | — |
| S5 | sheet-head padding-block-end | 10 px | measured @1440 and @390 | — |
| S6 | sheet-head margin-block-end | 18 px | measured @1440 and @390 | — |
| S7 | sheet-title margin-block-end | 4 px | measured @1440 and @390 | — |
| code | variable | value | source | formula |
|---|---|---|---|---|
| S8 | sheet-sub margin-block-end | 16 px | measured @1440 and @390 | — |
| S9 | plate margin-block-start | 36 px | measured @1440 and @390 | — |
| S10 | plate margin-block-end | 8 px | measured @1440 and @390 | — |
| S11 | fill button raise above the plate | 4 px | measured @1440 and @390 | calc(100% + 4px) |
| S12 | figcaption padding-inline-start | 22 px | measured @1440 | — |
| S12 | figcaption padding-inline-start | 14 px | measured @390 | — |
| S13 | notes-grid padding-block-start | 16 px | measured @1440 and @390 | — |
| S14 | title block cell padding-inline | 10 px | measured @1440 and @390 | — |
| S15 | title block cell padding-block-start | 6 px | measured @1440 and @390 | — |
SIZE — borders, widths, heights and squares
| code | variable | value | source | formula |
|---|---|---|---|---|
| B | sheet border, declared | 1.5 px | chrome.mjs | — |
| B | sheet border, as chromium draws it | 1 px | measured @1440 and @390 | — |
| B2 | inner rule | 1 px | measured @1440 and @390 | — |
| W | sheet width | 1,153.13 px | measured @1440 | — |
| W | sheet width | 366 px | measured @390 | — |
| H1 | sheet-head height | 34.28 px | measured @1440 | — |
| H1 | sheet-head height | 67.53 px | measured @390 | — |
| B3 | sheet-head rule | 1 px | measured @1440 and @390 | — |
| W1 | plate width | 1,107.13 px | measured @1440 | — |
| W1 | plate width | 320 px | measured @390 | — |
| W2 | drawing min-width | 1,000 px | measured @1440 and @390 | — |
| W3 | drawing width | 1,107.13 px | measured @1440 | max(W2, min(W1, min(84vh, 1400px) · AR)) |
| W3 | drawing width | 1,000 px | measured @390 | max(W2, min(W1, min(84vh, 1400px) · AR)) |
| AR | plate aspect ratio (--plate-ar, sheet 7) | 1.88 | measured @1440 and @390 | — |
| CAP | plate height cap (--plate-cap) | min(84vh, 1400px) | chrome.mjs | — |
| Z1 | fill button width · HUG | 74.58 px | measured @1440 and @390 | — |
| code | variable | value | source | formula |
|---|---|---|---|---|
| Z2 | fill button height | 23.5 px | measured @1440 and @390 | — |
| B4 | schedule frame, declared | 1.5 px | chrome.mjs | — |
| B4 | schedule frame, as chromium draws it | 1 px | measured @1440 and @390 | — |
| B5 | figcaption rule, declared | 1.5 px | chrome.mjs | — |
| B5 | figcaption rule, as chromium draws it | 1 px | measured @1440 and @390 | — |
| W4 | figcaption width | 731.13 px | measured @1440 | min(calc(750px + 45.5px), calc(100% - 352px - 24px)) past 1180 wide |
| W4 | figcaption width | 320 px | measured @390 | min(calc(750px + 45.5px), calc(100% - 352px - 24px)) past 1180 wide |
| W5 | key column (--inset) | 352 px | measured @1440 and @390 | — |
| W6 | keyblock width | 352 px | measured @1440 | — |
| W6 | keyblock width | 320 px | measured @390 | — |
| W7 | title block width | 352 px | measured @1440 | min(460px, 100%) |
| W7 | title block width | 320 px | measured @390 | min(460px, 100%) |
| B6 | title block frame, declared | 1.5 px | chrome.mjs | — |
| B6 | title block frame, as chromium draws it | 1 px | measured @1440 and @390 | — |
| Z3 | chop | 14 px | measured @1440 and @390 | — |
TYPE — lettering sizes
| code | variable | value | source | formula |
|---|---|---|---|---|
| T1 | sheet-title size | 24 px | measured @1440 | clamp(18px, 0.25rem + 2.25vw, 24px) |
| T1 | sheet-title size | 18 px | measured @390 | clamp(18px, 0.25rem + 2.25vw, 24px) |
| T2 | sheet-sub size | 12 px | measured @1440 and @390 | — |
| T3 | fill button lettering | 9.5 px | measured @1440 and @390 | — |
| T4 | schedule cell size | 12 px | measured @1440 and @390 | — |
| T5 | schedule head size | 9.5 px | measured @1440 and @390 | — |
| T6 | figcaption size | 16 px | measured @1440 | — |
| T6 | figcaption size | 15 px | measured @390 | — |
| T7 | notes paragraph size | 18 px | measured @1440 and @390 | — |
| T8 | key row size | 11.5 px | measured @1440 and @390 | — |
GRID — tracks, counts and positions
| code | variable | value | source | formula |
|---|---|---|---|---|
| N | schedule split (rows past N set two tables) | 16 rows | chrome.mjs | — |
| G1 | notes-grid columns | 731.125px 352px | measured @1440 | — |
| G1 | notes-grid columns | 320px | measured @390 | — |
| G2 | notes-grid gap | 24 px | measured @1440 and @390 | — |
| G3 | notes column count | 1 | measured @1440 and @390 | calc((100cqw - var(--inset) - var(--inset-gap)) / 38rem) |
| G4 | notes column gap | 44 px | measured @1440 and @390 | — |
| K | keyblock position | sticky | measured @1440 | — |
| K | keyblock position | static | measured @390 | — |
| G5 | title block columns | 175px 175px | measured @1440 | — |
| G5 | title block columns | 159px 159px | measured @390 | — |
| G6 | title block cells | 8 cells | measured @1440 and @390 | — |
| P | body padding, bare plate | 40 px | measured @1440 | clamp(12px, 0.25rem + 2.7vw, 40px) |
| P | body padding, bare plate | 14.53 px | measured @390 | clamp(12px, 0.25rem + 2.7vw, 40px) |
| P2 | body padding, routed app | 0 px | measured @1440 and @390 | — |
| ST | --sticky-top, bare plate | 12 px | measured @1440 and @390 | — |
| ST2 | --sticky-top, routed app (app/index.html) | 46 px | measured @1440 and @390 | ST raised to 46px for the utility bar |
GENERAL NOTES
Method — the built app, measured. generator/ serves the built app and reads one routed sheet, /, the cover and the bare plate in chromium at 1440 and 390 wide, after document.fonts.ready: every box the chrome draws, by getBoundingClientRect and getComputedStyle. A constant the CSS cannot show, such as the schedule split SCHEDULE_SPLIT, and every clamp expression are read off chrome.mjs's own source and filed as their own rows. A missing selector stops the probe; the cover's frame and the routed sheet's must agree at both widths. The plate is data/, 75 rows of 57 codes at www/atlas @ eca2d156: the atlas is not on main, so the plate stands outside the cabinet, as the other self-portraits do.
Codes, not numbers. The drawing letters codes; the values stand in the schedules. S is spacing, B a border or rule, W a width, H a height, Z a square, T a lettering size, G a grid track or count. A derived row carries its formula: the inner rule stands 9 px in from the outer edge, B + S1. A row the two widths agree on is one row; a row they part on is two, one per width. The idiom is dimensional-drawing by enesozturk (MIT), after Apple's accessory dimensional drawings: codes on the drawing, every code a row of a schedule, derived values written as formulas, nothing invented. The atlas sets it in its own chrome, in both themes, with colour kept editorial.
What the drawing says. The chrome declares a 1.5 px frame on the sheet, the schedules, the caption's rule and the title block, and chromium draws each at 1 px at a device pixel ratio of 2; the inner rule's offset follows the frame it is drawn by. Every corner is square. At 390 wide the head wraps to 67.53 px against 34.28, the title steps down its clamp from 24 to 18 px, the drawing keeps its 1000 px floor and scrolls inside a 320 px wrap, and the key leaves its sticky seat to stand under the notes.
The grid. The row along the foot lays the chrome's tracks as hairlines over a schematic sheet at each measured width, the way the NASA Graphics Standards Manual (NHB 1430.2, 1976, in NASA's later reprint) draws its grid over a spread and then blocks the elements in, on pages 5.14–5.16: the empty sheet, the grid alone, the elements set on it as grey slots. The grid is the outer frame, the inner rule S1 in, the content edge, the notes grid's tracks G1 with the G2 gutter between them, the title block's two G5 tracks, and at 1440 wide the key's top, the edge that rides ST under the viewport on the bare plate and ST2 in the routed app. At 390 wide the notes grid is one track and the key is static, so no sticky line stands. The tracks are the plate's at each width; the slot heights are schematic, as the plan's are. The hairlines are the chrome's faint line, so the accent stays on the fill button and the phone plan's scroll run.
KEY
| the sheet: the outer frame and the inner rule | |
| a slot that hugs its content | |
| a slot that fills or flexes | |
| the fill button, the sheet's one control | |
| a dimension, lettered with its code | |
| a detail circle, drawn larger at right | |
| a boxed note number | |
| a grid hairline over an element blocked in on its tracks |