diff --git a/css/theme.scss b/css/theme.scss index e5dcb0b..cf94fb9 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; @@ -38,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; @@ -66,3 +68,64 @@ --list-marker-content: "✦ "; --list-marker-color: #923a52; } + +// ============================================================================= +// PAGE BACKGROUNDS +// ============================================================================= +// 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-element (z-index: -1) actually paints behind body content +// instead of being hidden by body's own background layer. +// ============================================================================= + +html { + background: var(--body-background); +} + +body.design-system { + background: transparent; +} + +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; +} + +.page--releases--drama-llamas::before { + background-image: url("/images/backgrounds/drama_llamas_background.png"); +} + +.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::before { + background-image: url("/images/backgrounds/bumbling_background.png"); + background-repeat: repeat; + background-size: 500px auto; + opacity: 0.10; +} + +.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/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/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..4d539b1 100644 --- a/snippets/recent-blog-posts.md +++ b/snippets/recent-blog-posts.md @@ -4,9 +4,9 @@ blocks: - type: items collection: news horizontal: true - header_intro: |- + image_aspect_ratio: "5/4" + 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 ---