diff --git a/site/src/pages/index.astro b/site/src/pages/index.astro index 03cffba..cb96bef 100644 --- a/site/src/pages/index.astro +++ b/site/src/pages/index.astro @@ -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; }