Conversation
There was a problem hiding this comment.
Pull request overview
Adjusts global page backgrounds and layout sizing to support extending the header area (notably on iOS safe-area layouts).
Changes:
- Removed the
htmlelement background gradient. - Removed
bodymin-height: 100svhand the dark top gradient layer from thebodybackground. - Removed
env(safe-area-inset-bottom)handling from the footer padding.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
|
||
| .site-footer { | ||
| padding: 2rem 0 calc(3rem + env(safe-area-inset-bottom)); | ||
| padding: 2rem 0 3rem; |
There was a problem hiding this comment.
Removing env(safe-area-inset-bottom) from the footer padding can cause the footer content to sit underneath the iOS home indicator (or other bottom safe-area obstructions), making links/buttons harder to use. Consider restoring a safe-area-aware bottom padding (optionally with a fallback like env(safe-area-inset-bottom, 0px)), or applying the safe-area padding to a footer inner wrapper if you don’t want it to affect the outer footer box.
| padding: 2rem 0 3rem; | |
| padding: 2rem 0 calc(3rem + env(safe-area-inset-bottom, 0px)); |
| html { | ||
| scroll-behavior: smooth; | ||
| background: | ||
| linear-gradient(180deg, #0f172a 0, #0f172a 8rem, #f5f8fb 8rem, #ebf1f7 100%); | ||
| } |
There was a problem hiding this comment.
This change removes both the html background and body min-height: 100svh. On short pages (content height < viewport height), the canvas below the body can show the browser default background rather than your intended gradient, since the body background won’t necessarily paint the full viewport without a minimum height and the html background is now unset. To avoid visible background seams, keep a viewport-filling min-height on body (or set a background on html), or otherwise ensure the page background paints the full viewport height.
| body { | ||
| margin: 0; | ||
| min-height: 100svh; | ||
| font-family: "Source Sans 3", sans-serif; | ||
| color: var(--text); | ||
| background: | ||
| linear-gradient(180deg, rgba(15, 23, 42, 1) 0, rgba(15, 23, 42, 1) 8rem, rgba(245, 248, 251, 0) 8rem), | ||
| radial-gradient(circle at top left, rgba(103, 146, 196, 0.18), transparent 30%), | ||
| linear-gradient(180deg, #f5f8fb 0%, #ebf1f7 100%); | ||
| } |
There was a problem hiding this comment.
This change removes both the html background and body min-height: 100svh. On short pages (content height < viewport height), the canvas below the body can show the browser default background rather than your intended gradient, since the body background won’t necessarily paint the full viewport without a minimum height and the html background is now unset. To avoid visible background seams, keep a viewport-filling min-height on body (or set a background on html), or otherwise ensure the page background paints the full viewport height.
Summary
Describe the change in a few sentences.
Testing
List the checks you ran or explain what still needs validation.
Context
Link any related issue or add background that helps explain the change.