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>
This commit is contained in:
Colby Mchenry
2026-05-24 13:47:03 -05:00
committed by GitHub
co-authored by Claude Opus 4.7
parent 18a99f5f0f
commit 1be8e7830f
+31 -4
View File
@@ -309,23 +309,42 @@ const install = 'npx @colbymchenry/codegraph';
grid-template-columns: repeat(3, 1fr);
}
.feature {
padding: 2.4rem 2rem 2.8rem;
display: grid;
grid-template-columns: auto 1px 1fr;
column-gap: 1.5rem;
align-items: center;
padding: 2.6rem 2rem;
}
.feature + .feature {
border-inline-start: 1px solid var(--cg-rule);
}
/* full-height vertical divider between the icon and the text */
.feature::before {
content: '';
grid-column: 2;
grid-row: 1 / 3;
align-self: stretch;
width: 1px;
background: var(--cg-rule);
}
.ficon {
width: 40px;
height: 40px;
margin-bottom: 1.2rem;
grid-column: 1;
grid-row: 1 / 3;
align-self: center;
width: 64px;
height: 64px;
color: var(--cg-ink);
}
.feature h2 {
grid-column: 3;
grid-row: 1;
font-size: 1.3rem;
font-weight: 700;
margin: 0 0 0.6rem;
}
.feature p {
grid-column: 3;
grid-row: 2;
font-size: 1rem;
line-height: 1.55;
color: var(--cg-ink-2);
@@ -403,6 +422,14 @@ const install = 'npx @colbymchenry/codegraph';
border-inline-start: none;
border-top: 1px solid var(--cg-rule);
}
.feature {
column-gap: 1rem;
padding: 2rem 1.25rem;
}
.ficon {
width: 48px;
height: 48px;
}
.nav {
padding: 1rem 1.25rem;
}