build: garden update 2026-04-18 22:34 — static/css/garden.css
This commit is contained in:
parent
5dec7c1436
commit
401743f733
1 changed files with 0 additions and 111 deletions
|
|
@ -113,117 +113,6 @@ pre {
|
||||||
overflow-x: auto;
|
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) ── */
|
/* ── Session fragments — expandable doors (from context.html) ── */
|
||||||
[data-type="dialogue"] { --fragment-color: var(--garden-dialogue); }
|
[data-type="dialogue"] { --fragment-color: var(--garden-dialogue); }
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue