sitetile: every section gets the shared inset floor; gallery, tagcloud and collection-pills painted - #7
Merged
Conversation
…d and collection-pills get base paint A coral that forgot its own container rule rendered its text at x=0 on desktop and phone (faq was fixed one at a time in #6; gallery, carousel, collection and timeline still did it). The floor: :where(section[class^="st-"]:not(.st-full-bleed)) carries the shared wrapper's max-width/margin/padding at zero specificity, so every existing per-coral rule keeps its own values; hero opts out with .st-full-bleed while its inner content stays inset. tile-lab#11: gallery cells, tag pills and collection pills had no rule at all — they now reuse the existing filter-pill idiom and a responsive grid. pre.st-code gets max-width:100%; inline code spans get overflow-wrap:anywhere so a quoted line never widens the page. New section-inset.test.mjs scans every coral's emitted markup, so a future coral is covered without being listed.
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
1 participant
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.
On a built site several corals rendered their text flush to the viewport edge (x=0) on desktop and phone, because each coral carried its own container rule and some had none. This adds a zero-specificity floor —
:where(section[class^="st-"]:not(.st-full-bleed))— with the shared wrapper's max-width/margin/padding, so every existing rule keeps its values and a future coral is covered by construction. Hero opts out via.st-full-bleed(its inner content stays inset).Also: gallery cells, tag pills and collection pills had no rule at all (tile-lab#11) — base paint added, reusing the filter-pill idiom;
pre.st-codegetsmax-width:100%, inline code spansoverflow-wrap:anywhere.Tests: new
section-inset.test.mjs(21 checks, scans emitted markup);bash scripts/test.shexit 0, astro smoke 59/59.