{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "layout", "type": "registry:ui", "title": "Page layout (MIAN)", "description": "Containers, section rhythm, display type and grids, the frame every page is built in.", "categories": [ "sections", "layout", "container", "section", "page" ], "registryDependencies": [ "https://mian.ro/r/mian-base.json" ], "files": [ { "path": "mian/components/layout.css", "type": "registry:file", "target": "mian/components/layout.css", "content": ":root, [data-noodle] {\n --mn-container: 74rem;\n --mn-gutter: clamp(1.25rem, 4.5vw, 2.5rem);\n --mn-section-space: clamp(4.5rem, 9vw, 8rem);\n}\n.mn-site { display: flex; flex-direction: column; min-height: 100dvh; margin: 0; }\n.mn-site > main { flex: 1 0 auto; }\n.mn-skip { position: absolute; left: .75rem; top: -5rem; z-index: 100; padding: .6rem 1rem; border-radius: var(--mn-radius-field); background: var(--mn-primary); color: var(--mn-primary-fg); font-weight: 600; text-decoration: none; }\n.mn-skip:focus { top: .75rem; outline: none; box-shadow: var(--mn-focus); }\n.mn-container { container: mn / inline-size; width: min(100% - 2 * var(--mn-gutter), var(--mn-container)); margin-inline: auto; }\n.mn-container-narrow { --mn-container: 46rem; }\n.mn-container-wide { --mn-container: 88rem; }\n.mn-section { container: mn / inline-size; padding-block: var(--mn-section-space); }\n.mn-section-sm { padding-block: calc(var(--mn-section-space) * .55); }\n.mn-section-flush { padding-top: 0; }\n.mn-section-muted { background-color: var(--mn-surface-2); }\n.mn-section-bordered { border-top: var(--mn-border-w) solid var(--mn-border); }\n.mn-section-head { display: grid; gap: 1rem; max-width: 44rem; margin-bottom: clamp(2.25rem, 5cqi, 4rem); }\n.mn-section-head > *, .mn-section-head > div > * { margin: 0; }\n.mn-section-head > div { display: grid; gap: 1rem; align-content: start; }\n.mn-section-head-center { margin-inline: auto; text-align: center; justify-items: center; }\n@container mn (min-width: 52rem) {\n .mn-section-head-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; column-gap: clamp(2rem, 6cqi, 5rem); max-width: none; }\n}\n.mn-eyebrow { display: inline-flex; align-items: center; gap: .5rem; margin: 0; font: 500 .875rem/1.3 var(--mn-font); color: var(--mn-primary-text); }\n.mn-display, .mn-title, .mn-subtitle {\n margin: 0; color: var(--mn-fg); font-family: var(--mn-font-heading); font-weight: var(--mn-heading-weight);\n text-wrap: balance; overflow-wrap: break-word; hyphens: auto;\n}\n.mn-display { font-size: clamp(2.6rem, 1.3rem + 5.4cqi, 5.75rem); line-height: 1.02; letter-spacing: -.04em; }\n.mn-title { font-size: clamp(2rem, 1.35rem + 2.7cqi, 3.35rem); line-height: 1.07; letter-spacing: -.032em; }\n.mn-subtitle { font-size: clamp(1.25rem, 1.05rem + .9cqi, 1.6rem); line-height: 1.25; letter-spacing: -.015em; }\n.mn-intro { margin: 0; max-width: 38em; font-size: clamp(1.0625rem, .98rem + .55cqi, 1.3rem); line-height: 1.6; color: var(--mn-muted); text-wrap: pretty; }\n.mn-grid { display: grid; gap: var(--mn-gap, clamp(1rem, 2.5cqi, 1.75rem)); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--mn-min, 16rem)), 1fr)); }\n.mn-cols { display: grid; gap: var(--mn-gap, 2rem clamp(1.5rem, 4cqi, 3rem)); grid-template-columns: minmax(0, 1fr); }\n@container mn (min-width: 40rem) { .mn-cols-2, .mn-cols-3, .mn-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }\n@container mn (min-width: 62rem) { .mn-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mn-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }\n.mn-split { display: grid; gap: clamp(2rem, 6cqi, 5rem); align-items: center; }\n@container mn (min-width: 52rem) {\n .mn-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }\n .mn-split-start { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }\n .mn-split-end { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }\n .mn-split-reverse > :first-child { order: 2; }\n .mn-split-top { align-items: start; }\n}\n.mn-split > * { min-width: 0; }" }, { "path": "mian/examples/layout.html", "type": "registry:file", "target": "mian/examples/layout.html", "content": "\n
\n
\n
\n

Close in four days

Month-end without the spreadsheet relay.

\n

Reconciliations run every night, so the last week of the month is review, not data entry.

\n
\n
\n

Every account, matched overnight

Bank feeds, card processors and payroll arrive at 02:00 and are matched against the ledger before anyone logs in.

\n
Photo: the reconciliation screen on a laptop, three-quarter angle
\n
\n
\n
\n\n\n
\n
\n

01: Connect

Link banks, cards and payroll in ten minutes.

\n

02: Match

Rules learn from every approval you make.

\n

03: Close

Export an audit trail your accountant signs off.

\n
\n
" } ], "docs": "MIAN components are HTML + CSS classes, not React components. The styles are already included in mian-base; this item adds the component's CSS section and example markup for reference. Docs: https://mian.ro/components/layout", "meta": { "mian": { "license": "LicenseRef-MIAN-1.0", "requiresJs": false, "classes": [ "mn-site", "mn-skip", "mn-container", "mn-section", "mn-section-head", "mn-eyebrow", "mn-display · mn-title · mn-subtitle", "mn-intro", "mn-cols mn-cols-2|3|4", "mn-split", "mn-grid", "--mn-container · --mn-gutter · --mn-section-space" ], "accessibility": [ "Use one

per page (usually the hero’s mn-display) and keep heading levels in order: mn-title is for

.", "Landmarks:
,
,