Add per-page backgrounds for featured releases#2
Merged
Conversation
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.
- 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.
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.
- 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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds themed, low-opacity background images for the four featured release pages:
.page--releases--drama-llamas.page--releases--judes-world.page--releases--bumbling.page--releases--caltrop-kaijuBackgrounds are painted via a
position: fixedpseudo-element behind the content (opacity: 0.18), so they stay put while scrolling and don't interfere with text contrast.Heads-up about the artwork
The four images you attached came through as multimodal content rather than files I could read off disk, so I wasn't able to save the originals. The SVGs in
images/page-backgrounds/are approximations I generated based on what each image looked like — same vibe, same palette, but not the real thing. Swap them out (keeping the same filenames) and the styling will pick up the new artwork automatically.Other notes
getBodyClasseshelper (page--<segments-of-page.url-joined-by-->), confirmed by running it against@sindresorhus/slugify.bun run buildto view the output —snippets/socials.mduses a deprecatedintrokey on itsicon-linksblock and the template's block-schema validator rejects it. That's pre-existing onmainand unrelated to this change, so I left it alone. The SCSS itself compiles cleanly viasass.compileString.Test plan
snippets/socials.mdkey (intro→intro_content) and runbun run build/releases/drama-llamas/,/releases/judes-world/,/releases/bumbling/,/releases/caltrop-kaiju/and confirm each shows its backgroundhttps://claude.ai/code/session_017XBupgWxK11qYn8oJFkXJB
Generated by Claude Code