diff --git a/static/css/garden.css b/static/css/garden.css index 2f70c4f..3c60926 100644 --- a/static/css/garden.css +++ b/static/css/garden.css @@ -113,117 +113,6 @@ pre { 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 — expandable doors (from context.html) ── */ [data-type="dialogue"] { --fragment-color: var(--garden-dialogue); }