Ludo
502b2e8266
Navigation: Docs, Layouts, Lab (simplified from 6 items) Layouts gallery: card grid showing all available page layouts with live links to demo pages. Docs restructure: 8 auto-generated sidebar sections (Getting Started, Typography, Core, Content, Components, Reference, Vault, Packs) with 20 new stub pages. Each stub has inline HTML demos that ASW styles directly. New Hugo layout template for layouts/ section. Decap CMS nav updated. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
52 lines
1.8 KiB
Markdown
52 lines
1.8 KiB
Markdown
---
|
|
title: "Layouts"
|
|
description: "Available page layouts in ASW. Each card links to a live page using that layout."
|
|
---
|
|
|
|
## Available Layouts
|
|
|
|
<section data-layout="grid-2">
|
|
|
|
<article>
|
|
<header><h3>Docs</h3></header>
|
|
<p>Three-column layout: sidebar navigation, main content, table of contents. The standard documentation pattern.</p>
|
|
<p><code>data-layout="docs"</code></p>
|
|
<p><a href="/docs/getting-started/introduction/">See it live →</a></p>
|
|
</article>
|
|
|
|
<article>
|
|
<header><h3>Essay</h3></header>
|
|
<p>Long-form prose with centred masthead, abstract, byline. Wide reading measure with typographic refinements.</p>
|
|
<p><code>type: essay</code></p>
|
|
<p><a href="/essays/on-semantic-html/">See it live →</a></p>
|
|
</article>
|
|
|
|
<article>
|
|
<header><h3>Console</h3></header>
|
|
<p>Docs variant with sidebar flush to viewport edge. Designed for terminal-style interfaces and dashboards.</p>
|
|
<p><code>data-layout="console"</code></p>
|
|
<p><em>Prototype — demo coming</em></p>
|
|
</article>
|
|
|
|
<article>
|
|
<header><h3>Grid</h3></header>
|
|
<p>Multi-column content grids for cards, galleries, dashboards. Responsive — collapses to single column on mobile.</p>
|
|
<p><code>data-layout="grid-2"</code> / <code>grid-3</code></p>
|
|
<p><em>This page uses grid-2 for these cards</em></p>
|
|
</article>
|
|
|
|
<article>
|
|
<header><h3>Prose</h3></header>
|
|
<p>Single-column reading layout. Content constrained to <code>--width-prose</code> (65ch) for optimal readability.</p>
|
|
<p><code>data-layout="prose"</code></p>
|
|
<p><a href="/examples/layout/prose.html">See it live →</a></p>
|
|
</article>
|
|
|
|
<article>
|
|
<header><h3>Report</h3></header>
|
|
<p>Formal document layout with print styles. Headers, numbered sections, optimised for PDF export.</p>
|
|
<p><code>data-layout="report"</code></p>
|
|
<p><a href="/examples/layout/report.html">See it live →</a></p>
|
|
</article>
|
|
|
|
</section>
|