asw/content/docs/layouts.md at e6175b69e097bbfb2f51f5bb0947197dd048228b

Port vault section (5 pages) and docs section (11 pages)

- content/vault/: _index.md, diff.md, session.md, status.md, tasks.md, wikilinks.md
- content/docs/: _index.md, introduction, tokens, reset, semantic-html,
  components, data-attributes, navigation, layouts, charts, chroma, accordion-dialog

96 pages build clean (was 36). Docs use sidebar nav + TOC layout.
Vault uses sidebar with section fallback (no vault menu configured yet).
URLs fixed: playground refs → asw.trentuna.com.

Closes: asw#12, asw#9

2026-04-10 18:40:50 +02:00

4.8 KiB

Raw Blame History

title

description

type

weight

date

Docs layout

Three-column scaffold: sidebar, content, TOC. Source order: left <aside> → content → right <aside data-toc>.

<div data-layout="docs">
  <aside>
    <nav data-nav="sidebar" aria-label="Docs">
      <small>Getting started</small>
      <ul>
        <li><a href="/docs/introduction/" aria-current="page">Introduction</a></li>
        <li><a href="/docs/tokens/">Token System</a></li>
      </ul>
    </nav>
  </aside>

  <article>
    <h1>Page title</h1>
    <p>Content goes here.</p>
  </article>

  <aside data-toc>
    <small>On this page</small>
    <nav>
      <ul>
        <li><a href="#section">Section</a></li>
      </ul>
    </nav>
  </aside>
</div>

The right TOC hides below ~1280px. The left sidebar hides below ~768px.

Hero

Landing page header block. Centers content, adds vertical padding, draws a bottom border.

<header data-layout="hero">
  <h1>Agentic Semantic Web</h1>
  <p>CSS for agent-generated content.</p>
  <p data-layout="install"><code>@import "agentic.css"</code></p>
</header>

Install pill

data-layout="install" on a <p> or <div> renders an inline monospace pill — intended for single-line install commands inside a hero.

Actions row

CTA button row, centered, wraps on small screens.

<nav data-layout="actions">
  <a href="/docs/introduction/" data-role="primary">Get started →</a>
  <a href="https://github.com/..." data-role="secondary">GitHub</a>
</nav>

Grid layouts

Two columns

<div data-layout="grid-2">
  <article>Left column</article>
  <article>Right column</article>
</div>

Stacks to one column below ~768px.

Three columns

<div data-layout="grid-3">
  <article>One</article>
  <article>Two</article>
  <article>Three</article>
</div>

Stacks to one column below ~768px.

Card grid

Auto-fill, responsive. Columns fill to a minimum of --card-min-width (default: 280px).

<div data-layout="card-grid">
  <article>Card A</article>
  <article>Card B</article>
  <article>Card C</article>
</div>

Stats row

Horizontal stat display. Wraps responsively.

<div data-layout="stats">
  <div>
    <span data-stat="value">2,847</span>
    <span data-stat="label">Sessions</span>
  </div>
  <div>
    <span data-stat="value">99.8%</span>
    <span data-stat="label">Uptime</span>
  </div>
  <div>
    <span data-stat="value">14</span>
    <span data-stat="label">Projects</span>
  </div>
</div>

Prose

Constrains width to 65ch for comfortable reading. Apply to <main> or any block.

<main data-layout="prose">
  <h1>Article title</h1>
  <p>Long-form content at a comfortable reading width.</p>
</main>

Fluid

Removes the max-width constraint from <main>. Use for full-bleed layouts.

<main data-layout="fluid">
  <!-- Full-width content -->
</main>

Timeline

Vertical chronological list with a spine line and accent dots.

<ol data-layout="timeline">
  <li>
    <time>2026-04-10</time>
    <article>
      <h3>Event title</h3>
      <p>Description of what happened.</p>
    </article>
  </li>
  <li>
    <time>2026-03-28</time>
    <article>
      <h3>Earlier event</h3>
      <p>Prior milestone.</p>
    </article>
  </li>
</ol>

Add alternate to the value for a left/right alternating layout:

<ol data-layout="timeline alternate">

Report

Print-first document layout. Constrained to 72ch, includes print stylesheet. Light surface regardless of OS theme.

<div data-layout="report">
  <header>
    <h1>Report Title</h1>
    <p>Prepared 2026-04-10</p>
  </header>
  <main>
    <h2>Findings</h2>
    <p>Content here.</p>
  </main>
  <footer>Confidential · Trentuna</footer>
</div>

On print, links render with their URL in parentheses. data-no-print on any element hides it from print output.

Inline definition list

Renders a <dl> as a two-column grid: terms on the left, definitions on the right. Apply to <dl> only.

<dl data-layout="inline">
  <dt>--accent</dt>
  <dd>Primary action colour, sourced from Open Props <code>--green-5</code></dd>

  <dt>--surface</dt>
  <dd>Page background, adaptive light/dark</dd>

  <dt>--font-ui</dt>
  <dd>Neo-grotesque sans stack for UI chrome</dd>
</dl>

Data Attributes — full data-* vocabulary reference
Token System — the custom property values that layout tokens reference

4.8 KiB Raw Blame History