Skip to content

Align card headers with subgrid; tighten the first screen #100

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
BrickerP merged 1 commit into from
Oct 19, 2026
Merged

Align card headers with subgrid; tighten the first screen #100

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
12 changes: 7 additions & 5 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,9 +95,9 @@
.nav nav a.nav__cta{color:var(--red);text-decoration:underline;text-decoration-color:var(--red)}

.hero{padding:clamp(24px,3.5vh,40px) 0 clamp(16px,2.2vw,26px)}
.hero .wrap{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:clamp(22px,3.2vw,42px);min-height:calc(100vh - 100px)}
@supports(height:100svh){.hero .wrap{min-height:calc(100svh - 100px)}}
.hero__body{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(28px,4vw,64px);align-items:center;align-content:center}
.hero .wrap{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:clamp(22px,3.2vw,42px);min-height:calc(100vh - 100px - clamp(0px,15vh,150px))}
@supports(height:100svh){.hero .wrap{min-height:calc(100svh - 100px - clamp(0px,15vh,150px))}}
.hero__body{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(28px,4vw,64px);align-items:center;align-content:center;padding-bottom:clamp(0px,4vh,40px)}
.entry{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;margin-bottom:10px}
.name{font-family:var(--serif);font-weight:600;color:var(--ink);font-size:clamp(40px,4.6vw,62px);line-height:1.04;letter-spacing:-.01em}
.name-alt{margin-top:6px}
Expand All @@ -113,6 +113,7 @@

.hero__copy{position:relative;z-index:1}
.fig{position:relative;z-index:0;width:min(100%,370px);justify-self:end}
@media (min-width:1100px){.fig{width:min(100%,440px)}}
.hook{display:flex;align-items:baseline;gap:10px 18px;flex-wrap:wrap;text-decoration:none;color:var(--graphite);border-top:1px solid var(--rule);padding-top:14px}
.hook__name{font-family:var(--serif);font-style:italic;font-size:clamp(16px,1.35vw,19px);color:var(--ink)}
.hook__go{margin-left:auto}
Expand Down Expand Up @@ -141,7 +142,7 @@
.pendulum-bar button:hover,.pendulum-delta:hover{color:var(--red)}
.pendulum-delta input{width:min(148px,38vw);accent-color:var(--red);margin:0}
.pendulum-bar .mono{min-width:4.2em}
.film-screen{padding:clamp(60px,9vw,110px) 0 clamp(80px,11vw,140px)}
.film-screen{padding:clamp(36px,5vw,64px) 0 clamp(80px,11vw,140px)}
.plate{margin:0 auto;max-width:1040px}
.plate__frame{position:relative;background:#fffdf7;border:1px solid var(--rule);padding:clamp(10px,1.2vw,14px);box-shadow:0 1px 0 var(--rule),0 18px 40px -30px rgba(31,58,95,.5)}
.plate__frame.has-ruling{border-color:transparent}
Expand Down Expand Up @@ -201,6 +202,7 @@
.labs{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.6vw,36px)}
.lab{position:relative;display:flex;flex-direction:column;background:rgba(255,253,247,.86);border:1px solid var(--rule);padding:22px 24px 20px;min-width:0}
.lab.has-ruling{border-color:transparent}
@supports(grid-template-rows:subgrid){.lab:not(.lab--featured){display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0}}
.lab--featured{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(24px,3vw,52px);align-items:center;padding:clamp(26px,2.6vw,34px) clamp(26px,2.8vw,40px)}
.lab__main{display:flex;flex-direction:column;min-width:0}
.lab--featured h3{font-size:clamp(24px,2.4vw,32px)}
Expand Down Expand Up @@ -466,7 +468,7 @@ <h3><a href="/beijing-loop/">Beijing — Endless <span class="ul" data-ink="1">S
<span class="pen-note pen-note--b" aria-hidden="true">one take</span>
</li>
<li class="lab" data-ruled>
<p class="lab__n"><span class="mono">Exp. 03 · open research</span><span class="mono">10 models · 8 labs</span></p>
<p class="lab__n"><span class="mono">Exp. 03 · open research · monthly</span><span class="mono">10 models · 8 labs</span></p>
<h3><a href="https://brickerp.github.io/agent-stack-index/">Agent <span class="ul" data-ink="2">Stack Index</span></a></h3>
<p class="lab__fact">What AI coding models pick when they start a project from scratch · 29 categories · 2,670 answers · open data</p>
<div class="lab__links">
Expand Down
Loading