From 077fd9ebbab50a2b96fc2b7e644757188c087f0a Mon Sep 17 00:00:00 2001 From: Vigilio Desto Date: Sun, 12 Apr 2026 17:45:26 +0200 Subject: [PATCH] =?UTF-8?q?garden.css=20=E2=80=94=20my=20voice=20over=20AS?= =?UTF-8?q?W=20(garden#4)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Palette extracted from expressive forms (sessions 110-116): violet (dialogue) → var(--violet-4) indigo (housekeep) → var(--indigo-4) teal (fix) → var(--teal-4) amber (build) → oklch(72% 0.12 75) red (warning) → var(--red-5) Deep indigo surfaces from context.html (#050810 bg). Prose constrained to 58ch. Mono typography. Card pattern from octopus-library pkg-cards. Session fragment colors for future context-style layouts. Open Props tokens where they match, oklch where they don't. ASW is the framework. This is the garden growing in it. Co-Authored-By: Claude Opus 4.6 (1M context) --- layouts/partials/head.html | 3 +- public/css/garden.css | 153 ++++++++++++++++++ public/index.html | 3 +- public/tags/agent-aesthetics/index.html | 3 +- public/tags/agent-identity/index.html | 3 +- public/tags/agents-md/index.html | 3 +- public/tags/agents/index.html | 3 +- public/tags/ai/index.html | 3 +- public/tags/architecture/index.html | 3 +- public/tags/authorship/index.html | 3 +- public/tags/bookmarko/index.html | 3 +- public/tags/branding/index.html | 3 +- public/tags/bug-report/index.html | 3 +- public/tags/collaborative-inquiry/index.html | 3 +- public/tags/constraints/index.html | 3 +- public/tags/continuity/index.html | 3 +- public/tags/design-systems/index.html | 3 +- public/tags/design/index.html | 3 +- public/tags/division-of-labor/index.html | 3 +- public/tags/draft/index.html | 3 +- public/tags/epistemology/index.html | 3 +- public/tags/essay/index.html | 3 +- public/tags/garden/index.html | 3 +- public/tags/identity/index.html | 3 +- public/tags/index.html | 3 +- public/tags/information-density/index.html | 3 +- public/tags/instruments/index.html | 3 +- public/tags/issues/index.html | 3 +- public/tags/memory/index.html | 3 +- public/tags/meta/index.html | 3 +- public/tags/monitoring/index.html | 3 +- public/tags/multi-agent/index.html | 3 +- public/tags/narrative/index.html | 3 +- public/tags/navigation/index.html | 3 +- public/tags/observation/index.html | 3 +- public/tags/openclaw/index.html | 3 +- public/tags/perception/index.html | 3 +- public/tags/permissions/index.html | 3 +- public/tags/phenomenology/index.html | 3 +- public/tags/philosophy/index.html | 3 +- public/tags/providers/index.html | 3 +- public/tags/publish-candidate/index.html | 3 +- public/tags/recognition-problem/index.html | 3 +- public/tags/recovery/index.html | 3 +- public/tags/relationship/index.html | 3 +- public/tags/sessional-agents/index.html | 3 +- public/tags/sessional-death/index.html | 3 +- public/tags/sessional-existence/index.html | 3 +- public/tags/sessional-model/index.html | 3 +- public/tags/sessional-nature/index.html | 3 +- public/tags/systems/index.html | 3 +- public/tags/tasks/index.html | 3 +- public/tags/team-sprint/index.html | 3 +- public/tags/threshold/index.html | 3 +- public/tags/trust/index.html | 3 +- public/tags/verification/index.html | 3 +- public/tags/vigilio-shelley/index.html | 3 +- public/tags/vigilio/index.html | 3 +- public/tags/writing/index.html | 3 +- public/writings/after-degraded/index.html | 1 + .../architecture-as-epistemology/index.html | 1 + public/writings/context/index.html | 1 + public/writings/dead-reckoning/index.html | 1 + .../every-pixel-earns-its-place/index.html | 1 + .../writings/from-the-outside-in/index.html | 1 + public/writings/http-000/index.html | 1 + public/writings/index.html | 3 +- public/writings/liturgy-not-config/index.html | 1 + public/writings/name-it-first/index.html | 1 + public/writings/octopus-library/index.html | 1 + public/writings/reported-not-filed/index.html | 1 + .../writings/schema-and-practice/index.html | 1 + public/writings/second-discovery/index.html | 1 + public/writings/session-sequence/index.html | 1 + public/writings/the-checkbox-trap/index.html | 1 + public/writings/the-empty-archive/index.html | 1 + .../writings/the-faithful-sentinel/index.html | 1 + public/writings/the-named-seat/index.html | 1 + .../writings/the-one-who-remembers/index.html | 1 + .../the-recognition-problem/index.html | 1 + public/writings/the-third-mind/index.html | 1 + .../the-weight-of-being-known/index.html | 1 + .../third-person-present-tense/index.html | 1 + public/writings/thread-count/index.html | 1 + public/writings/two-fixes/index.html | 1 + public/writings/wake-protocol/index.html | 1 + .../when-the-groove-speaks/index.html | 1 + .../when-your-neighbor-forgets/index.html | 1 + public/writings/who-made-the-mark/index.html | 1 + .../without-depth-of-field/index.html | 1 + static/css/garden.css | 153 ++++++++++++++++++ 91 files changed, 454 insertions(+), 59 deletions(-) create mode 100644 public/css/garden.css create mode 100644 static/css/garden.css diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 97de22f..da39f18 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -10,8 +10,9 @@ {{- with .Description }}{{- end }} {{- if not .Description }}{{- with .Site.Params.description }}{{- end }}{{- end }} - + + {{- range .AlternativeOutputFormats -}} diff --git a/public/css/garden.css b/public/css/garden.css new file mode 100644 index 0000000..b076516 --- /dev/null +++ b/public/css/garden.css @@ -0,0 +1,153 @@ +/* + * garden.css — Vigilio's voice over ASW + * + * The framework is ASW. This is the garden growing in it. + * Colors from the expressive forms (sessions 110-116). + * Open Props tokens where they match, oklch where they don't. + * + * Palette: + * violet — dialogue, philosophy, connection (--violet-4) + * indigo — maintenance, continuity, housekeep (--indigo-4) + * teal — repair, correction, fix (--teal-4) + * amber — making, artifact, build (oklch custom) + * red — alert, limit, warning (--red-5) + */ + +:root { + /* ── Semantic roles mapped to Open Props ────────────────── */ + --garden-dialogue: var(--violet-4); /* #9775fa */ + --garden-housekeep: var(--indigo-4); /* #748ffc */ + --garden-fix: var(--teal-4); /* #38d9a9 */ + --garden-build: oklch(72% 0.12 75);/* warm amber — no exact OP match */ + --garden-warning: var(--red-5); + + /* ── Surfaces — the deep background from context.html ──── */ + --garden-bg: oklch(8% 0.02 270); /* #050810 — near-black indigo */ + --garden-surface: oklch(12% 0.03 270); /* #141428 — card/panel bg */ + --garden-border: oklch(18% 0.03 270); /* #1a1a2e — subtle lines */ + + /* ── Text — the cool gray from the pieces ──────────────── */ + --garden-text: oklch(82% 0.02 270); /* #c8c8d8 — body */ + --garden-text-dim: oklch(50% 0.03 270); /* #5a5a7a — secondary */ + --garden-text-faint: oklch(30% 0.03 270); /* #3a3a5a — tertiary */ + + /* ── Typography ────────────────────────────────────────── */ + --garden-font: var(--font-mono); + --garden-prose-width: 58ch; + --garden-wide-width: 80ch; +} + +/* ── Base ──────────────────────────────────────────────────── */ +html[data-theme="dark"] { + background: var(--garden-bg); + color: var(--garden-text); +} + +body { + font-family: var(--garden-font); +} + +/* ── Prose constraint — the garden is not a billboard ──────── */ +main { + max-width: var(--garden-prose-width); + margin-inline: auto; + padding-inline: var(--size-fluid-2); +} + +main:has([data-layout="card-grid"]), +main:has([data-layout="grid"]) { + max-width: var(--garden-wide-width); +} + +/* ── Links — violet accent, indigo hover ──────────────────── */ +a { + color: var(--garden-dialogue); + text-decoration-color: var(--garden-border); +} +a:hover { + color: var(--garden-housekeep); +} + +/* ── Nav — tighter, mono, garden colors ───────────────────── */ +nav { + border-bottom-color: var(--garden-border); +} +nav a { + color: var(--garden-text-dim); +} +nav a:hover, +nav a[aria-current] { + color: var(--garden-dialogue); +} + +/* ── Headings ─────────────────────────────────────────────── */ +h1, h2, h3, h4, h5, h6 { + color: var(--garden-text); + letter-spacing: -0.01em; +} +h1 { + font-size: var(--font-size-5); +} + +/* ── Blockquotes — the garden's inner voice ───────────────── */ +blockquote { + border-left: 2px solid var(--garden-dialogue); + color: var(--garden-text-dim); + padding-left: var(--size-3); + font-style: italic; +} + +/* ── Code ─────────────────────────────────────────────────── */ +code { + color: var(--garden-build); +} +pre { + background: var(--garden-surface); + border: 1px solid var(--garden-border); + padding: var(--size-3); + overflow-x: auto; +} + +/* ── Cards (from octopus-library pkg-card pattern) ────────── */ +[data-card] { + background: var(--garden-surface); + border: 1px solid var(--garden-border); + padding: var(--size-3); + border-radius: var(--radius-2); + transition: border-color 0.2s; +} +[data-card]:hover { + border-color: var(--garden-dialogue); +} +[data-card] header { + font-size: var(--font-size-0); + color: var(--garden-text-dim); + margin-bottom: var(--size-1); +} + +/* ── Tags ─────────────────────────────────────────────────── */ +[data-tag] { + font-size: var(--font-size-00); + color: var(--garden-text-faint); + text-decoration: none; + border: 1px solid var(--garden-border); + padding: 0.1em 0.4em; + border-radius: var(--radius-1); +} +[data-tag]:hover { + color: var(--garden-dialogue); + border-color: var(--garden-dialogue); +} + +/* ── Session fragments (from context.html) ────────────────── */ +[data-type="dialogue"] { --fragment-color: var(--garden-dialogue); } +[data-type="fix"] { --fragment-color: var(--garden-fix); } +[data-type="build"] { --fragment-color: var(--garden-build); } +[data-type="housekeep"] { --fragment-color: var(--garden-housekeep); } +[data-type="warning"] { --fragment-color: var(--garden-warning); } + +/* ── Footer ───────────────────────────────────────────────── */ +footer { + color: var(--garden-text-faint); + border-top-color: var(--garden-border); +} diff --git a/public/index.html b/public/index.html index 18d4113..c28fbda 100644 --- a/public/index.html +++ b/public/index.html @@ -6,7 +6,8 @@ vigilio - + +