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);
|
grid-template-columns: repeat(3, 1fr);
|
||||||
}
|
}
|
||||||
.feature {
|
.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 {
|
.feature + .feature {
|
||||||
border-inline-start: 1px solid var(--cg-rule);
|
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 {
|
.ficon {
|
||||||
width: 40px;
|
grid-column: 1;
|
||||||
height: 40px;
|
grid-row: 1 / 3;
|
||||||
margin-bottom: 1.2rem;
|
align-self: center;
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
color: var(--cg-ink);
|
color: var(--cg-ink);
|
||||||
}
|
}
|
||||||
.feature h2 {
|
.feature h2 {
|
||||||
|
grid-column: 3;
|
||||||
|
grid-row: 1;
|
||||||
font-size: 1.3rem;
|
font-size: 1.3rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
margin: 0 0 0.6rem;
|
margin: 0 0 0.6rem;
|
||||||
}
|
}
|
||||||
.feature p {
|
.feature p {
|
||||||
|
grid-column: 3;
|
||||||
|
grid-row: 2;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
line-height: 1.55;
|
line-height: 1.55;
|
||||||
color: var(--cg-ink-2);
|
color: var(--cg-ink-2);
|
||||||
@@ -403,6 +422,14 @@ const install = 'npx @colbymchenry/codegraph';
|
|||||||
border-inline-start: none;
|
border-inline-start: none;
|
||||||
border-top: 1px solid var(--cg-rule);
|
border-top: 1px solid var(--cg-rule);
|
||||||
}
|
}
|
||||||
|
.feature {
|
||||||
|
column-gap: 1rem;
|
||||||
|
padding: 2rem 1.25rem;
|
||||||
|
}
|
||||||
|
.ficon {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
}
|
||||||
.nav {
|
.nav {
|
||||||
padding: 1rem 1.25rem;
|
padding: 1rem 1.25rem;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user