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:
co-authored by
Claude Opus 4.7
parent
18a99f5f0f
commit
1be8e7830f
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user