bfb12f3 · 885f055 · 08081ad
@@ -397,19 +397,11 @@
the same line (#4888).
  - `.bar`
  - `.bare`
  - `.foot`
  - `.grow`
  - `.hide-sm`
  - `.js-only`
  - `.mb`
  - `.mt`
  - `.narrow`
  - `.narrow-wide`
  - `.reduced`
  - `.shell`
  - `.skip`
  - `.spacer`
  - `.stack`
  - `.stack-tight`
  - `.topbar`
  - `.wordmark`
@@ -0,0 +1,12 @@
# Layout utilities
The spacing and layout utilities every page leans on: one component, styled in `style/base.ts`'s `utilities` layer, so a page spaces and sizes its blocks without a class of its own.
- `.mt` — a 12px top margin between a block and the one above it; `pages/commits.ts` (`<div class="mt">`), `pages/issues.ts` and most pages write it. Styled in `style/base.ts`.
- `.mb` — a 12px bottom margin, the same step downward; `pages/commits.ts` (`<div class="bar mt mb">`) and `pages/settings.ts` write it. Styled in `style/base.ts`.
- `.stack` — a flex column with a 12px gap, for a run of cards or form rows; `pages/looks.ts`, `pages/returns.ts` and `pages/everyday.ts` write it. Styled in `style/base.ts`; `style/components.ts` drops the card-to-card margin inside it and `style/content.ts` adjusts it under `#needs-you`.
- `.stack-tight` — beside `.stack`, narrows its gap to 4px; `pages/looks.ts` and `pages/first-admin.ts` write it. Styled in `style/base.ts`.
- `.spacer` — an empty flex child that takes the free space and pushes what follows to the end of a row; `pages/commits.ts` and `pages/edit.ts` write it. Styled in `style/base.ts` (also inside `.topbar`), `style/components.ts` (`.pager`) and `style/content.ts` (`.app-strip`, `.comment-form`).
- `.grow` — a flex child that takes the free space and may shrink below its content (`min-width: 0`), so its text can truncate; `pages/edit.ts`, `pages/settings.ts` and `pages/board.ts` write it. Styled in `style/base.ts`; `style/components.ts` ellipsizes it inside `.menu-item` and `.palette-item`.
- `.narrow` — a 400px column centred a little below the top, for a single short form or notice; `pages/oauth.ts` writes it. Styled in `style/base.ts`.
- `.narrow-wide` — a 760px reading column for a page of one form or one text; `pages/edit.ts`, `pages/issues.ts` and `pages/forges.ts` write it. Styled in `style/base.ts`.
		@@ -397,19 +397,11 @@ the same line (#4888).
397	397	- `.bar`
398	398	- `.bare`
399	399	- `.foot`
400		- `.grow`
401	400	- `.hide-sm`
402	401	- `.js-only`
403		- `.mb`
404		- `.mt`
405		- `.narrow`
406		- `.narrow-wide`
407	402	- `.reduced`
408	403	- `.shell`
409	404	- `.skip`
410		- `.spacer`
411		- `.stack`
412		- `.stack-tight`
413	405	- `.topbar`
414	406	- `.wordmark`
415	407
		@@ -0,0 +1,12 @@
	1	# Layout utilities
	2
	3	The spacing and layout utilities every page leans on: one component, styled in `style/base.ts`'s `utilities` layer, so a page spaces and sizes its blocks without a class of its own.
	4
	5	- `.mt` — a 12px top margin between a block and the one above it; `pages/commits.ts` (`<div class="mt">`), `pages/issues.ts` and most pages write it. Styled in `style/base.ts`.
	6	- `.mb` — a 12px bottom margin, the same step downward; `pages/commits.ts` (`<div class="bar mt mb">`) and `pages/settings.ts` write it. Styled in `style/base.ts`.
	7	- `.stack` — a flex column with a 12px gap, for a run of cards or form rows; `pages/looks.ts`, `pages/returns.ts` and `pages/everyday.ts` write it. Styled in `style/base.ts`; `style/components.ts` drops the card-to-card margin inside it and `style/content.ts` adjusts it under `#needs-you`.
	8	- `.stack-tight` — beside `.stack`, narrows its gap to 4px; `pages/looks.ts` and `pages/first-admin.ts` write it. Styled in `style/base.ts`.
	9	- `.spacer` — an empty flex child that takes the free space and pushes what follows to the end of a row; `pages/commits.ts` and `pages/edit.ts` write it. Styled in `style/base.ts` (also inside `.topbar`), `style/components.ts` (`.pager`) and `style/content.ts` (`.app-strip`, `.comment-form`).
	10	- `.grow` — a flex child that takes the free space and may shrink below its content (`min-width: 0`), so its text can truncate; `pages/edit.ts`, `pages/settings.ts` and `pages/board.ts` write it. Styled in `style/base.ts`; `style/components.ts` ellipsizes it inside `.menu-item` and `.palette-item`.
	11	- `.narrow` — a 400px column centred a little below the top, for a single short form or notice; `pages/oauth.ts` writes it. Styled in `style/base.ts`.
	12	- `.narrow-wide` — a 760px reading column for a page of one form or one text; `pages/edit.ts`, `pages/issues.ts` and `pages/forges.ts` write it. Styled in `style/base.ts`.