fix(blog): the newsletter promise sat in a gray slab across the middle - #378
Merged
Merged
Conversation
A visitor pointed at the blog newsletter block and asked to get rid of the gray area. The only opaque fill inside it was the promise strip — "100% free / No ads / Unsubscribe anytime" — wrapped in `bg-surface-raised rounded-lg p-6` (#f1f1f1 light, #171A15 dark). Everything else in the block, and every ancestor up to the page canvas, is transparent, so that slab was the gray area: a filled band cutting the block in half between the headline and the signup form, for three lines of text that need no container of their own. Drop the fill and the padding, keep the three-column grid and its spacing. The redundant wrapper div collapses into the grid it wrapped. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
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.
A visitor pointed at the blog newsletter block (
div.border-t.border-bon/en/blog) and asked to get rid of the gray area.What the gray area actually was
Measured on the live page before the change — the only opaque fill inside the element they selected, and every ancestor up to the page canvas transparent:
div.border-t.border-b(selected)rgba(0, 0, 0, 0)div.max-w-[680px]rgba(0, 0, 0, 0)main/mainrgba(0, 0, 0, 0)div.min-h-screen.bg-canvasrgb(250, 250, 250)(page canvas)div.bg-surface-raised(inside)rgb(241, 241, 241)So the gray area is the promise strip — "100% free / No ads / Unsubscribe anytime" — wrapped in
bg-surface-raised rounded-lg p-6: a filled band cutting the block in half between the headline and the signup form, holding three lines of text that need no container of their own.The change
Drop the fill and its padding; keep the three-column grid and its
mb-8spacing. The wrapper div existed only to carry the fill, so it collapses into the grid it wrapped. CSS-only — no copy, no logic, no message keys touched.Verified in the running app:
el.querySelectorAll('.bg-surface-raised').length === 0, and the only opaque descendants left are the brand mail badge, the white input, and the green Subscribe button.Scope held to the reported element — the stray
borderutility on that same container (which adds left/right borders to what reads as a top/bottom rule) is left alone as an unrelated issue.🤖 Generated with Claude Code