Mobile: full-width dot background, figure at normal height#77
Merged
Conversation
On phones the About portrait now spans the entire viewport width instead of a centered 220px block, and sits flush against the header's bottom hairline. The canvas breaks out of the wrapper's side padding (width calc(100% + spacing) with negative side margins) and is pulled up through the .page-content top padding (negative top margin); border-radius is dropped so it's edge-to-edge. Desktop layout is unchanged (the rule is scoped to the <=600px media query). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017TDdCdTJbUkH7ZoWDhj7AV
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Reworks the previous full-bleed approach. Instead of scaling the whole portrait to the viewport width, the canvas becomes a fixed-height (300px) full-width band: the figure is drawn into a centred square of side = canvas height, and the programmatic dot background fills the extra width on either side, flush under the header. ProfileDots now maps world coords (figure-square units in [0,1]^2) to pixels via pixel = (originX + x*scale, y*scale), scale = canvas height and originX centring the square. The background fountain roams an extra bgMarginX past the square's sides so it fills the full width; its initial spread, exit/recycle bounds, silhouette occlusion (only over the square), and pointer mapping all account for the offset. On desktop the canvas is square, so originX = bgMarginX = 0 and behaviour is unchanged. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017TDdCdTJbUkH7ZoWDhj7AV
itamarwe
changed the title
Make the canvas span the full viewport width explicitly (100vw centred with calc(50% - 50vw) side margins) instead of breaking out of the wrapper padding with calc(100% + spacing). Same visual result, but tied to the screen rather than the container. Verified full-bleed with no horizontal scroll at 360/390/414px. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017TDdCdTJbUkH7ZoWDhj7AV
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.
On phones the dot-art canvas now goes full-bleed width and sits flush under the header hairline, but the figure keeps its normal height — only the programmatic dot background extends to fill the extra width on either side of the centred portrait.
Approach
The canvas becomes a fixed-height (300px) full-width band rather than a full-width square:
ProfileDotsmaps world coords (figure-square units in[0,1]²) to pixels viapixel = (originX + x*scale, y*scale), wherescale= canvas height andoriginXcentres the figure square horizontally.bgMarginXpast the square's left/right edges, so it fills the whole width. Its initial spread, exit/recycle bounds, silhouette occlusion (applied only over the figure square), and pointer mapping all account for the offset.originX = bgMarginX = 0and behaviour is unchanged (verified: floated 300×300 portrait, text wraps as before).CSS: the
≤600pxrule makes the canvaswidth: calc(100% + spacing)with negative side margins (breaks out of the wrapper padding) and a fixedheight: 300px(aspect-ratio: auto), pulled up flush to the header.Verification (Playwright)
left 0 → right 390,height 300,top 57 == header bottom 57(flush),scrollWidth == 390(no horizontal scroll). Figure centred at normal size; background dots fill the side wings to both edges.300×300, floated, text wrap intact.🤖 Generated with Claude Code