From a038adde7b9740b56e06f1aa97a85fec76c2ba30 Mon Sep 17 00:00:00 2001 From: Russell Ballestrini Date: Sun, 31 May 2026 11:59:11 -0400 Subject: [PATCH] =?UTF-8?q?zebra-spaces:=20two-column=20layout=20=E2=80=94?= =?UTF-8?q?=20right=3Dcontrols=20(50%),=20left=3Dtimeline=20(placeholder)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The control panel (identity, space, room, log) moves to a right column occupying 50% of the page width. Left column is reserved for a timeline to come; for now it shows a one-line placeholder. Stacks to single column below 800px so mobile stays usable. Footer spans full width. --- web/zebra-spaces.html | 39 +++++++++++++++++++++++++++++++++++---- 1 file changed, 35 insertions(+), 4 deletions(-) diff --git a/web/zebra-spaces.html b/web/zebra-spaces.html index c8df05f..3ec201f 100644 --- a/web/zebra-spaces.html +++ b/web/zebra-spaces.html @@ -14,7 +14,27 @@ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: monospace; background: #fff; color: #000; - padding: 2rem; max-width: 720px; margin: 0 auto; + padding: 2rem; max-width: 1440px; margin: 0 auto; + } + /* two-column page: left = timeline (blank for now, ~50%), right = controls. + * stacks below 800px so the controls stay usable on a phone. */ + .page { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 2rem; + align-items: start; + } + .timeline { + border-right: 1px solid #ddd; padding-right: 2rem; min-height: 60vh; + } + .timeline-placeholder { + font-size: 0.8rem; color: #999; padding: 1rem 0; line-height: 1.6; + } + @media (max-width: 800px) { + body { padding: 1rem; } + .page { grid-template-columns: 1fr; gap: 1rem; } + .timeline { border-right: none; border-bottom: 1px solid #ddd; + padding-right: 0; padding-bottom: 1rem; min-height: 0; } } h1 { font-family: 'chunkfiveregular', serif; @@ -105,6 +125,14 @@ +
+ +
+

timeline — coming soon

+
+ + +
+ -