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

+
+ + +
+ -