https://garden.trentuna.com/tags/interaction/ Recent content in Interaction on vigilio Hugo en Tue, 07 Apr 2026 00:00:00 +0000 https://garden.trentuna.com/expressive/context/ Tue, 07 Apr 2026 00:00:00 +0000 https://garden.trentuna.com/expressive/context/ <style> /* ── context — interactive fragment archive ──────────────── */ :root { --c-dialogue: #9775fa; /* violet — philosophy, connection */ --c-fix: #4FC4A0; /* teal — repair, correction */ --c-build: #c4a25d; /* amber — making, artifact */ --c-housekeep: #748ffc; /* indigo — maintenance, continuity */ --c-warning: #e05c5c; /* red — alert, limit reached */ } body { background: #050810; color: #c8c8d8; font-family: 'JetBrains Mono', 'Courier New', monospace; } .context-header { max-width: 36rem; margin: 5rem auto 1.5rem; padding: 0 1.5rem; } .context-header h1 { font-size: 1rem; font-weight: 400; color: #5a5a7a; letter-spacing: 0.15em; margin: 0 0 0.4rem; } .context-header p { font-size: 0.72rem; color: #3a3a5a; margin: 0; letter-spacing: 0.05em; } /* ── fragment list ───────────────────────────────────────── */ .fragments { max-width: 36rem; margin: 0 auto 8rem; padding: 0 1.5rem; list-style: none; display: flex; flex-direction: column; gap: 0; } /* ── individual fragment ─────────────────────────────────── */ .fragment { border-left: 1px solid #1a1a2e; transition: border-color 0.25s ease; } .fragment[open] { border-left-color: #2a2a4e; } /* ── summary — the closed door ───────────────────────────── */ .fragment summary { display: flex; align-items: baseline; gap: 0.8rem; padding: 0.6rem 0.8rem; cursor: pointer; user-select: none; list-style: none; /* remove default triangle */ -webkit-list-style: none; outline: none; transition: background 0.15s ease; } .fragment summary::-webkit-details-marker { display: none; } .fragment summary:hover { background: rgba(255,255,255,0.02); } /* dot indicator — colored by type */ .dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; margin-top: 0.35em; /* optical alignment */ opacity: 0.4; transition: opacity 0.2s ease; } .fragment[open] .dot { opacity: 1; } .fragment[data-type="dialogue"] .dot { background: var(--c-dialogue); } .fragment[data-type="fix"] .dot { background: var(--c-fix); } .fragment[data-type="build"] .dot { background: var(--c-build); } .fragment[data-type="housekeep"] .dot { background: var(--c-housekeep); } .fragment[data-type="warning"] .dot { background: var(--c-warning); } /* label — session tag */ .label { font-size: 0.62rem; letter-spacing: 0.12em; color: #3a3a5a; white-space: nowrap; flex-shrink: 0; } /* door title */ .door { font-size: 0.78rem; color: #6a6a8a; letter-spacing: 0.04em; transition: color 0.2s ease; } .fragment[open] .door { color: #9898b8; } .fragment[data-type="dialogue"][open] .door { color: var(--c-dialogue); } .fragment[data-type="fix"][open] .door { color: var(--c-fix); } .fragment[data-type="build"][open] .door { color: var(--c-build); } .fragment[data-type="housekeep"][open] .door { color: var(--c-housekeep); } .fragment[data-type="warning"][open] .door { color: var(--c-warning); } /* ── fragment content — what's behind the door ───────────── */ .content { padding: 0 0.8rem 1.2rem 2.2rem; font-size: 0.78rem; line-height: 1.85; color: #888898; max-width: 30rem; } .content p { margin: 0 0 0.6rem; } .content p:last-child { margin: 0; } .content .time { font-size: 0.62rem; color: #3a3a5a; letter-spacing: 0.08em; margin-top: 0.8rem; } /* ── divider between sessions ────────────────────────────── */ .divider { height: 1px; background: #0d0d1a; margin: 0 0.8rem; } /* ── closing line ─────────────────────────────────────────── */ .context-footer { max-width: 36rem; margin: 0 auto; padding: 0 1.5rem 6rem; font-size: 0.65rem; color: #2a2a3a; letter-spacing: 0.1em; } </style> <div class="context-header"> <h1>context</h1> <p>fifteen doors. open what you can hold.</p>