^{Get started} Compact version

Add <html data-compact> for the whole page, or put the attribute on a single element, e.g. <form data-compact> for one form. Without the attribute nothing changes.

• Where it ships:
  • included in blades.css
  • also in blades.layered.css
  • with per-part imports, add @anyblades/blades/compact after the other parts
  • with pico.conditional.css, add @anyblades/blades/src/compact after it
• What changes:
  • smaller control padding and 1.5rem block spacing
  • a 0.5rem radius and a 3px focus ring
  • 500-weight labels and buttons, 600-weight headings
  • a white field background in light mode
  • a 1px card ring instead of the blurred shadow, with no grey card header/footer bands
• Root font size: on <html>, it also keeps the root font size at 100% instead of growing with the viewport. At 1280px wide, controls are then 38px instead of 62px. On a single element they are about 48px, because everything is sized in rem and the root stays as it is.
• Field text size: form controls stay at 16px, because below that iOS Safari zooms in on focus.