diff --git a/scss/westgate/_pages.scss b/scss/westgate/_pages.scss index 10fc7f9..44f20bb 100644 --- a/scss/westgate/_pages.scss +++ b/scss/westgate/_pages.scss @@ -339,6 +339,7 @@ a.sow-card:hover { &.three { grid-template-columns: repeat(3, 1fr); + gap: var(--wg-space-lg); } &.four { @@ -593,8 +594,9 @@ a.sow-card:hover { } // Banners: first post image, or the shared velvet gradient +// Friendlier crop: 8/5 keeps banners from looking vertically squished. .sow-banner { - height: 140px; + aspect-ratio: 8 / 5; background-size: cover; background-position: center; } @@ -603,9 +605,11 @@ a.sow-card:hover { @include wg-velvet-cover; } -// Article page -.sow-article-banner { - height: clamp(180px, 32vw, 340px); +// Article page: the banner renders as a small card-sized thumb beside the +// header, so mediocre source images never get stretched full-width. +.sow-article-thumb { + width: 100%; + aspect-ratio: 8 / 5; // same crop as the blog-card banners background-size: cover; background-position: center; border: 1px solid var(--wg-border); @@ -618,6 +622,65 @@ a.sow-card:hover { header h1 { margin: 0 0 6px; } + + // Thumb left with the byline tucked under it; on the right the chip row + // pins to the image's top edge while the title centers on the image. + header.has-thumb { + display: grid; + grid-template-columns: minmax(240px, 320px) 1fr; + column-gap: var(--wg-space-md); + margin-bottom: var(--wg-space-sm); + + .sow-article-thumb { + grid-column: 1; + grid-row: 1; + } + + .sow-article-headline { + grid-column: 2; + grid-row: 1; + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + // Reserve the chip row so the centered title never crowds it. + padding-top: 40px; + + .sow-meta { + position: absolute; + top: 0; + margin: 0; + } + + h1 { + margin: 0; + } + + .sow-byline { + margin-top: var(--wg-space-sm); + } + } + } +} + +@media (max-width: 700px) { + .sow-article header.has-thumb { + display: block; + + .sow-article-thumb { + margin-bottom: var(--wg-space-sm); + } + + .sow-article-headline { + display: block; + + .sow-meta { + position: static; + margin-bottom: 12px; + } + } + } } .sow-article-date {