Skip to content

fix(landing): balance the two-faced threshold card #4

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
hoainho merged 1 commit into from
Jul 11, 2026
Merged

fix(landing): balance the two-faced threshold card #4

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
48 changes: 27 additions & 21 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,21 +127,27 @@

/* hero: two-faced threshold card */
.threshold{position:relative;border:1px solid var(--line-2);border-radius:20px;background:
linear-gradient(150deg,color-mix(in srgb,var(--steel) 12%,transparent),transparent 42%),
linear-gradient(300deg,color-mix(in srgb,var(--warn) 12%,transparent),transparent 42%),var(--panel);
padding:26px;box-shadow:var(--shadow);overflow:hidden}
.threshold::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;
background:linear-gradient(var(--steel),var(--accent),var(--warn));opacity:.5;transform:translateX(-.5px)}
.th-head{display:flex;justify-content:space-between;font-family:"SF Mono",ui-monospace,monospace;
font-size:.72rem;letter-spacing:1px;color:var(--dim);margin-bottom:16px;text-transform:uppercase}
.th-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.th-col h5{font-family:"SF Mono",ui-monospace,monospace;font-size:.7rem;letter-spacing:1px;color:var(--muted);margin-bottom:9px}
linear-gradient(150deg,color-mix(in srgb,var(--steel) 10%,transparent),transparent 46%),
linear-gradient(300deg,color-mix(in srgb,var(--warn) 10%,transparent),transparent 46%),var(--panel);
padding:24px 28px 26px;box-shadow:var(--shadow);overflow:hidden}
.th-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
font-family:"SF Mono",ui-monospace,monospace;font-size:.7rem;letter-spacing:1.5px;
color:var(--dim);margin-bottom:20px;text-transform:uppercase}
Comment on lines +133 to +135

@gemini-code-assist gemini-code-assist Bot Jul 11, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

On mobile screens, the columns stack vertically (the "PAST" column on top, and the "FUTURE" column on the bottom). However, the .th-head header ("PAST · gate · FUTURE") remains horizontal, which is visually misleading. Since each column already has its own clear header (baseline and current), we should hide .th-head on mobile screens to keep the layout clean and intuitive.

Suggested change
.th-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
font-family:"SF Mono",ui-monospace,monospace;font-size:.7rem;letter-spacing:1.5px;
color:var(--dim);margin-bottom:20px;text-transform:uppercase}
.th-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
font-family:"SF Mono",ui-monospace,monospace;font-size:.7rem;letter-spacing:1.5px;
color:var(--dim);margin-bottom:20px;text-transform:uppercase}
@media(max-width:560px){.th-head{display:none}}

.th-head .r{text-align:right}
.th-head .c{text-align:center;padding:0 14px}
/* columns area — divider lives only here, exactly in the gutter */
.th-cols{position:relative;display:grid;grid-template-columns:1fr 1fr}
.th-cols::before{content:"";position:absolute;top:2px;bottom:2px;left:50%;width:1px;
background:linear-gradient(var(--steel),var(--accent) 52%,var(--warn));opacity:.4;transform:translateX(-.5px)}
Comment on lines +140 to +141

@gemini-code-assist gemini-code-assist Bot Jul 11, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

With the vertical divider moved from .threshold::before to .th-cols::before, the existing mobile override at line 310 (.threshold::before { display: none; }) is now obsolete. On screens smaller than 560px, the stacked single-column layout will display the vertical divider right down the middle, slicing through the text.

We should add a media query override to hide .th-cols::before on mobile screens.

Suggested change
.th-cols::before{content:"";position:absolute;top:2px;bottom:2px;left:50%;width:1px;
background:linear-gradient(var(--steel),var(--accent) 52%,var(--warn));opacity:.4;transform:translateX(-.5px)}
.th-cols::before{content:"";position:absolute;top:2px;bottom:2px;left:50%;width:1px;
background:linear-gradient(var(--steel),var(--accent) 52%,var(--warn));opacity:.4;transform:translateX(-.5px)}
@media(max-width:560px){.th-cols::before{display:none}}

.th-col{display:flex;flex-direction:column}
.th-col.past{padding-right:22px} .th-col.future{padding-left:22px}

@gemini-code-assist gemini-code-assist Bot Jul 11, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

On mobile screens (max-width: 560px), the columns stack vertically. Keeping the asymmetric desktop paddings (padding-right: 22px on .past and padding-left: 22px on .future) will cause the text to be misaligned and off-center relative to the card container.

We should reset these paddings to 0 on mobile screens.

Suggested change
.th-col.past{padding-right:22px} .th-col.future{padding-left:22px}
.th-col.past{padding-right:22px} .th-col.future{padding-left:22px}
@media(max-width:560px){.th-col.past{padding-right:0} .th-col.future{padding-left:0}}

.th-col h5{font-family:"SF Mono",ui-monospace,monospace;font-size:.74rem;letter-spacing:.3px;margin-bottom:4px}
.th-col.past h5{color:var(--steel)} .th-col.future h5{color:var(--warn)}
.th-row{display:flex;align-items:center;gap:8px;font-family:"SF Mono",ui-monospace,monospace;font-size:.76rem;
color:var(--muted);padding:6px 0;border-top:1px solid var(--line)}
.th-row .k{color:var(--ink)}
.th-gate{margin-top:16px;display:flex;align-items:center;justify-content:center;gap:9px;
padding:11px;border-radius:11px;border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
.th-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
font-family:"SF Mono",ui-monospace,monospace;font-size:.78rem;padding:9px 0;border-top:1px solid var(--line)}
.th-row .k{color:var(--muted)} .th-row .v{color:var(--ink);font-variant-numeric:tabular-nums}
.th-gate{margin-top:18px;display:flex;align-items:center;justify-content:center;gap:9px;
padding:12px;border-radius:12px;border:1px solid color-mix(in srgb,var(--accent) 38%,transparent);
background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--pass-ink);
font-family:"SF Mono",ui-monospace,monospace;font-size:.8rem;font-weight:600}
.th-gate svg{width:16px;height:16px;stroke:var(--accent);fill:none;stroke-width:2}
Expand Down Expand Up @@ -355,19 +361,19 @@ <h1>

<!-- two-faced threshold -->
<div class="threshold reveal" aria-hidden="true">
<div class="th-head"><span>PAST</span><span>· gate ·</span><span>FUTURE</span></div>
<div class="th-head"><span class="l">PAST</span><span class="c">· gate ·</span><span class="r">FUTURE</span></div>
<div class="th-cols">
<div class="th-col past">
<h5>&#9666; baseline</h5>
<div class="th-row"><span class="k">score</span> 3/3 pass</div>
<div class="th-row"><span class="k">tokens</span> 11,902</div>
<div class="th-row"><span class="k">verdict</span> green</div>
<div class="th-row"><span class="k">score</span><span class="v">3/3 pass</span></div>
<div class="th-row"><span class="k">tokens</span><span class="v">11,902</span></div>
<div class="th-row"><span class="k">verdict</span><span class="v">green</span></div>
</div>
<div class="th-col future">
<h5>current &#9656;</h5>
<div class="th-row"><span class="k">score</span> 3/3 pass</div>
<div class="th-row"><span class="k">tokens</span> 12,480</div>
<div class="th-row"><span class="k">drift</span> none</div>
<div class="th-row"><span class="k">score</span><span class="v">3/3 pass</span></div>
<div class="th-row"><span class="k">tokens</span><span class="v">12,480</span></div>
<div class="th-row"><span class="k">drift</span><span class="v">none</span></div>
</div>
</div>
<div class="th-gate">
Expand Down
Loading