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

asw-v01: archive deferred content (packs, site, lab, legacy examples)

Browse source 
- 2.1: packs/ -> archive/packs/
- 2.2: site/ -> archive/site/
- 2.3: src/lab/ -> archive/lab/
- 2.4: examples/ -> archive/examples-legacy/ (SSI-based)
This commit is contained in:
exe.dev user 2026-06-07 10:39:21 +02:00
parent 416fe2f180
commit e47a9f4401
173 changed files with 11 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

39
archive/examples-legacy/layout/prose.html Normal file
View file

@ -0,0 +1,39 @@
<!doctype html>
<html lang="en">
<head>
<!--#include virtual="/_include/head.html" -->
<title>Prose — ASW</title>
<meta name="description" content="data-layout="prose" — optimal
reading width for long-form content">
</head>
<body>
<!--#include virtual="/_include/nav.html" -->
<main data-layout="prose">
<h1>Prose Layout</h1>
<p data-text="lead">65 characters. The typographic sweet spot — Bringhurst's recommendation, LaTeX's default, the width every readable thing converges on.</p>
<p>Add <code>data-layout="prose"</code> to any <code>&lt;main&gt;</code> or <code>&lt;div&gt;</code>. The element constrains itself to <code>65ch</code> and centers in its container. Nothing else changes — headings, paragraphs, lists, code blocks all behave normally inside.</p>
<p>This paragraph is exactly this wide. Not wider. Your eye doesn't have to travel far to find the next line. That's the whole point.</p>
<h2>When to use it</h2>
<p>Articles. Documentation pages. Session reports written as prose. Any page where the primary content is text and the reader should read, not scan.</p>
<p>Don't use it for dashboards, data-heavy pages, or anything with wide tables. Use <code>data-layout="report"</code> or no layout constraint instead.</p>
<h2>How it works</h2>
<div class="sourceCode" id="cb1"><pre
class="sourceCode css"><code class="sourceCode css"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="ex">[data-layout</span><span class="op">=</span><span class="st">&quot;prose&quot;</span><span class="ex">]</span> {</span>
<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a> <span class="kw">max-width</span>: <span class="dv">65</span><span class="dt">ch</span><span class="op">;</span></span>
<span id="cb1-3"><a href="#cb1-3" aria-hidden="true" tabindex="-1"></a> <span class="kw">margin-inline</span>: <span class="bu">auto</span><span class="op">;</span></span>
<span id="cb1-4"><a href="#cb1-4" aria-hidden="true" tabindex="-1"></a>}</span></code></pre></div>
<p>One rule. Font-relative — <code>ch</code> tracks the character width of the current typeface, so it scales correctly if the font changes.</p>
<footer>
<a href="/projects/asw/docs/">← ASW Docs</a>
</footer>
</main>
<!--#include virtual="/_include/footer.html" -->
</body>
</html>