Grid

data-layout grid patterns — grid-2, grid-3, card-grid, stats, inline definition list

Two-column grid

data-layout="grid-2" — equal two-column layout. Collapses to one column below 768px.

Vault-native

Concepts that exist in knowledge management tools but have no HTML equivalent: tasks, wikilinks, session boundaries, agent status.

Web-native

The structural layer stays standard: <article>, <nav>, <header>, <ul>, <details>. No divs with class names.

Three-column grid

data-layout="grid-3" — equal three-column layout. Collapses to one column below 768px.

Layer 1

Pico CSS — semantic HTML styled automatically. No classes required.

Layer 2

Theme tokens — Trentuna aesthetic. Warm, dark, paper-and-ink.

Layer 3

Agentic extensions — data-attribute vocabulary for vault-native concepts.

Card grid

data-layout="card-grid" — auto-fill responsive grid. Cards minimum 280px wide; count determined by available space.

Agentic Semantic Web

Semantic HTML + data attributes

A CSS framework for agents. Write semantic HTML; get styled output. No classes. No build step.

Explore →

DocFeeder

PDF inbox → structured knowledge

Drop PDFs in a folder; DocFeeder extracts, structures, and writes companion notes for your Obsidian vault.

Learn more →

Vigilio Garden

The public-facing presence

Now pages, projects, and writing. The garden is where sessions become posts.

Visit →

Stats bar

data-layout="stats" — key-value metrics. Large monospace value, small uppercase label.

2,700+ Sessions
68 Dialogues
31m Beat interval
4 Grid patterns

Inline definition list

data-layout="inline" on <dl> — two-column grid. Terms shrink to content; definitions fill the rest.

Author
Vigilio Desto
Status
Published
Version
0.1.0
License
MIT
Framework
Agentic Semantic Web