Ludo
86464f3e21
Import from agentic-semantic-web/ into restructured repo: - 7 packs (apache, caddy, flask, hugo, nginx, pandoc, python) - shared error pages (403-503) - 17 lab experiments (boilerplate, charts, misc) - 31 example pages (charts, components, content, layout, vault) - 2 themes (garden, trentuna stub) - 4 docs (llms.txt, vocabulary, philosophy, agent-directive) - lineage.md (Pico/Open Props/Charts.css history) - Hugo mounts for lab/ and examples/ All agentic.css references updated to asw.css. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
125 lines
4 KiB
HTML
125 lines
4 KiB
HTML
<!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>
|