From 720b0c5eafb6cf7f0f182ac9c221fbe18ca05252 Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 2 May 2026 10:20:56 +0000 Subject: [PATCH 1/4] Add per-page background images for the four featured releases Adds low-opacity themed backgrounds for the Drama Llamas, Jude's World, Bumbling, and Caltrop Kaiju release pages, applied via fixed pseudo-elements on the body's auto-generated page-path class. I generated SVG approximations of the supplied images (pink fur, magenta squiggles, pink bees, black cityscape) since the original uploads weren't accessible as files in the build environment - swap the SVGs out for the real artwork when you have it. --- css/theme.scss | 61 +++++++++++++++++++++++++ images/page-backgrounds/bees.svg | 40 +++++++++++++++++ images/page-backgrounds/cityscape.svg | 65 +++++++++++++++++++++++++++ images/page-backgrounds/fur.svg | 47 +++++++++++++++++++ images/page-backgrounds/squiggles.svg | 35 +++++++++++++++ 5 files changed, 248 insertions(+) create mode 100644 images/page-backgrounds/bees.svg create mode 100644 images/page-backgrounds/cityscape.svg create mode 100644 images/page-backgrounds/fur.svg create mode 100644 images/page-backgrounds/squiggles.svg diff --git a/css/theme.scss b/css/theme.scss index e5dcb0b..cd0f259 100644 --- a/css/theme.scss +++ b/css/theme.scss @@ -66,3 +66,64 @@ --list-marker-content: "✦ "; --list-marker-color: #923a52; } + +// ============================================================================= +// PER-PAGE BACKGROUNDS +// ============================================================================= +// Each game's release page gets a themed background image at low opacity, +// painted behind the content via a fixed pseudo-element so it stays in place +// while scrolling. +// ============================================================================= + +%page-background { + position: relative; + + &::before { + content: ""; + position: fixed; + inset: 0; + z-index: -1; + pointer-events: none; + background-repeat: repeat; + background-position: center; + opacity: 0.18; + } +} + +.page--releases--drama-llamas { + @extend %page-background; + + &::before { + background-image: url("/images/page-backgrounds/fur.svg"); + background-size: 600px 600px; + } +} + +.page--releases--judes-world { + @extend %page-background; + + &::before { + background-image: url("/images/page-backgrounds/squiggles.svg"); + background-size: 400px 400px; + } +} + +.page--releases--bumbling { + @extend %page-background; + + &::before { + background-image: url("/images/page-backgrounds/bees.svg"); + background-size: 500px 500px; + } +} + +.page--releases--caltrop-kaiju { + @extend %page-background; + + &::before { + background-image: url("/images/page-backgrounds/cityscape.svg"); + background-repeat: repeat-x; + background-position: bottom center; + background-size: 800px auto; + } +} diff --git a/images/page-backgrounds/bees.svg b/images/page-backgrounds/bees.svg new file mode 100644 index 0000000..ab1f740 --- /dev/null +++ b/images/page-backgrounds/bees.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/page-backgrounds/cityscape.svg b/images/page-backgrounds/cityscape.svg new file mode 100644 index 0000000..8d8fab7 --- /dev/null +++ b/images/page-backgrounds/cityscape.svg @@ -0,0 +1,65 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/page-backgrounds/fur.svg b/images/page-backgrounds/fur.svg new file mode 100644 index 0000000..c7826f6 --- /dev/null +++ b/images/page-backgrounds/fur.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/page-backgrounds/squiggles.svg b/images/page-backgrounds/squiggles.svg new file mode 100644 index 0000000..6bd64e7 --- /dev/null +++ b/images/page-backgrounds/squiggles.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From 9fc85ddde5e354462fa9037dc3c69d37d238737c Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 2 May 2026 11:54:00 +0000 Subject: [PATCH 2/4] Use real background PNGs and fix block-schema migration - Swap the SVG placeholders for the real PNGs uploaded to images/backgrounds on main; drop the page-backgrounds/ directory of approximations. - Update theme.scss to point at the new files, with sensible per-image sizing (cover for the fur photo, tiled for the squiggle/bee patterns, bottom-anchored repeat-x for the cityscape). - Migrate every block frontmatter to the current schema: - intro: -> intro_content: (everywhere except section-header) - header_intro: -> intro_content: - header_align: -> align: (only on section-header blocks; dropped elsewhere since the field was removed) - heading_level: dropped from features blocks (no replacement) - The build now passes end to end. --- css/theme.scss | 17 ++--- games/a-fey-mystery-of-glen-dourn/index.md | 3 +- games/bardic-origins-the-lyric-grove/index.md | 1 - .../index.md | 1 - .../index.md | 1 - games/beach-bar-a-llama/index.md | 3 +- games/bumbling/index.md | 6 +- games/caltrop-kaiju/index.md | 3 +- games/drama-llamas/index.md | 8 +-- games/flora-and-llama/index.md | 3 +- games/judes-world/index.md | 3 +- games/llama-warrior/index.md | 3 +- games/red-gold/index.md | 3 +- games/righteous-jaunt/index.md | 3 +- images/page-backgrounds/bees.svg | 40 ------------ images/page-backgrounds/cityscape.svg | 65 ------------------- images/page-backgrounds/fur.svg | 47 -------------- images/page-backgrounds/squiggles.svg | 35 ---------- pages/media-press.md | 2 +- pages/media-streams.md | 2 +- pages/media.md | 2 +- pages/services-layout.md | 2 +- pages/services-writing.md | 2 +- snippets/featured-games.md | 3 +- snippets/footer-content.md | 3 +- snippets/recent-blog-posts.md | 3 +- snippets/socials.md | 2 +- snippets/upcoming-events.md | 3 +- 28 files changed, 32 insertions(+), 237 deletions(-) delete mode 100644 images/page-backgrounds/bees.svg delete mode 100644 images/page-backgrounds/cityscape.svg delete mode 100644 images/page-backgrounds/fur.svg delete mode 100644 images/page-backgrounds/squiggles.svg diff --git a/css/theme.scss b/css/theme.scss index cd0f259..4b9701c 100644 --- a/css/theme.scss +++ b/css/theme.scss @@ -94,8 +94,9 @@ @extend %page-background; &::before { - background-image: url("/images/page-backgrounds/fur.svg"); - background-size: 600px 600px; + background-image: url("/images/backgrounds/drama_llamas_background.png"); + background-repeat: no-repeat; + background-size: cover; } } @@ -103,8 +104,8 @@ @extend %page-background; &::before { - background-image: url("/images/page-backgrounds/squiggles.svg"); - background-size: 400px 400px; + background-image: url("/images/backgrounds/judes_world_background.png"); + background-size: 500px 500px; } } @@ -112,8 +113,8 @@ @extend %page-background; &::before { - background-image: url("/images/page-backgrounds/bees.svg"); - background-size: 500px 500px; + background-image: url("/images/backgrounds/bumbling_background.png"); + background-size: 500px auto; } } @@ -121,9 +122,9 @@ @extend %page-background; &::before { - background-image: url("/images/page-backgrounds/cityscape.svg"); + background-image: url("/images/backgrounds/caltrop_kaiju_background.png"); background-repeat: repeat-x; background-position: bottom center; - background-size: 800px auto; + background-size: auto 60vh; } } diff --git a/games/a-fey-mystery-of-glen-dourn/index.md b/games/a-fey-mystery-of-glen-dourn/index.md index 9bd6e5c..7a54291 100644 --- a/games/a-fey-mystery-of-glen-dourn/index.md +++ b/games/a-fey-mystery-of-glen-dourn/index.md @@ -60,9 +60,8 @@ blocks: label: Play time - type: features - header_intro: |- + intro_content: |- ## Reviews - heading_level: 4 items: - title: Andrés L. description: | diff --git a/games/bardic-origins-the-lyric-grove/index.md b/games/bardic-origins-the-lyric-grove/index.md index 28fdf9e..3e3bea9 100644 --- a/games/bardic-origins-the-lyric-grove/index.md +++ b/games/bardic-origins-the-lyric-grove/index.md @@ -45,7 +45,6 @@ blocks: to add flavour to your game.** - type: features - heading_level: 4 items: - title: Detailed Setting & Backstory Options description: | diff --git a/games/bardic-origins-the-storied-bastion/index.md b/games/bardic-origins-the-storied-bastion/index.md index 72c14d4..87e546d 100644 --- a/games/bardic-origins-the-storied-bastion/index.md +++ b/games/bardic-origins-the-storied-bastion/index.md @@ -36,7 +36,6 @@ blocks: items to add flavour to your game.** - type: features - heading_level: 4 items: - title: Detailed Setting & Backstory Options description: | diff --git a/games/bardic-origins-timbrel-sleets-intrepid-players/index.md b/games/bardic-origins-timbrel-sleets-intrepid-players/index.md index 3c03bd4..10b5c0b 100644 --- a/games/bardic-origins-timbrel-sleets-intrepid-players/index.md +++ b/games/bardic-origins-timbrel-sleets-intrepid-players/index.md @@ -44,7 +44,6 @@ blocks: to add flavour to your game.** - type: features - heading_level: 4 items: - title: Detailed Setting & Backstory Options description: | diff --git a/games/beach-bar-a-llama/index.md b/games/beach-bar-a-llama/index.md index fb94304..a4fe0a7 100644 --- a/games/beach-bar-a-llama/index.md +++ b/games/beach-bar-a-llama/index.md @@ -46,9 +46,8 @@ blocks: label: Print edition - type: buy-options - header_intro: |- + intro_content: |- ## Buy Direct - header_align: center image_aspect_ratio: "1/1" items: - image: src/images/products/drama_llamas_beach_bar_a_llama.jpeg diff --git a/games/bumbling/index.md b/games/bumbling/index.md index ab98e24..7f6bbe2 100644 --- a/games/bumbling/index.md +++ b/games/bumbling/index.md @@ -58,9 +58,8 @@ blocks: label: Print Edition - type: features - header_intro: |- + intro_content: |- ## Reviews - heading_level: 4 items: - title: sinopiasaur description: "\"This is a sweet and relaxing way to pass a couple hours of a summer afternoon.\"" @@ -69,9 +68,8 @@ blocks: "A simple little bee RPG that thankfully doesn't make any references to that b—dy film." - type: buy-options - header_intro: |- + intro_content: |- ## Buy Direct - header_align: center image_aspect_ratio: "1/1" items: - image: src/images/products/bumbling_booklet.jpeg diff --git a/games/caltrop-kaiju/index.md b/games/caltrop-kaiju/index.md index e36cb68..734ecb4 100644 --- a/games/caltrop-kaiju/index.md +++ b/games/caltrop-kaiju/index.md @@ -50,9 +50,8 @@ blocks: label: Print Edition - type: buy-options - header_intro: |- + intro_content: |- ## Buy Direct - header_align: center image_aspect_ratio: "1/1" items: - image: src/images/products/caltrop_kaiju_booklet.jpeg diff --git a/games/drama-llamas/index.md b/games/drama-llamas/index.md index a9ae167..3b2edcf 100644 --- a/games/drama-llamas/index.md +++ b/games/drama-llamas/index.md @@ -68,9 +68,8 @@ blocks: label: Print Edition - type: features - header_intro: |- + intro_content: |- ## Reviews - heading_level: 4 items: - title: Panne description: "\"This was such a bonkers-fun game! It's all about going full ridiculous and playing the shadow game behind the scenes. But the game itself encourages communication between the players so that it's reframed as collaboratively creating drama rather than a PVP type game.\"" @@ -78,9 +77,8 @@ blocks: description: "\"When I played Drama Llamas with my buddies I got the giggles so bad that I couldn't talk. It's really easy to play and leaves a lot of room for improvisation and silliness, although there's a clear structure to gee things along too. Some of the artwork is BEAU-TI-FUL! A++ would recommend!\"" - type: buy-options - header_intro: |- + intro_content: |- ## Buy Direct - header_align: center image_aspect_ratio: "1/1" items: - image: src/images/products/drama_llamas.jpeg @@ -100,7 +98,7 @@ blocks: link: https://buy.stripe.com/9B64gz9CjbcCdUQby07N605 - type: downloads - intro: | + intro_content: | ## Downloads items: - file: /assets/files/drama_llamas_character_sheet.pdf diff --git a/games/flora-and-llama/index.md b/games/flora-and-llama/index.md index 5fa3c05..225f029 100644 --- a/games/flora-and-llama/index.md +++ b/games/flora-and-llama/index.md @@ -45,9 +45,8 @@ blocks: label: Print edition - type: buy-options - header_intro: |- + intro_content: |- ## Buy Direct - header_align: center image_aspect_ratio: "1/1" items: - image: src/images/products/drama_llamas_flora_and_llamas.jpeg diff --git a/games/judes-world/index.md b/games/judes-world/index.md index 1b2cb38..28f36b6 100644 --- a/games/judes-world/index.md +++ b/games/judes-world/index.md @@ -75,9 +75,8 @@ blocks: label: Print Edition - type: buy-options - header_intro: |- + intro_content: |- ## Buy Direct - header_align: center image_aspect_ratio: "1/1" items: - image: src/images/products/judes_world_zine.jpeg diff --git a/games/llama-warrior/index.md b/games/llama-warrior/index.md index 45b6484..3286d28 100644 --- a/games/llama-warrior/index.md +++ b/games/llama-warrior/index.md @@ -45,9 +45,8 @@ blocks: label: Print edition - type: buy-options - header_intro: |- + intro_content: |- ## Buy Direct - header_align: center image_aspect_ratio: "1/1" items: - image: src/images/products/drama_llamas_llama_warrior.jpeg diff --git a/games/red-gold/index.md b/games/red-gold/index.md index fc76224..362930e 100644 --- a/games/red-gold/index.md +++ b/games/red-gold/index.md @@ -56,9 +56,8 @@ blocks: label: Play time - type: features - header_intro: |- + intro_content: |- ## Reviews - heading_level: 4 items: - title: Sam H. description: | diff --git a/games/righteous-jaunt/index.md b/games/righteous-jaunt/index.md index 3198f56..6572fa0 100644 --- a/games/righteous-jaunt/index.md +++ b/games/righteous-jaunt/index.md @@ -51,9 +51,8 @@ blocks: label: Print Edition - type: buy-options - header_intro: |- + intro_content: |- ## Buy Direct - header_align: center image_aspect_ratio: "1/1" items: - image: src/images/products/righteous_jaunt_booklet.jpeg diff --git a/images/page-backgrounds/bees.svg b/images/page-backgrounds/bees.svg deleted file mode 100644 index ab1f740..0000000 --- a/images/page-backgrounds/bees.svg +++ /dev/null @@ -1,40 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/images/page-backgrounds/cityscape.svg b/images/page-backgrounds/cityscape.svg deleted file mode 100644 index 8d8fab7..0000000 --- a/images/page-backgrounds/cityscape.svg +++ /dev/null @@ -1,65 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/images/page-backgrounds/fur.svg b/images/page-backgrounds/fur.svg deleted file mode 100644 index c7826f6..0000000 --- a/images/page-backgrounds/fur.svg +++ /dev/null @@ -1,47 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/images/page-backgrounds/squiggles.svg b/images/page-backgrounds/squiggles.svg deleted file mode 100644 index 6bd64e7..0000000 --- a/images/page-backgrounds/squiggles.svg +++ /dev/null @@ -1,35 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/pages/media-press.md b/pages/media-press.md index 621b613..386d09d 100644 --- a/pages/media-press.md +++ b/pages/media-press.md @@ -13,7 +13,7 @@ blocks: lead: Press kits, reviews, and interviews about Button Kin Games. - type: icon-links - intro: | + intro_content: | ## Press Kits Logos, screenshots, factsheets, and press contacts for Button Kin's flagship releases. diff --git a/pages/media-streams.md b/pages/media-streams.md index 15be3b7..f58337d 100644 --- a/pages/media-streams.md +++ b/pages/media-streams.md @@ -19,7 +19,7 @@ blocks: PLACEHOLDER TEXT - type: features - header_intro: |- + intro_content: |- ## Notable Streams items: - title: PLACEHOLDER TEXT diff --git a/pages/media.md b/pages/media.md index d38e379..0bdd50a 100644 --- a/pages/media.md +++ b/pages/media.md @@ -26,7 +26,7 @@ blocks: description: Press kits, interviews, and reviews. - type: icon-links - intro: | + intro_content: | ## Jump to a section items: - icon: "hugeicons:youtube" diff --git a/pages/services-layout.md b/pages/services-layout.md index 33534dc..8798580 100644 --- a/pages/services-layout.md +++ b/pages/services-layout.md @@ -19,7 +19,7 @@ blocks: PLACEHOLDER TEXT - type: features - header_intro: |- + intro_content: |- ## What's Included items: - title: PLACEHOLDER TEXT diff --git a/pages/services-writing.md b/pages/services-writing.md index de4771a..1e1da0a 100644 --- a/pages/services-writing.md +++ b/pages/services-writing.md @@ -19,7 +19,7 @@ blocks: PLACEHOLDER TEXT - type: features - header_intro: |- + intro_content: |- ## What's Included items: - title: PLACEHOLDER TEXT diff --git a/snippets/featured-games.md b/snippets/featured-games.md index fecf9ec..9f7ba82 100644 --- a/snippets/featured-games.md +++ b/snippets/featured-games.md @@ -6,9 +6,8 @@ blocks: filter: property: data.featured equals: true - header_intro: |- + intro_content: |- ## Featured Releases Flagship games from Button Kin. - header_align: center --- diff --git a/snippets/footer-content.md b/snippets/footer-content.md index fb5e3fa..3090e56 100644 --- a/snippets/footer-content.md +++ b/snippets/footer-content.md @@ -16,11 +16,10 @@ blocks: reference: recent-blog-posts - type: contact-form - header_intro: |- + intro_content: |- ## Contact Button Kin Drop us a line — we love hearing from players, playtesters, and fellow designers. - header_align: center content: | Get in touch about our games, upcoming events, writing commissions, or layout services. diff --git a/snippets/recent-blog-posts.md b/snippets/recent-blog-posts.md index d257152..092538a 100644 --- a/snippets/recent-blog-posts.md +++ b/snippets/recent-blog-posts.md @@ -4,9 +4,8 @@ blocks: - type: items collection: news horizontal: true - header_intro: |- + intro_content: |- ## Recent Posts The latest from the Button Kin Times newsletter. - header_align: center --- diff --git a/snippets/socials.md b/snippets/socials.md index 86f0993..15b947d 100644 --- a/snippets/socials.md +++ b/snippets/socials.md @@ -2,7 +2,7 @@ name: Socials blocks: - type: icon-links - intro: | + intro_content: | ## Find Button Kin Online items: - icon: "hugeicons:mail-01" diff --git a/snippets/upcoming-events.md b/snippets/upcoming-events.md index 4b4a578..0ad4d03 100644 --- a/snippets/upcoming-events.md +++ b/snippets/upcoming-events.md @@ -3,9 +3,8 @@ name: Upcoming Events blocks: - type: items collection: upcomingEvents - header_intro: |- + intro_content: |- ## Upcoming Events Where you can find Button Kin Games next. - header_align: center --- From 16e29cf4f9bfdfd9320a177e15844b0a911b0e1d Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 2 May 2026 12:05:40 +0000 Subject: [PATCH 3/4] Add dice-corner background as the default page background Brings back the oversized-dice corner artwork from the old buttonkin.com site as the default background on every page that doesn't already have a custom themed image. The single dice-corner asset is mirrored: rendered bottom-left as-is on body::before, and bottom-right via scaleX(-1) on body::after, so the dice cluster appears in both bottom corners. Stacking changes: - Move the page background colour from body to html and make body transparent so the body::before/::after pseudo-elements with z-index: -1 actually paint behind body content instead of being hidden by it. Same-pass tweaks requested alongside the dice work: - --body-background-alt is now a translucent rgba so the dice/themed images show through alternating sections. - Drop the bumbling and jude's world background opacity from 0.18 to 0.10 so the patterns are noticeably softer behind the content. --- css/theme.scss | 71 ++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 52 insertions(+), 19 deletions(-) diff --git a/css/theme.scss b/css/theme.scss index 4b9701c..9c2003f 100644 --- a/css/theme.scss +++ b/css/theme.scss @@ -19,7 +19,9 @@ // --- Palette ---------------------------------------------------------------- --color-bg: #f6d9e1; // light pink — page background --body-background: #f6d9e1; - --body-background-alt: #efc9d3; // slightly darker pink for alt sections + // Translucent so the page background image (dice corners or game artwork) + // shows through alternating sections. + --body-background-alt: rgba(239, 201, 211, 0.55); --color-card-bg: #ffffff; // white cards / panels --color-text: #111111; --color-text-muted: #666666; @@ -68,59 +70,90 @@ } // ============================================================================= -// PER-PAGE BACKGROUNDS +// PAGE BACKGROUNDS // ============================================================================= -// Each game's release page gets a themed background image at low opacity, -// painted behind the content via a fixed pseudo-element so it stays in place -// while scrolling. +// Every page gets a fixed, low-opacity background painted behind the content +// via two pseudo-elements on body. The default is the dice-corner artwork +// from the old site, mirrored bottom-left and bottom-right. The four featured +// release pages override `background-image` (and any positioning) on both +// pseudo-elements to swap in their own themed artwork. +// +// The page-bg colour lives on `html` and body itself is transparent so the +// fixed pseudo-elements (z-index: -1) actually show through. // ============================================================================= -%page-background { +html { + background: var(--body-background); +} + +body.design-system { + background: transparent; +} + +body { position: relative; - &::before { + &::before, + &::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; - background-repeat: repeat; - background-position: center; + background-repeat: no-repeat; + background-position: bottom left; + background-size: 40vmin auto; + background-image: url("/images/brand/dice-corner.png"); opacity: 0.18; } + + &::after { + background-position: bottom right; + transform: scaleX(-1); + } } -.page--releases--drama-llamas { - @extend %page-background; +// --- Per-release overrides -------------------------------------------------- +// These pages get a custom themed image instead of the dice. The ::after +// pseudo-element is hidden because each themed image carries its own pattern. +%release-background { &::before { - background-image: url("/images/backgrounds/drama_llamas_background.png"); - background-repeat: no-repeat; + background-position: center; background-size: cover; } + &::after { display: none; } } -.page--releases--judes-world { - @extend %page-background; +.page--releases--drama-llamas { + @extend %release-background; + &::before { + background-image: url("/images/backgrounds/drama_llamas_background.png"); + } +} +.page--releases--judes-world { + @extend %release-background; &::before { background-image: url("/images/backgrounds/judes_world_background.png"); + background-repeat: repeat; background-size: 500px 500px; + opacity: 0.10; } } .page--releases--bumbling { - @extend %page-background; - + @extend %release-background; &::before { background-image: url("/images/backgrounds/bumbling_background.png"); + background-repeat: repeat; background-size: 500px auto; + opacity: 0.10; } } .page--releases--caltrop-kaiju { - @extend %page-background; - + @extend %release-background; &::before { background-image: url("/images/backgrounds/caltrop_kaiju_background.png"); background-repeat: repeat-x; From 85ea2e4b5238a87ed26d5e199f18e07689a027de Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 2 May 2026 12:35:59 +0000 Subject: [PATCH 4/4] Tweak page backgrounds and add image_aspect_ratio to recent-blog-posts MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Stretch the dice background full-viewport (background-size: cover on a single ::before) instead of mirrored corners — matches the old buttonkin.com cover-image treatment. - Set --color-dark-bg / --color-dark-bg-alt to #322036d6 (translucent plum) so dark sections will let the page background bleed through once the template is updated to read from the CSS variable rather than its hardcoded #1f2937. - Add image_aspect_ratio: "5/4" to the recent-blog-posts snippet. --- css/theme.scss | 110 ++++++++++++---------------------- snippets/recent-blog-posts.md | 1 + 2 files changed, 40 insertions(+), 71 deletions(-) diff --git a/css/theme.scss b/css/theme.scss index 9c2003f..cf94fb9 100644 --- a/css/theme.scss +++ b/css/theme.scss @@ -40,9 +40,9 @@ --color-gradient-start: rgba(146, 58, 82, 0.22); --color-gradient-end: rgba(0, 77, 59, 0.18); - // Dark sections — pair deep green with cream text so the palette stays warm - --color-dark-bg: #003a2c; - --color-dark-bg-alt: #002f24; + // Dark sections — translucent dark plum so page backgrounds bleed through + --color-dark-bg: #322036d6; + --color-dark-bg-alt: #322036d6; --color-dark-text: #fff7f4; --color-dark-text-muted: #d9c8cd; --color-dark-card-bg: #0a5a47; @@ -72,14 +72,16 @@ // ============================================================================= // PAGE BACKGROUNDS // ============================================================================= -// Every page gets a fixed, low-opacity background painted behind the content -// via two pseudo-elements on body. The default is the dice-corner artwork -// from the old site, mirrored bottom-left and bottom-right. The four featured -// release pages override `background-image` (and any positioning) on both -// pseudo-elements to swap in their own themed artwork. +// Every page gets a fixed, full-viewport, low-opacity background painted +// behind the content via body::before. The default is the dice-corner +// artwork from the old site (stretched to cover, matching the old +// .cover-image treatment). The four featured release pages override the +// `background-image` (and tweak positioning where needed) to swap in their +// own themed artwork. // // The page-bg colour lives on `html` and body itself is transparent so the -// fixed pseudo-elements (z-index: -1) actually show through. +// fixed pseudo-element (z-index: -1) actually paints behind body content +// instead of being hidden by body's own background layer. // ============================================================================= html { @@ -90,74 +92,40 @@ body.design-system { background: transparent; } -body { - position: relative; - - &::before, - &::after { - content: ""; - position: fixed; - inset: 0; - z-index: -1; - pointer-events: none; - background-repeat: no-repeat; - background-position: bottom left; - background-size: 40vmin auto; - background-image: url("/images/brand/dice-corner.png"); - opacity: 0.18; - } - - &::after { - background-position: bottom right; - transform: scaleX(-1); - } +body::before { + content: ""; + position: fixed; + inset: 0; + z-index: -1; + pointer-events: none; + background-image: url("/images/brand/dice-corner.png"); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + opacity: 0.18; } -// --- Per-release overrides -------------------------------------------------- -// These pages get a custom themed image instead of the dice. The ::after -// pseudo-element is hidden because each themed image carries its own pattern. - -%release-background { - &::before { - background-position: center; - background-size: cover; - } - &::after { display: none; } -} - -.page--releases--drama-llamas { - @extend %release-background; - &::before { - background-image: url("/images/backgrounds/drama_llamas_background.png"); - } +.page--releases--drama-llamas::before { + background-image: url("/images/backgrounds/drama_llamas_background.png"); } -.page--releases--judes-world { - @extend %release-background; - &::before { - background-image: url("/images/backgrounds/judes_world_background.png"); - background-repeat: repeat; - background-size: 500px 500px; - opacity: 0.10; - } +.page--releases--judes-world::before { + background-image: url("/images/backgrounds/judes_world_background.png"); + background-repeat: repeat; + background-size: 500px 500px; + opacity: 0.10; } -.page--releases--bumbling { - @extend %release-background; - &::before { - background-image: url("/images/backgrounds/bumbling_background.png"); - background-repeat: repeat; - background-size: 500px auto; - opacity: 0.10; - } +.page--releases--bumbling::before { + background-image: url("/images/backgrounds/bumbling_background.png"); + background-repeat: repeat; + background-size: 500px auto; + opacity: 0.10; } -.page--releases--caltrop-kaiju { - @extend %release-background; - &::before { - background-image: url("/images/backgrounds/caltrop_kaiju_background.png"); - background-repeat: repeat-x; - background-position: bottom center; - background-size: auto 60vh; - } +.page--releases--caltrop-kaiju::before { + background-image: url("/images/backgrounds/caltrop_kaiju_background.png"); + background-repeat: repeat-x; + background-position: bottom center; + background-size: auto 60vh; } diff --git a/snippets/recent-blog-posts.md b/snippets/recent-blog-posts.md index 092538a..4d539b1 100644 --- a/snippets/recent-blog-posts.md +++ b/snippets/recent-blog-posts.md @@ -4,6 +4,7 @@ blocks: - type: items collection: news horizontal: true + image_aspect_ratio: "5/4" intro_content: |- ## Recent Posts