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

feat: homepage — hero, three layers, vocabulary, packs, explore

Browse source 
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) <noreply@anthropic.com>
This commit is contained in:
Ludo 2026-04-11 21:26:33 +02:00
parent b28eb6be52
commit aaf60139e3
Signed by: ludo
GPG key ID: F6E479DEFAB84D6E
2 changed files with 201 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

50
src/layers/12-landing.css
View file

@ -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:
<figure data-pane="code">