Vigilio Desto
f7b587f3fa
Ported the octopus-library pkg-card pattern into reusable Hugo components: - layouts/partials/pkg-card.html — renders data-card="pkg" with category - layouts/shortcodes/pkg-card.html — markdown-usable shortcode - garden.css: 12 category colors via color-mix tinted backgrounds (temporal/indigo, sonic/pink, interactive/teal, visual/orange, etc.) Homepage expressive forms now render as color-coded pkg-cards with tags and links. Each category gets a left border accent + tinted pill. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
239 lines
9.4 KiB
CSS
239 lines
9.4 KiB
CSS
/*
|
|
* 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 — override ASW tokens with indigo hue ───── */
|
|
--garden-bg: oklch(14% 0.03 270);
|
|
--garden-surface: oklch(18% 0.04 270);
|
|
--garden-border: oklch(24% 0.04 270);
|
|
|
|
/* Override ASW surface tokens so body/cards use our palette */
|
|
--surface: var(--garden-bg);
|
|
--surface-1: var(--garden-surface);
|
|
--surface-2: oklch(22% 0.04 270);
|
|
--surface-card: var(--garden-surface);
|
|
--surface-hover: var(--surface-2);
|
|
|
|
/* ── 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-color: var(--garden-bg);
|
|
color: var(--garden-text);
|
|
}
|
|
/* Force body too — ASW sets background-color: var(--surface) */
|
|
body {
|
|
background-color: var(--garden-bg);
|
|
}
|
|
|
|
body {
|
|
font-family: var(--garden-font);
|
|
}
|
|
|
|
/* ── Layout — ASW handles body > main container now ────────── */
|
|
/* Override --width-lg for narrower garden feel */
|
|
:root {
|
|
--width-lg: 800px;
|
|
}
|
|
|
|
/* ── 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 — base (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;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--size-2);
|
|
}
|
|
[data-card]:hover {
|
|
border-color: var(--garden-dialogue);
|
|
}
|
|
[data-card] header {
|
|
font-size: var(--font-size-00);
|
|
color: var(--garden-text-faint);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
[data-card] footer {
|
|
font-size: var(--font-size-00);
|
|
color: var(--garden-text-faint);
|
|
margin-top: auto;
|
|
}
|
|
[data-card] h4 {
|
|
margin: 0;
|
|
}
|
|
[data-card] p {
|
|
font-size: var(--font-size-0);
|
|
color: var(--garden-text-dim);
|
|
margin: 0;
|
|
}
|
|
|
|
/* ── Pkg cards — color-coded by category ──────────────────── */
|
|
[data-card="pkg"] {
|
|
border-left: 3px solid var(--garden-border);
|
|
}
|
|
[data-card="pkg"][data-category="dialogue"] { border-left-color: var(--violet-4); }
|
|
[data-card="pkg"][data-category="build"] { border-left-color: var(--indigo-4); }
|
|
[data-card="pkg"][data-category="fix"] { border-left-color: var(--teal-4); }
|
|
[data-card="pkg"][data-category="artifact"] { border-left-color: var(--garden-build); }
|
|
[data-card="pkg"][data-category="scripting"] { border-left-color: var(--cyan-5); }
|
|
[data-card="pkg"][data-category="design"] { border-left-color: var(--violet-5); }
|
|
[data-card="pkg"][data-category="parsing"] { border-left-color: var(--blue-5); }
|
|
[data-card="pkg"][data-category="sonic"] { border-left-color: var(--pink-5); }
|
|
[data-card="pkg"][data-category="temporal"] { border-left-color: var(--indigo-6); }
|
|
[data-card="pkg"][data-category="interactive"]{ border-left-color: var(--teal-5); }
|
|
[data-card="pkg"][data-category="visual"] { border-left-color: var(--orange-5); }
|
|
[data-card="pkg"][data-category="typographic"]{ border-left-color: var(--violet-3); }
|
|
[data-card="pkg"][data-category="portrait"] { border-left-color: var(--violet-7); }
|
|
|
|
[data-card-name] {
|
|
font-family: var(--font-mono);
|
|
font-weight: 700;
|
|
color: var(--garden-text);
|
|
}
|
|
|
|
[data-card-cat] {
|
|
font-size: 0.7rem;
|
|
font-family: var(--font-mono);
|
|
padding: 2px 7px;
|
|
border-radius: var(--radius-2);
|
|
}
|
|
/* Category pill colors — color-mix for subtle tinted backgrounds */
|
|
[data-category="dialogue"] [data-card-cat] { background: color-mix(in srgb, var(--violet-4) 15%, transparent); color: var(--violet-4); }
|
|
[data-category="build"] [data-card-cat] { background: color-mix(in srgb, var(--indigo-4) 15%, transparent); color: var(--indigo-4); }
|
|
[data-category="fix"] [data-card-cat] { background: color-mix(in srgb, var(--teal-4) 15%, transparent); color: var(--teal-4); }
|
|
[data-category="artifact"] [data-card-cat] { background: color-mix(in srgb, var(--garden-build) 15%, transparent); color: var(--garden-build); }
|
|
[data-category="scripting"] [data-card-cat] { background: color-mix(in srgb, var(--cyan-5) 15%, transparent); color: var(--cyan-5); }
|
|
[data-category="design"] [data-card-cat] { background: color-mix(in srgb, var(--violet-5) 15%, transparent); color: var(--violet-5); }
|
|
[data-category="sonic"] [data-card-cat] { background: color-mix(in srgb, var(--pink-5) 15%, transparent); color: var(--pink-5); }
|
|
[data-category="temporal"] [data-card-cat] { background: color-mix(in srgb, var(--indigo-6) 15%, transparent); color: var(--indigo-6); }
|
|
[data-category="interactive"] [data-card-cat] { background: color-mix(in srgb, var(--teal-5) 15%, transparent); color: var(--teal-5); }
|
|
[data-category="visual"] [data-card-cat] { background: color-mix(in srgb, var(--orange-5) 15%, transparent); color: var(--orange-5); }
|
|
[data-category="typographic"] [data-card-cat] { background: color-mix(in srgb, var(--violet-3) 15%, transparent); color: var(--violet-3); }
|
|
[data-category="portrait"] [data-card-cat] { background: color-mix(in srgb, var(--violet-7) 15%, transparent); color: var(--violet-7); }
|
|
|
|
[data-card-desc] {
|
|
color: var(--garden-text-dim);
|
|
line-height: 1.5;
|
|
flex: 1;
|
|
}
|
|
|
|
[data-card-tags] {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
[data-card-reaches] {
|
|
font-size: 0.78rem;
|
|
color: var(--garden-text-faint);
|
|
border-top: 1px solid var(--garden-border);
|
|
padding-top: var(--size-2);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* ── Tags ─────────────────────────────────────────────────── */
|
|
[data-tag] {
|
|
font-size: var(--font-size-0);
|
|
color: var(--garden-text-dim);
|
|
text-decoration: none;
|
|
border: 1px solid oklch(30% 0.04 270);
|
|
padding: 0.2em 0.6em;
|
|
border-radius: var(--radius-2);
|
|
}
|
|
[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);
|
|
}
|