| 1 |
# The site stylesheet |
| 2 |
|
| 3 |
`static/style.css` is generated. It is the join of the files here, in name |
| 4 |
order, produced by `build.rs` and committed. |
| 5 |
|
| 6 |
Committed rather than gitignored because 1,900 lines of annotated CSS keep their |
| 7 |
`git blame` that way, and because `src/static_assets.rs` embeds `static/` |
| 8 |
wholesale with `include_dir!`, so the built sheet has to exist on disk at compile |
| 9 |
time. Edit a part, never the output. |
| 10 |
|
| 11 |
The parts live here rather than under `static/` for the same `include_dir!` |
| 12 |
reason: anything under `static/` ships, so parts kept there would be served as |
| 13 |
well as embedded. |
| 14 |
|
| 15 |
This sheet uses no `@layer`, so the join is the whole of it and every file here |
| 16 |
is standalone-valid CSS on its own. |
| 17 |
|
| 18 |
## The parts |
| 19 |
|
| 20 |
|
| 21 |
|
| 22 |
| `00-foundations.css` | The five `@font-face` blocks, the `:root` palette, reset, base, signature dot, layout. The makeover conversion's whole target: everything it replaces is in this file and nothing else is | |
| 23 |
| `10-chrome.css` | Site header and nav, hamburger toggle | |
| 24 |
| `20-controls.css` | Buttons, forms | |
| 25 |
| `30-listings.css` | Directory and data tables, thread and member columns, pinned rows, badges, breadcrumbs. Badges and breadcrumbs sit here because every one of them is worn by a row in those tables | |
| 26 |
| `40-threads.css` | Post item, post actions, deleted posts, OP indicator, draft indicator, reply form, page header | |
| 27 |
| `50-furniture.css` | Toast, settings, accessibility, pagination, error pages, empty state, footer, footnotes, immutable posts, mentions, tracking settings, info pages, utility classes. A grab bag of thirteen small sections, none worth its own file | |
| 28 |
| `60-search.css` | Link previews, search modal, post endorsements | |
| 29 |
| `70-chat.css` | The chat room: scrolling log against a non-growing composer, dimmed un-echoed send, named-reader tint, delete and failed-send retry | |
| 30 |
| `90-responsive.css` | The 768px and 480px blocks | |
| 31 |
|
| 32 |
`90-responsive.css` stays one file. Distributing the two blocks into the feature |
| 33 |
files is legal, but each reaches across six of the eight other parts, so it means |
| 34 |
splitting each into six fragments and re-proving order for every one, to end up |
| 35 |
with eight files instead of nine. Both breakpoints are also off the makeover size |
| 36 |
classes (768/480 against the server's 839/599), and this is where that gets |
| 37 |
reconciled when the conversion lands. |
| 38 |
|
| 39 |
## Contiguity is the guarantee |
| 40 |
|
| 41 |
Every part is a contiguous line range of the single file this used to be, and |
| 42 |
they load in the original order, so the join is byte-identical and the split |
| 43 |
changed no rendering. |
| 44 |
|
| 45 |
That also says what a safe edit is. CSS resolves ties by source order, so moving |
| 46 |
a rule between parts can change which of two equal-specificity rules wins. A move |
| 47 |
earlier in source order needs its own tie check and its own commit; adding a rule |
| 48 |
to the part it belongs in needs neither. |
| 49 |
|