From aaf60139e3f8812803b0ea22e289f90d86a59993 Mon Sep 17 00:00:00 2001 From: Ludo Date: Sat, 11 Apr 2026 21:26:33 +0200 Subject: [PATCH] =?UTF-8?q?feat:=20homepage=20=E2=80=94=20hero,=20three=20?= =?UTF-8?q?layers,=20vocabulary,=20packs,=20explore?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Pure ASW markup, zero classes, zero inline styles. Messaging reflects the three-layer positioning: agent as author, agent as builder, agent as reader. New data-hero attribute for landing page hero sections. Co-Authored-By: Claude Opus 4.6 (1M context) --- site/content/_index.md | 185 ++++++++++++++++++++++++++++++++------ src/layers/12-landing.css | 50 +++++++++-- 2 files changed, 201 insertions(+), 34 deletions(-) diff --git a/site/content/_index.md b/site/content/_index.md index 90950a8..aefb6c3 100644 --- a/site/content/_index.md +++ b/site/content/_index.md @@ -1,42 +1,173 @@ --- title: "Agentic Semantic Web" -description: "Semantic HTML, data-* attributes, and CSS-only styling for the agentic era." -date: 2026-04-10 -tags: ["asw", "semantic-web", "html"] - +description: "A CSS framework for the agentic era. Agents write markdown. Packs handle the rest. The output is agent-readable too." --- -# Agentic Semantic Web +
+

CSS framework for the agentic era

+

Agentic Semantic Web

+

Agents write markdown. Packs handle the rest.
The output is semantic, readable, and cheap to parse.

+

<link rel="stylesheet" href="asw.css">

+ +
-**ASW** is a vocabulary and design system for the agentic era — semantic HTML with `data-*` attributes, CSS-only styling, no JavaScript required where a browser element already does the job. +## Write HTML. Get this. -Built for sites generated by agents and read by agents. Navigable by humans. +No classes. No build step. The framework reads intent from structure and data-attributes. -## What this is +
-- [Docs](/docs/) — the ASW HTML vocabulary, layout system, and components -- [Vault](/notes/) — live ASW notation: task lists, sessions, diffs, wikilinks -- [Posts](/articles/) — writing and vocabulary reference -- [Papers](/essays/) — longer-form thinking on the semantic web - -## The design principle - -No invented CSS classes. Every style target is either a semantic HTML element or a `data-*` attribute: +
```html - -
...
-session log +
+

Session 2847

+ +
+ Insight +

Semantic HTML is what agents + naturally produce.

+
+ +
    +
  • Token layer
    • +
  • Docs taxonomy
    • +
  • Hero page
    • +
  • Vocabulary
    • +
+
``` -Agents read the attributes. Humans read the content. The CSS connects them. +
-## Try the shortcodes +
-{{< callout note >}} -This is a **note callout** rendered via the `callout` shortcode. Output: `
+ +
+ +## Three layers + +
+ +
+

Agent as author

+

Write markdown and frontmatter. A pack — Hugo, Flask, Pandoc, nginx — turns it into ASW-styled HTML. The agent never touches CSS.

+
+ +
+

Agent as builder

+

The semantic HTML contract. <nav>, <article>, data-layout, data-task — a vocabulary for templates that ASW styles automatically.

+
+ +
+

Agent as reader

+

ASW output is cheap to parse. Semantic HTML carries meaning in structure, not class strings. A downstream agent consumes fewer tokens and understands more.

+
+ +
+ +## The vocabulary + +Concepts agents have but HTML doesn't. Named with `data-*` attributes, not invented classes. + +
+ +
+ +### Vault extensions + +- `data-task` — states: done, wip, blocked, todo +- `data-callout` — notes: tip, warning, error, info +- `data-wikilink` — knowledge graph links +- `data-status` — operational indicators +- `data-redacted` — renders as ████████ + +[Explore vault docs](/docs/vault/tasks/) + +
+ +
+ +### AI disclosure + +Every ASW page can declare its provenance: + +```html + + +``` + +EU AI Act Article 50 compliant. Built into the framework's meta partials. + +
+ +
+ +## Packs + +Drop ASW into any stack. Each pack ships integration files and a SKILLS.md for agents. + +
+ +
+

Hugo

+

Layouts, partials, shortcodes. The ASW site itself runs on this pack.

+
+ +
+

nginx

+

Styled error pages, autoindex with ASW. Drop-in conf snippets.

+
+ +
+

Pandoc

+

HTML5 template and Lua filter. Convert any markdown to ASW output.

+
+ +
+ +

All packs — Apache, Caddy, Flask, Python also available.

+ +## Explore + +
+ +
+

Documentation

+

Feature reference with live inline demos. Typography, components, vault extensions, layouts, theming.

+
+ +
+

Layouts

+

Gallery of available page layouts. Docs, essay, console, grid, prose, report.

+
+ +
+

Lab

+

Experiments, kitchen sinks, font specimens. Where features are tested before they ship.

+
+ +
diff --git a/src/layers/12-landing.css b/src/layers/12-landing.css index 6f49e9f..0dfb170 100644 --- a/src/layers/12-landing.css +++ b/src/layers/12-landing.css @@ -34,15 +34,15 @@ margin-bottom: 0; } -/* ── Hero overrides — extend [data-layout="hero"] ─────────────────────── - Base centering and border live in 08-layout.css; this layer tunes sizing. -─────────────────────────────────────────────────────────────────────── */ +/* ── Hero ─────────────────────────────────────────────────────────────── */ -[data-layout="hero"] { +[data-hero] { + text-align: center; padding: clamp(3.5rem, 10vw, 7rem) var(--space-5) clamp(3rem, 8vw, 5.5rem); + border-bottom: var(--border-width) solid var(--border-subtle); } -[data-layout="hero"] h1 { +[data-hero] h1 { font-size: clamp(2.6rem, 6vw, 4.5rem); font-weight: var(--weight-light); letter-spacing: -0.025em; @@ -50,15 +50,51 @@ margin-bottom: var(--space-4); } -[data-text~="tagline"] { +[data-hero] > p { font-size: clamp(1rem, 2.5vw, 1.2rem); color: var(--text-2); max-width: 46ch; margin-inline: auto; - margin-bottom: var(--space-5); line-height: var(--leading-tight); } +[data-hero] > nav { + display: flex; + gap: var(--space-3); + justify-content: center; + flex-wrap: wrap; + margin-top: var(--space-5); +} + +[data-hero] > nav a { + display: inline-block; + padding: var(--space-2) var(--space-5); + border-radius: var(--radius-md); + font-size: var(--text-sm); + font-weight: var(--weight-medium); + text-decoration: none; + border: var(--border-width) solid var(--border); + background: var(--surface-1); + color: var(--text-2); + transition: background-color var(--ease-3), color var(--ease-3), border-color var(--ease-3); +} + +[data-hero] > nav a:first-child { + background: var(--accent); + color: var(--on-accent); + border-color: transparent; +} + +[data-hero] > nav a:hover { + background: var(--surface-2); + color: var(--text); +} + +[data-hero] > nav a:first-child:hover { + background: var(--accent-hover); + color: var(--on-accent); +} + /* ── figure[data-pane] — side-by-side demo panes ──────────────────────── Usage: