From 9ec0170e371c9317baaf3afc88e161fdb9a3c921 Mon Sep 17 00:00:00 2001 From: vickydotbat Date: Wed, 15 Jul 2026 12:04:42 +0000 Subject: [PATCH] Style full-width article reader pages (#24) ## Summary - add banner and article-reader styling for news and blog pages - let article pages use the shared content rail without a private width cap - give the article body a post-like ledger surface without ruling seams - present Older/Newer navigation as large directional links at opposite page edges ## Verification - all six `node tests/*.test.js` contract scripts - NodeBB `make dev-build` asset compilation Generated with Claude Code Reviewed-on: https://git.westgate.pw/ShadowsOverWestgate/sow-nodebb-theme/pulls/24 Co-authored-by: vickydotbat Co-committed-by: vickydotbat --- scss/westgate/_pages.scss | 200 +++++++++++++++++++++++++++++++++++ scss/westgate/_surfaces.scss | 11 +- 2 files changed, 208 insertions(+), 3 deletions(-) diff --git a/scss/westgate/_pages.scss b/scss/westgate/_pages.scss index c2546f4..50a7f9e 100644 --- a/scss/westgate/_pages.scss +++ b/scss/westgate/_pages.scss @@ -542,3 +542,203 @@ 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 { + 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 { + 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); + } + + 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 { + display: block; + max-width: 100%; + 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; + 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 { + font-family: var(--wg-font-code); + font-size: 0.6875rem; + text-transform: uppercase; + 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); +} + +.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; + } + + .sow-article-newer { + align-self: flex-end; + } +} 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,