styles

Layout

Breakpoints and containers decide how a page adapts from a phone to a wide screen.

  • Design phone first (390px wide), then adapt at the breakpoints.
  • Breakpoints follow wikicasa-nuxt (Bootstrap): sm 576px, md 768px, lg 992px, xl 1200px, 2xl 1400px.
  • Page content sits in a centered container at most 1280px wide (tw-max-w-xl; the container token, not the xl breakpoint), with tw-px-4 side margins.