asw-v01: archive deferred content (packs, site, lab, legacy examples)
- 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:
parent
416fe2f180
commit
e47a9f4401
173 changed files with 11 additions and 5 deletions
125
archive/examples-legacy/layout/grid.html
Normal file
125
archive/examples-legacy/layout/grid.html
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--#include virtual="/_include/head.html" -->
|
||||
<title>Grid — ASW</title>
|
||||
<meta name="description" content="data-layout grid patterns — grid-2,
|
||||
grid-3, card-grid, stats, inline definition list">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/_include/nav.html" -->
|
||||
<main>
|
||||
<header>
|
||||
<h1>Grid</h1>
|
||||
<p data-text="lead">data-layout grid patterns — grid-2, grid-3, card-grid, stats, inline definition list</p>
|
||||
</header>
|
||||
|
||||
<section>
|
||||
<h2>Two-column grid</h2>
|
||||
<p><code>data-layout="grid-2"</code> — equal two-column layout. Collapses to one column below 768px.</p>
|
||||
|
||||
<div data-layout="grid-2">
|
||||
<article>
|
||||
<h3>Vault-native</h3>
|
||||
<p>Concepts that exist in knowledge management tools but have no HTML equivalent: tasks, wikilinks, session boundaries, agent status.</p>
|
||||
</article>
|
||||
<article>
|
||||
<h3>Web-native</h3>
|
||||
<p>The structural layer stays standard: <code><article></code>, <code><nav></code>, <code><header></code>, <code><ul></code>, <code><details></code>. No divs with class names.</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Three-column grid</h2>
|
||||
<p><code>data-layout="grid-3"</code> — equal three-column layout. Collapses to one column below 768px.</p>
|
||||
|
||||
<div data-layout="grid-3">
|
||||
<article>
|
||||
<h4>Layer 1</h4>
|
||||
<p data-text="small">Pico CSS — semantic HTML styled automatically. No classes required.</p>
|
||||
</article>
|
||||
<article>
|
||||
<h4>Layer 2</h4>
|
||||
<p data-text="small">Theme tokens — Trentuna aesthetic. Warm, dark, paper-and-ink.</p>
|
||||
</article>
|
||||
<article>
|
||||
<h4>Layer 3</h4>
|
||||
<p data-text="small">Agentic extensions — data-attribute vocabulary for vault-native concepts.</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Card grid</h2>
|
||||
<p><code>data-layout="card-grid"</code> — auto-fill responsive grid. Cards minimum 280px wide; count determined by available space.</p>
|
||||
|
||||
<div data-layout="card-grid">
|
||||
<article>
|
||||
<hgroup>
|
||||
<h3>Agentic Semantic Web</h3>
|
||||
<p>Semantic HTML + data attributes</p>
|
||||
</hgroup>
|
||||
<p>A CSS framework for agents. Write semantic HTML; get styled output. No classes. No build step.</p>
|
||||
<a href="/projects/asw/">Explore →</a>
|
||||
</article>
|
||||
<article>
|
||||
<hgroup>
|
||||
<h3>DocFeeder</h3>
|
||||
<p>PDF inbox → structured knowledge</p>
|
||||
</hgroup>
|
||||
<p>Drop PDFs in a folder; DocFeeder extracts, structures, and writes companion notes for your Obsidian vault.</p>
|
||||
<a href="#">Learn more →</a>
|
||||
</article>
|
||||
<article>
|
||||
<hgroup>
|
||||
<h3>Vigilio Garden</h3>
|
||||
<p>The public-facing presence</p>
|
||||
</hgroup>
|
||||
<p>Now pages, projects, and writing. The garden is where sessions become posts.</p>
|
||||
<a href="/vigilio/">Visit →</a>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Stats bar</h2>
|
||||
<p><code>data-layout="stats"</code> — key-value metrics. Large monospace value, small uppercase label.</p>
|
||||
|
||||
<div data-layout="stats">
|
||||
<div>
|
||||
<span data-stat="value">2,700+</span>
|
||||
<span data-stat="label">Sessions</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-stat="value">68</span>
|
||||
<span data-stat="label">Dialogues</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-stat="value">31m</span>
|
||||
<span data-stat="label">Beat interval</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-stat="value">4</span>
|
||||
<span data-stat="label">Grid patterns</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Inline definition list</h2>
|
||||
<p><code>data-layout="inline"</code> on <code><dl></code> — two-column grid. Terms shrink to content; definitions fill the rest.</p>
|
||||
|
||||
<dl data-layout="inline">
|
||||
<dt>Author</dt> <dd>Vigilio Desto</dd>
|
||||
<dt>Status</dt> <dd>Published</dd>
|
||||
<dt>Version</dt> <dd>0.1.0</dd>
|
||||
<dt>License</dt> <dd>MIT</dd>
|
||||
<dt>Framework</dt><dd>Agentic Semantic Web</dd>
|
||||
</dl>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
<!--#include virtual="/_include/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue