mptyl/ThothII
1
0
Fork 0
Code Issues 25 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

deck: slide 02 ported to Orbit composition + missing-piece popups

Browse Source 
- scattered island map replaces the syscard grid: four systems with
  emblem icons, names and scopes, clickable (problem popups)
- central 'Missing Pieces' column: four dashed rects with '?' marks,
  clickable (popups explaining each gap with 'The gap' box)
- title 'four missing pieces' to match the four destinations
- deck.css: scatter/isle/todo/missing-title styles
This commit is contained in:
Codex
2026-09-07 12:36:39 +02:00
parent f796b14b70
commit 0ad8577621
2 changed files with 70 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
presentation/deck/deck.css
+21 -14
View File
@@ -213,20 +213,24 @@ button.brain-btn:hover, button.brain-btn:focus-visible { transform: scale(1.18);
.arit .chip.tbd { color: var(--bordeaux-deep); border: 1px solid var(--bordeaux); background: #fff;
border-radius: 9999px; padding: 6px 12px; font: 700 10.5px/1 var(--sans); letter-spacing: .06em; }
/* where we started */
.arit .sysmap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; flex: 1; align-content: center; }
.arit .syscard { position: relative; display: block; width: 100%; border: 1.5px solid var(--line-strong);
border-radius: 8px; background: var(--surface-alt); padding: 20px 16px 14px; text-align: left;
cursor: pointer; font-family: var(--sans); transition: transform .15s ease, box-shadow .15s ease; }
.arit button.syscard:hover, .arit button.syscard:focus-visible { transform: translateY(-3px);
box-shadow: 0 6px 18px rgba(42,36,38,.14); outline: none; }
.arit .syscard b { display: block; font: 700 17px/1.3 var(--sans); color: var(--ink); margin-bottom: 6px; }
.arit .syscard .d { display: block; font: 400 12.5px/1.45 var(--sans); color: var(--ink-muted); }
.arit .syscard .tag20 { position: absolute; top: -10px; right: 12px; background: var(--bordeaux); color: #fff;
border-radius: 9999px; padding: 3px 10px; font: 700 9.5px/1 var(--sans); letter-spacing: .08em; }
.arit .syscard.ghost { border: 1.5px dashed var(--bordeaux); background: #fff; cursor: default; }
.arit .syscard.ghost b { color: var(--bordeaux-deep); }
.arit .syscard.ghost .tag20 { background: var(--bordeaux-deep); }
/* where we started — scattered orbit map */
.arit .scatter { position: relative; flex: 1; min-height: 0; }
.arit .todo-stack { position: absolute; z-index: 2; }
.arit .todo { display: flex; align-items: center; gap: 12px; border: 2px dashed var(--bordeaux);
border-radius: 8px; background: #fff; padding: 8px 12px; margin-bottom: 8px;
box-shadow: 0 2px 8px rgba(42,36,38,.06); cursor: pointer; }
.arit .todo .q { font: 800 22px/1 var(--sans); color: var(--bordeaux-deep); }
.arit .todo .tx { display: flex; flex-direction: column; }
.arit .todo b { font: 700 13.5px/1.3 var(--sans); color: var(--bordeaux-deep); }
.arit .todo .tx span { font: 400 12px/1.4 var(--sans); color: var(--ink-muted); margin-top: 2px; }
.arit .missing-title { position: absolute; font: 700 30px/1.2 var(--sans); color: var(--bordeaux-deep); }
.arit .isle { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 2px;
cursor: pointer; transform: rotate(var(--rot, 0deg)); transition: transform .18s ease;
border: none; background: none; font-family: var(--sans); width: 230px; }
.arit .isle:hover, .arit .isle:focus-visible { transform: rotate(var(--rot, 0deg)) scale(1.05); outline: none; }
.arit .isle .ico { width: var(--size, 120px); height: var(--size, 120px); color: var(--bordeaux); display: block; }
.arit .isle .nm { font: 700 16px/1.3 var(--sans); color: var(--ink); margin-top: 4px; }
.arit .isle .sc { font: 400 13.5px/1.4 var(--sans); color: var(--ink-muted); max-width: 240px; }
.arit .hint { margin-top: 12px; font: italic 400 12px/1.4 var(--sans); color: var(--ink-muted); }
/* snapshot tours + chart placeholders */
@@ -264,3 +268,6 @@ button.brain-btn:hover, button.brain-btn:focus-visible { transform: scale(1.18);
.arit.flow-slide .lead { margin-top: 6px; font-size: 15px; }
.arit.flow-slide .flow { margin-top: 14px; }
.arit.flow-slide .pillars { padding-top: 8px; }
/* popup: lead + list (missing-pieces popups) */
.ai-pop-card p.lead { font-style: italic; color: var(--ink-muted); }