Skip to main content
02 / Foundations

Responsive

Lexicon is desktop-first today. The mobile story is being built.

Breakpoints

Today: one active breakpoint at 960px. Below it the sidebar collapses and the main column fills the viewport. Above it the 3-column shell is used.

Planned: 480 / 768 / 960 / 1280 / 1680 with full mobile navigation. Tracked under Phase 5.

Containers

  • .lex-prose { max-width: 760px } for prose-heavy content.
  • The layout grid is capped at 1680px.

Images

Fluid by default; cap at the natural width to avoid upscaling. Use loading="lazy" for anything below the fold.

Forms

Input width follows content type. Short fields (postal code) have explicit widths; prose fields (textarea) fill the column.

Roadmap

Full mobile navigation, drawer, touch-target sizing audit, and orientation handling are scheduled. Tracked under Phase 5.