feat: banner strips + article page styling with shared velvet gradient

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-15 10:08:52 +02:00
parent 499fbd0484
commit 625c75935e
2 changed files with 65 additions and 3 deletions
@@ -542,3 +542,60 @@ a.sow-card:hover {
 		grid-template-columns: 1fr;
 	}
 }
+
+// Banners: first post image, or the shared velvet gradient
+.sow-banner {
+	height: 140px;
+	background-size: cover;
+	background-position: center;
+}
+
+.sow-banner-gradient {
+	@include wg-velvet-cover;
+}
+
+.sow-list-item .sow-banner {
+	grid-column: 1 / -1;
+	height: 110px;
+	margin: calc(var(--wg-space-sm) * -1) calc(var(--wg-space-md) * -1) 0;
+	border-radius: 8px 8px 0 0;
+}
+
+// Article page
+.sow-article-banner {
+	height: clamp(180px, 32vw, 340px);
+	background-size: cover;
+	background-position: center;
+	border: 1px solid var(--wg-border);
+	border-radius: 8px;
+}
+
+.sow-article {
+	max-width: 760px;
+	margin: 0 auto;
+	padding: var(--wg-space-lg) 0;
+
+	header h1 {
+		margin: 0 0 6px;
+	}
+}
+
+.sow-article-date {
+	font-family: var(--wg-font-code);
+	font-size: 0.75rem;
+	letter-spacing: 0.06em;
+	text-transform: uppercase;
+	color: var(--wg-text-muted);
+	margin-bottom: var(--wg-space-md);
+}
+
+.sow-article-body {
+	color: var(--wg-text-soft);
+
+	img,
+	video {
+		display: block;
+		max-width: 100%;
+		border-radius: 8px;
+	}
+}