Skip to content

Commit 1be8e78

Browse files
colbymchenryclaude
andauthored
fix(site): large left-aligned feature icons to match the mockup (#379)
Lay out each landing feature as icon | divider | text — a 64px icon on the left, a full-height vertical rule, then heading + description — instead of a small icon stacked on top. Pure CSS grid (divider via ::before), with smaller icon/gaps on mobile so the text stays readable. Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1 parent 18a99f5 commit 1be8e78

1 file changed

Lines changed: 31 additions & 4 deletions

File tree

‎site/src/pages/index.astro‎

Lines changed: 31 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -309,23 +309,42 @@ const install = 'npx @colbymchenry/codegraph';
309309
grid-template-columns: repeat(3, 1fr);
310310
}
311311
.feature {
312-
padding: 2.4rem 2rem 2.8rem;
312+
display: grid;
313+
grid-template-columns: auto 1px 1fr;
314+
column-gap: 1.5rem;
315+
align-items: center;
316+
padding: 2.6rem 2rem;
313317
}
314318
.feature + .feature {
315319
border-inline-start: 1px solid var(--cg-rule);
316320
}
321+
/* full-height vertical divider between the icon and the text */
322+
.feature::before {
323+
content: '';
324+
grid-column: 2;
325+
grid-row: 1 / 3;
326+
align-self: stretch;
327+
width: 1px;
328+
background: var(--cg-rule);
329+
}
317330
.ficon {
318-
width: 40px;
319-
height: 40px;
320-
margin-bottom: 1.2rem;
331+
grid-column: 1;
332+
grid-row: 1 / 3;
333+
align-self: center;
334+
width: 64px;
335+
height: 64px;
321336
color: var(--cg-ink);
322337
}
323338
.feature h2 {
339+
grid-column: 3;
340+
grid-row: 1;
324341
font-size: 1.3rem;
325342
font-weight: 700;
326343
margin: 0 0 0.6rem;
327344
}
328345
.feature p {
346+
grid-column: 3;
347+
grid-row: 2;
329348
font-size: 1rem;
330349
line-height: 1.55;
331350
color: var(--cg-ink-2);
@@ -403,6 +422,14 @@ const install = 'npx @colbymchenry/codegraph';
403422
border-inline-start: none;
404423
border-top: 1px solid var(--cg-rule);
405424
}
425+
.feature {
426+
column-gap: 1rem;
427+
padding: 2rem 1.25rem;
428+
}
429+
.ficon {
430+
width: 48px;
431+
height: 48px;
432+
}
406433
.nav {
407434
padding: 1rem 1.25rem;
408435
}

0 commit comments

Comments
 (0)