Преглед изворни кода

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>
Colby Mchenry пре 4 недеља
родитељ
комит
1be8e7830f
1 измењених фајлова са 31 додато и 4 уклоњено
  1. 31 4
      site/src/pages/index.astro

+ 31 - 4
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;
 				}