[OCaml] High Intensity Training Online
style give headings a coherent scale across the app
h1 and h2 shared one rule, so a page title and a section heading rendered identically, and h3 at 1.5rem was larger than either felt. Give the three levels one shared treatment -- colour, weight, rhythm -- and a stepped size scale: h1 the page title, h2 a section (1.35rem), h3 a sub-section (1.1rem). Per-context rules now only tweak margins, never the scale.
lib/web/assets/hito.css
@@ -344,18 +344,23 @@
344
344
}
345
345
}
346
346
347
Added:
/* One coherent heading scale across the app. h1 is the page title, h2 a
348
Added:
section within the page, h3 a sub-section. They share colour, weight, and
349
Added:
rhythm; only the size steps down, so the hierarchy reads the same on every
350
Added:
page. */
347
351
h1,
348
Removed:
h2 {
352
Added:
h2,
353
Added:
h3 {
349
354
max-width: 38rem;
350
355
margin: 0 0 0.45rem;
351
356
color: var(--ink);
352
Removed:
font-size: clamp(1.75rem, 4vw, var(--font-size-heading));
353
357
font-weight: 700;
354
358
line-height: 1.2;
355
359
letter-spacing: -0.03em;
356
360
}
357
Removed:
358
Removed:
h3 { margin: 0; color: var(--ink); font-size: 1.5rem; line-height: 1.2; }
361
Added:
h1 { font-size: clamp(1.75rem, 4vw, var(--font-size-heading)); }
362
Added:
h2 { font-size: 1.35rem; }
363
Added:
h3 { font-size: 1.1rem; }
359
364
360
365
p { max-width: 46rem; margin: 0.65rem 0; color: var(--muted-ink); }
361
366
h2 + p { font-size: var(--font-size-lead); }