Skip to content

fix(overview): mobile-responsive baseline for the slide-deck microsite #586

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
HenryLach merged 2 commits into from
May 18, 2026
Merged

fix(overview): mobile-responsive baseline for the slide-deck microsite #586

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
20db2fd
fix(overview): mobile-responsive baseline for the slide-deck microsite
HenryLach May 18, 2026
37a0695
fix(overview): collapse remaining multi-column grids on mobile
HenryLach May 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions docs/taskplane-overview/01-origin-timeline.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>V1 — Origin timeline</title>
<link rel="stylesheet" href="shared.css">
<style>
Expand Down Expand Up @@ -94,6 +95,14 @@
text-align: center;
}
.footer-tag .hl { color: var(--green); }

/* Mobile: collapse the 4-column harness timeline. */
@media (max-width: 900px) {
.timeline { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
.timeline { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
Expand Down
6 changes: 6 additions & 0 deletions docs/taskplane-overview/02-light-factory-vs-dark.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>V2 — Light factory vs dark factory</title>
<link rel="stylesheet" href="shared.css">
<style>
Expand Down Expand Up @@ -90,6 +91,11 @@
color: var(--text-faint);
}
.footer-note .hl { color: var(--green); }

/* Mobile: stack the dark / light factory comparison panels. */
@media (max-width: 700px) {
.split { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
Expand Down
9 changes: 9 additions & 0 deletions docs/taskplane-overview/03-agent-quartet.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>V3 — Agent quartet</title>
<link rel="stylesheet" href="shared.css">
<style>
Expand Down Expand Up @@ -106,6 +107,14 @@
.flow-band .hl-a { color: var(--amber); }
.flow-band .hl-b { color: var(--blue); }
.flow-band .arrow { color: var(--text-faint); padding: 0 6px; }

/* Mobile: collapse the 4-agent quartet. */
@media (max-width: 900px) {
.grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
.grid { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
Expand Down
10 changes: 10 additions & 0 deletions docs/taskplane-overview/04-task-packet-anatomy.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>V4 — Anatomy of a task packet</title>
<link rel="stylesheet" href="shared.css">
<style>
Expand Down Expand Up @@ -92,6 +93,15 @@
line-height: 1.55;
}
.callout-text code { color: var(--text); background: var(--surface-2); padding: 1px 4px; border-radius: 3px; font-family: var(--mono); font-size: var(--fs-sm); }

/* Mobile: stack the PROMPT.md / STATUS.md split, and collapse callouts. */
@media (max-width: 900px) {
.callouts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
.split { grid-template-columns: 1fr; }
.callouts { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
Expand Down
8 changes: 8 additions & 0 deletions docs/taskplane-overview/05-determinism-spectrum.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>V5 — Determinism spectrum</title>
<link rel="stylesheet" href="shared.css">
<style>
Expand Down Expand Up @@ -119,6 +120,13 @@
text-align: center;
}
.principle .hl { color: var(--green); }

/* Mobile: stack the forced-deterministic / left-to-the-model split, and
drop the inner 2-col item list to a single column for readability. */
@media (max-width: 700px) {
.split { grid-template-columns: 1fr; }
.items { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
Expand Down
13 changes: 13 additions & 0 deletions docs/taskplane-overview/06-cross-model-review.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>V6 — Cross-model review flow</title>
<link rel="stylesheet" href="shared.css">
<style>
Expand Down Expand Up @@ -183,6 +184,18 @@
}
.footer-line .hl-g { color: var(--green); }
.footer-line .hl-a { color: var(--amber); }

/* Mobile: stack the worker-arrow-reviewer flow (hide the arrow column
since the vertical reading order makes the worker->reviewer direction
implicit), and collapse the 4 verdict cards. */
@media (max-width: 900px) {
.verdicts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
.flow { grid-template-columns: 1fr; }
.arrow-col { display: none; }
.verdicts { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
Expand Down
13 changes: 13 additions & 0 deletions docs/taskplane-overview/07-mailbox-protocol.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>V7 — Mailbox protocol</title>
<link rel="stylesheet" href="shared.css">
<style>
Expand Down Expand Up @@ -130,6 +131,18 @@
color: var(--text-dim);
line-height: 1.5;
}

/* Mobile: stack the 3-col topology (supervisor / mailbox / agent) and
drop the 4-col props grid to 2 columns. */
@media (max-width: 900px) {
.props { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
.topology { grid-template-columns: 1fr; gap: 18px; }
.props { grid-template-columns: 1fr; }
/* Tighten the inbox/outbox label column on phone. */
.lane { grid-template-columns: 70px 1fr; gap: 10px; }
}
</style>
</head>
<body>
Expand Down
13 changes: 13 additions & 0 deletions docs/taskplane-overview/08-waves-lanes-worktrees.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>V8 — Waves, lanes, worktrees</title>
<link rel="stylesheet" href="shared.css">
<style>
Expand Down Expand Up @@ -166,6 +167,18 @@
border-radius: 3px;
font-size: var(--fs-sm);
}

/* Mobile: the 3-lane row inside each wave stays horizontal but scrolls
inside its wave card (lane affinity is easiest to read laterally),
while the summary rule cards at the bottom stack vertically. */
@media (max-width: 900px) {
.rules { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
.wave { overflow-x: auto; }
.lanes { min-width: 540px; }
.rules { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
Expand Down
18 changes: 17 additions & 1 deletion docs/taskplane-overview/09-branching-lifecycle.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>V9 — Branching lifecycle</title>
<link rel="stylesheet" href="shared.css">
<style>
Expand Down Expand Up @@ -114,6 +115,21 @@
}
.rule .hl { color: var(--green); }
.rule .pink { color: var(--pink); }

/* Mobile: stack the develop-label row, collapse the 5-step grid, and let
the git-graph scroll horizontally so its swim lanes stay readable
instead of shrinking to a ~90px-tall strip. */
@media (max-width: 900px) {
.steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
.branch-labels { grid-template-columns: 1fr; }
.branch-name { text-align: left; }
.steps { grid-template-columns: 1fr; }
/* Horizontal-scroll the dense git-graph rather than crushing it. */
.graph-card { overflow-x: auto; }
svg.git-graph { min-width: 760px; }
}
</style>
</head>
<body>
Expand All @@ -136,7 +152,7 @@ <h1>How Taskplane uses branches</h1>
<div></div>
</div>

<svg class="git-graph" viewBox="0 0 1500 360" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<svg class="git-graph" viewBox="0 0 1500 360" xmlns="http://www.w3.org/2000/svg">
<!-- horizontal grid -->
<line x1="0" y1="60" x2="1500" y2="60" stroke="#30363d" stroke-width="2" opacity="0.4"/>
<line x1="0" y1="160" x2="1500" y2="160" stroke="#30363d" stroke-width="2" opacity="0.4"/>
Expand Down
11 changes: 11 additions & 0 deletions docs/taskplane-overview/10-semantic-merge.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>V10 — Semantic merge vs git merge</title>
<link rel="stylesheet" href="shared.css">
<style>
Expand Down Expand Up @@ -124,6 +125,16 @@
}
.monitor .hl-a { color: var(--amber); }
.monitor .hl-r { color: var(--red); }

/* Mobile: stack the git-merge / merge-agent split, and collapse the
5-step merger pipeline to 2 then 1 column. */
@media (max-width: 900px) {
.merger-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
.split { grid-template-columns: 1fr; }
.merger-grid { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
Expand Down
14 changes: 14 additions & 0 deletions docs/taskplane-overview/11-polyrepo-segments.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>V11 — Polyrepo segments</title>
<link rel="stylesheet" href="shared.css">
<style>
Expand Down Expand Up @@ -188,6 +189,19 @@
border-radius: 3px;
font-size: var(--fs-sm);
}

/* Mobile: stack the 3 repo cards, stack the 3 rule cards, and reorient
the segment-DAG flow vertically (arrows rotate from -> to v). */
@media (max-width: 900px) {
.repos { grid-template-columns: repeat(2, 1fr); }
.rules { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
.repos { grid-template-columns: 1fr; }
.rules { grid-template-columns: 1fr; }
.dag { flex-direction: column; align-items: center; }
.seg-arrow { transform: rotate(90deg); }
}
</style>
</head>
<body>
Expand Down
8 changes: 8 additions & 0 deletions docs/taskplane-overview/12-dashboard-visibility.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>V12 — Dashboard visibility map</title>
<link rel="stylesheet" href="shared.css">
<style>
Expand Down Expand Up @@ -197,6 +198,13 @@
color: var(--text-dim);
}
.footer .hl { color: var(--green); }

/* Mobile: stack the 2-column layout so the side panels move below the
dashboard screenshot instead of getting squeezed into a 320px track
that doesn't fit a phone. */
@media (max-width: 900px) {
.layout { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
Expand Down
6 changes: 6 additions & 0 deletions docs/taskplane-overview/13-why-pi.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>V13 — Why pi</title>
<link rel="stylesheet" href="shared.css">
<style>
Expand Down Expand Up @@ -84,6 +85,11 @@
.closing .hl-g { color: var(--green); }
.closing .hl-b { color: var(--blue); }
.closing .hl-a { color: var(--amber); }

/* Mobile: stack the three reasons. */
@media (max-width: 700px) {
.reasons { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
Expand Down
9 changes: 9 additions & 0 deletions docs/taskplane-overview/14-pi-capabilities.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>V14 — Pi capabilities</title>
<link rel="stylesheet" href="shared.css">
<style>
Expand Down Expand Up @@ -84,6 +85,14 @@
vertical-align: middle;
}
.for-tp-band .hl { color: var(--text); }

/* Mobile: collapse the 6 capability cards. */
@media (max-width: 900px) {
.capabilities { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
.capabilities { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
Expand Down
9 changes: 9 additions & 0 deletions docs/taskplane-overview/15-how-to-get-started.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>V15 — Getting started: install and test</title>
<link rel="stylesheet" href="shared.css">
<style>
Expand Down Expand Up @@ -99,6 +100,14 @@
.footer-band .hl-g { color: var(--green); }
.footer-band .hl-b { color: var(--blue); }
.footer-band .hl-a { color: var(--amber); }

/* Mobile: stack the 9 setup-step cards. */
@media (max-width: 900px) {
.steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
.steps { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
Expand Down
9 changes: 9 additions & 0 deletions docs/taskplane-overview/16-real-work-playbook.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>V16 — How to get started on real work</title>
<link rel="stylesheet" href="shared.css">
<style>
Expand Down Expand Up @@ -180,6 +181,14 @@
.footer-band .hl-b { color: var(--blue); }
.footer-band .hl-a { color: var(--amber); }
.footer-band .hl-p { color: var(--purple); }

/* Mobile: stack the 6 step cards. */
@media (max-width: 900px) {
.steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
.steps { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
Expand Down
Loading