SIGN IN SIGN UP
ColorlibHQ / AdminLTE UNCLAIMED

AdminLTE - Free admin dashboard template based on Bootstrap 5

0 0 73 CSS

style(docs): rewrite docs typography for readability

The previous docs typography inverted the visual hierarchy of the MDX
content: h5 was rendered at .95rem (smaller than body) even though
##### is the dominant section heading across every doc in
src/html/components/docs/. FAQ in particular was unreadable -- section
headings were smaller than the questions underneath them, and both
blurred into body text.

Rewrites the .docs-page typography with a hierarchy that matches how
the MDX content actually uses heading levels:

- Constrains content width to 60rem (64rem on xxl) so prose has a
  comfortable line length on wide screens
- h5 -> 1.3rem with a top border separator -- this is the dominant
  section heading in docs MDX, so sections now visibly break apart
- h6 -> 1.08rem with margin-top -- the FAQ-question style, clearly
  distinct from body but secondary to h5
- h2 -> 1.75rem with bottom border (for the two docs that use ##)
- h3/h4 -> 1.4 / 1.2rem
- All headings: line-height 1.3, weight 600, emphasis color,
  scroll-margin-top for anchor links
- Body line-height bumped to 1.7
- Lists get tighter nested-list spacing and per-item bottom margin
- First p in any doc renders as a "lead" -- 1.125rem, more bottom
  margin, functions as a summary deck
- Inline code: pill style with subtle border
- Code blocks: more padding, consistent line-height with prose
- Tables: hairline border + overflow:hidden + rounded corners, header
  cells use tertiary bg, codes inside cells get nowrap
- Blockquotes: info-callout treatment with left border
- Prose links: stronger underline with offset, primary color
- Adds hr styling and a dark-mode contrast tweak for inline code
  inside blockquotes

CSS gained ~1KB gzipped; still well within the 46KB budget.
A
Aigars Silkalns committed
d5b148aef3afa4049f5597cd8c254d0c6536a49c
Parent: e66e8ac