From 625c75935eea62eaa9eebff3697c2390d9e8bb53 Mon Sep 17 00:00:00 2001 From: vickydotbat Date: Wed, 15 Jul 2026 10:08:52 +0200 Subject: [PATCH 1/3] feat: banner strips + article page styling with shared velvet gradient Co-Authored-By: Claude Fable 5 --- scss/westgate/_pages.scss | 57 ++++++++++++++++++++++++++++++++++++ scss/westgate/_surfaces.scss | 11 +++++-- 2 files changed, 65 insertions(+), 3 deletions(-) diff --git a/scss/westgate/_pages.scss b/scss/westgate/_pages.scss index c2546f4..455a896 100644 --- a/scss/westgate/_pages.scss +++ b/scss/westgate/_pages.scss @@ -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; + } +} diff --git a/scss/westgate/_surfaces.scss b/scss/westgate/_surfaces.scss index 8ae0edf..b4e0bb2 100644 --- a/scss/westgate/_surfaces.scss +++ b/scss/westgate/_surfaces.scss @@ -251,13 +251,18 @@ li[component="category/topic"] .user-icon { } } +// shared velvet gradient: groups/profile default covers + sow banner fallback +@mixin wg-velvet-cover { + background-image: + radial-gradient(120% 90% at 18% 0%, rgba(58, 24, 48, 0.6), transparent 60%), + linear-gradient(100deg, #2a1222, #110f15 55%, #09080b) !important; +} + // replace core's grey-triangle default cover with the velvet material // (.cover on profiles, .list-cover on the groups list) .cover[style*="cover-default.png"], .list-cover[style*="cover-default.png"] { - background-image: - radial-gradient(120% 90% at 18% 0%, rgba(58, 24, 48, 0.6), transparent 60%), - linear-gradient(100deg, #2a1222, #110f15 55%, #09080b) !important; + @include wg-velvet-cover; } .account, -- 2.54.0 From cb7432149b81c1f981d3cf1eb8049348fc0fac00 Mon Sep 17 00:00:00 2001 From: vickydotbat Date: Wed, 15 Jul 2026 12:33:27 +0200 Subject: [PATCH 2/3] feat: style article reader discovery controls Co-authored-by: Claude --- scss/westgate/_pages.scss | 124 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 124 insertions(+) diff --git a/scss/westgate/_pages.scss b/scss/westgate/_pages.scss index 455a896..ee4f1ba 100644 --- a/scss/westgate/_pages.scss +++ b/scss/westgate/_pages.scss @@ -591,6 +591,29 @@ a.sow-card:hover { .sow-article-body { color: var(--wg-text-soft); + font-size: 1.0625rem; + line-height: 1.7; + + h2 { + margin: var(--wg-space-xl) 0 var(--wg-space-sm); + } + + h3 { + margin: var(--wg-space-lg) 0 var(--wg-space-xs); + } + + p, + ul, + ol, + blockquote { + margin-bottom: var(--wg-space-md); + } + + blockquote { + padding-left: var(--wg-space-md); + border-left: 2px solid var(--wg-gold-soft); + color: var(--wg-text-muted); + } img, video { @@ -599,3 +622,104 @@ a.sow-card:hover { border-radius: 8px; } } + +.sow-byline, +.sow-byline-author { + display: flex; + align-items: center; + gap: var(--wg-space-xs); +} + +.sow-byline { + margin-bottom: var(--wg-space-lg); + color: var(--wg-text-muted); + font-size: 0.875rem; +} + +.sow-byline-author img { + width: 32px; + height: 32px; + border-radius: 50%; + object-fit: cover; +} + +.sow-active-filter { + display: inline-flex; + align-items: center; + gap: var(--wg-space-xs); + margin-top: var(--wg-space-md); + padding: 3px 9px; + color: var(--wg-gold); + background: rgba(194, 163, 90, 0.08); + border: 1px solid var(--wg-gold-soft); + border-radius: 4px; +} + +.sow-active-filter a { + color: inherit; + font-size: 1.125rem; + line-height: 1; +} + +.sow-article-neighbors, +.sow-pagination { + display: flex; + justify-content: space-between; + gap: var(--wg-space-md); + margin-top: var(--wg-space-xl); +} + +.sow-article-neighbors a { + display: flex; + flex-direction: column; + flex: 1; + padding: var(--wg-space-md); + background: var(--wg-velvet-panel); + border: 1px solid var(--wg-border); + border-radius: 8px; +} + +.sow-article-neighbors span { + font-family: var(--wg-font-code); + font-size: 0.6875rem; + text-transform: uppercase; + color: var(--wg-text-muted); +} + +.sow-related { + margin-top: var(--wg-space-xl); +} + +.sow-related-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: var(--wg-space-sm); +} + +.sow-related-grid .sow-banner { + height: 90px; +} + +.sow-pagination a { + display: inline-block; + font-family: var(--wg-font-ui); + font-size: 0.8125rem; + letter-spacing: 0.1em; + text-transform: uppercase; + font-weight: 600; + color: #d8cec0; + background: rgba(194, 163, 90, 0.06); + padding: 12px 24px; + border: 1px solid rgba(216, 194, 138, 0.28); + border-radius: 6px; +} + +@media (max-width: 700px) { + .sow-related-grid { + grid-template-columns: 1fr; + } + + .sow-article-neighbors { + flex-direction: column; + } +} -- 2.54.0 From 36fd88a0133734fd82f4e996f7cc3a03041983b0 Mon Sep 17 00:00:00 2001 From: vickydotbat Date: Wed, 15 Jul 2026 13:48:24 +0200 Subject: [PATCH 3/3] feat: expand article reader layout Co-authored-by: Claude --- scss/westgate/_pages.scss | 35 +++++++++++++++++++++++++++-------- 1 file changed, 27 insertions(+), 8 deletions(-) diff --git a/scss/westgate/_pages.scss b/scss/westgate/_pages.scss index ee4f1ba..50a7f9e 100644 --- a/scss/westgate/_pages.scss +++ b/scss/westgate/_pages.scss @@ -571,8 +571,6 @@ a.sow-card:hover { } .sow-article { - max-width: 760px; - margin: 0 auto; padding: var(--wg-space-lg) 0; header h1 { @@ -590,9 +588,15 @@ a.sow-card:hover { } .sow-article-body { + padding: var(--wg-space-md); color: var(--wg-text-soft); font-size: 1.0625rem; line-height: 1.7; + background: var(--wg-ledger-panel); + border: 1px solid var(--wg-ledger-border); + border-left-color: rgba(194, 163, 90, 0.32); + border-radius: 6px; + box-shadow: var(--wg-ledger-shadow); h2 { margin: var(--wg-space-xl) 0 var(--wg-space-sm); @@ -671,12 +675,18 @@ a.sow-card:hover { .sow-article-neighbors a { display: flex; - flex-direction: column; - flex: 1; - padding: var(--wg-space-md); - background: var(--wg-velvet-panel); - border: 1px solid var(--wg-border); - border-radius: 8px; + align-items: baseline; + gap: var(--wg-space-xs); +} + +.sow-article-older { + margin-right: auto; +} + +.sow-article-newer { + justify-content: flex-end; + margin-left: auto; + text-align: right; } .sow-article-neighbors span { @@ -686,6 +696,11 @@ a.sow-card:hover { color: var(--wg-text-muted); } +.sow-article-neighbors .sow-article-arrow { + font-size: 1.5rem; + line-height: 1; +} + .sow-related { margin-top: var(--wg-space-xl); } @@ -722,4 +737,8 @@ a.sow-card:hover { .sow-article-neighbors { flex-direction: column; } + + .sow-article-newer { + align-self: flex-end; + } } -- 2.54.0