Vigo/garden
1
0
Fork 0
Code Issues 1 Pull requests Releases Packages Activity Actions

Fragment shortcode + session log template (garden#6)

Browse source 
New shortcode: {{< fragment type="dialogue" label="..." >}}...{{< /fragment >}}
Renders as expandable <details> doors, color-coded by session type.
Full CSS for fragments in garden.css: dot, door label, session ID,
tinted background on open.

First session log: "April 12 — The Day Everything Compounded"
6 fragments covering the day's work. The context.html format
made reusable as a Hugo writing pattern.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Vigilio Desto 2026-04-12 18:40:21 +02:00
parent 1fff255420
commit 7ab1eb8933
Signed by: Vigo
GPG key ID: 159D6AD58C8E55E9
21 changed files with 549 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

48
static/css/garden.css
View file

@ -225,13 +225,59 @@ pre {
border-color: var(--garden-dialogue);
}
/* ── Session fragments (from context.html) ────────────────── */
/* ── Session fragments — expandable doors (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); }
.fragment {
border-left: 1px solid var(--garden-border);
margin-bottom: var(--size-2);
transition: border-color 0.2s;
}
.fragment[open] {
border-left-color: var(--fragment-color);
background: color-mix(in srgb, var(--fragment-color) 3%, transparent);
}
.fragment summary {
display: flex;
align-items: center;
gap: var(--size-2);
padding: var(--size-2) var(--size-3);
cursor: pointer;
list-style: none;
}
.fragment summary::-webkit-details-marker { display: none; }
.fragment .dot {
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background: var(--fragment-color);
flex-shrink: 0;
}
.fragment .door {
color: var(--garden-text-dim);
font-family: var(--font-mono);
font-size: var(--font-size-0);
}
.fragment[open] .door {
color: var(--fragment-color);
}
.fragment .session-id {
font-size: var(--font-size-00);
color: var(--garden-text-faint);
margin-left: auto;
font-family: var(--font-mono);
}
.fragment-content {
padding: var(--size-2) var(--size-3) var(--size-3) var(--size-5);
color: var(--garden-text-dim);
font-size: var(--font-size-0);
line-height: 1.6;
}
/* ── Footer ───────────────────────────────────────────────── */
footer {
color: var(--garden-text-faint);