Conversation
There was a problem hiding this comment.
Pull request overview
Updates theme/background colors to better align the page styling with iOS browser chrome and the site’s top-of-page color treatment.
Changes:
- Updated PWA manifest
theme_colorandbackground_color. - Adjusted
htmlbackground gradient to include a dark top segment. - Added a top overlay gradient to
bodybackground to match the dark segment.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
| assets/img/favicon/site.webmanifest | Updates manifest theme/background colors to new palette values. |
| assets/css/site.scss | Adjusts page gradients to introduce a dark top region consistent with updated theme colors. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| ], | ||
| "theme_color": "#ffffff", | ||
| "background_color": "#ffffff", | ||
| "theme_color": "#0f172a", |
There was a problem hiding this comment.
theme_color in site.webmanifest typically does not affect iOS Safari’s browser UI (unless the site is installed as a web app). If the PR goal is “iOS browser chrome colors” in Safari, add/update a corresponding <meta name="theme-color" content="#0f172a"> (and, if applicable, apple-mobile-web-app-status-bar-style) in the site’s HTML head/layout so iOS Safari picks it up.
| "theme_color": "#0f172a", |
| scroll-behavior: smooth; | ||
| background: linear-gradient(180deg, #f5f8fb 0%, #ebf1f7 100%); | ||
| background: | ||
| linear-gradient(180deg, #0f172a 0, #0f172a 8rem, #f5f8fb 8rem, #ebf1f7 100%); |
There was a problem hiding this comment.
The 8rem cutoff is duplicated in multiple gradients. Consider extracting it into a single SCSS variable (or CSS custom property) so the “top chrome height” can be adjusted in one place and stays consistent across html and body.
| 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), |
There was a problem hiding this comment.
The 8rem cutoff is duplicated in multiple gradients. Consider extracting it into a single SCSS variable (or CSS custom property) so the “top chrome height” can be adjusted in one place and stays consistent across html and body.
| scroll-behavior: smooth; | ||
| background: linear-gradient(180deg, #f5f8fb 0%, #ebf1f7 100%); | ||
| background: | ||
| linear-gradient(180deg, #0f172a 0, #0f172a 8rem, #f5f8fb 8rem, #ebf1f7 100%); |
There was a problem hiding this comment.
The gradient stop 0 is valid, but using an explicit unit (e.g., 0%) improves readability/consistency with the other stops (8rem, 100%) and reduces ambiguity for future edits.
| linear-gradient(180deg, #0f172a 0, #0f172a 8rem, #f5f8fb 8rem, #ebf1f7 100%); | |
| linear-gradient(180deg, #0f172a 0%, #0f172a 8rem, #f5f8fb 8rem, #ebf1f7 100%); |
| 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), |
There was a problem hiding this comment.
The gradient stop 0 is valid, but using an explicit unit (e.g., 0%) improves readability/consistency with the other stops (8rem, 100%) and reduces ambiguity for future edits.
| linear-gradient(180deg, rgba(15, 23, 42, 1) 0, rgba(15, 23, 42, 1) 8rem, rgba(245, 248, 251, 0) 8rem), | |
| linear-gradient(180deg, rgba(15, 23, 42, 1) 0%, rgba(15, 23, 42, 1) 8rem, rgba(245, 248, 251, 0) 8rem), |
No description provided.