|
|
@@ -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;
|
|
|
}
|