trentuna/asw
8
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: site restructure — layouts gallery, docs sections with inline demos

Browse source 
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>
This commit is contained in:
Ludo 2026-04-11 18:24:27 +02:00
parent c0426ea746
commit 502b2e8266
Signed by: ludo
GPG key ID: F6E479DEFAB84D6E
28 changed files with 595 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

4
site/content/docs/typography/_index.md Normal file
View file

@ -0,0 +1,4 @@
---
title: "Typography"
weight: 15
---

29
site/content/docs/typography/code.md Normal file
View file

@ -0,0 +1,29 @@
---
title: "Code"
description: "Inline code and fenced code blocks in ASW."
type: docs
weight: 18
date: 2026-04-11
tags: ["typography", "code", "pre"]
ai-disclosure: "generated"
ai-model: "claude-sonnet-4-6"
ai-provider: "Anthropic"
---
Inline `<code>` uses a monospace font with a subtle background tint. Block-level `<pre><code>` gets a full-width container with padding and horizontal scroll for long lines.
## Inline Demo
<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
<p>Use <code>data-callout="tip"</code> to style a callout block, or <code>data-layout="docs"</code> for a sidebar layout.</p>
<pre><code>/* Minimal ASW page */
&lt;!doctype html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;link rel="stylesheet" href="asw.css"&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;main&gt;&lt;article&gt;Hello, ASW.&lt;/article&gt;&lt;/main&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>

24
site/content/docs/typography/headings.md Normal file
View file

@ -0,0 +1,24 @@
---
title: "Headings"
description: "ASW styles all six heading levels with a consistent typographic scale."
type: docs
weight: 16
date: 2026-04-11
tags: ["typography", "headings"]
ai-disclosure: "generated"
ai-model: "claude-sonnet-4-6"
ai-provider: "Anthropic"
---
Headings `h1` through `h6` are sized using a fluid scale derived from the token system. No classes are needed — the element name is the selector.
## Inline Demo
<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
</div>

28
site/content/docs/typography/prose.md Normal file
View file

@ -0,0 +1,28 @@
---
title: "Prose"
description: "Body text, unordered lists, ordered lists, and blockquotes in ASW."
type: docs
weight: 17
date: 2026-04-11
tags: ["typography", "prose", "lists", "blockquote"]
ai-disclosure: "generated"
ai-model: "claude-sonnet-4-6"
ai-provider: "Anthropic"
---
ASW sets comfortable line-height, paragraph spacing, and list markers on prose elements automatically. Write plain HTML and the reading experience takes care of itself.
## Inline Demo
<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
<p>This is a body paragraph. ASW uses a fluid font size and generous line-height so long-form text remains comfortable to read on any screen width.</p>
<ul>
<li>First item in an unordered list</li>
<li>Second item</li>
<li>Third item</li>
</ul>
<blockquote>
<p>Good design is as little design as possible.</p>
<footer>— Dieter Rams</footer>
</blockquote>
</div>