k1nq/TREK
1
0
Fork 0
mirror of https://github.com/mauriceboe/TREK.git synced 2026-11-14 00:01:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(native): show the photo and a visible grid on the light welcome screen

Browse Source 
The light scheme dropped the Kyoto band and drew the grid so faint it
vanished, leaving a bare white page. The photo now stays in both schemes
under a veil in the page colour (a dark dusk, or a bright haze in light
mode so the black wordmark still reads), and the light grid and wash are
strong enough to see.
This commit is contained in:
Maurice
2026-11-06 11:39:40 +01:00
parent 2077b9e375
commit 954d419671
1 changed files with 10 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/native-shell/shell.css
+10 -11
View File
@@ -65,6 +65,8 @@
--grid: rgba(255, 255, 255, 0.055);
--wash-1: rgba(129, 140, 248, 0.12);
--wash-2: rgba(244, 114, 182, 0.08);
--veil-top: rgba(9, 9, 11, 0.4);
--veil-mid: rgba(9, 9, 11, 0.72);
--font: 'Poppins', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, system-ui, sans-serif;
--radius: 16px;
--ease: cubic-bezier(0.22, 1, 0.36, 1);
@@ -87,9 +89,11 @@
--accent-ink: #ffffff;
--danger: #dc2626;
--ok: #16a34a;
--grid: rgba(0, 0, 0, 0.045);
--wash-1: rgba(79, 70, 229, 0.07);
--wash-2: rgba(219, 39, 119, 0.05);
--grid: rgba(17, 24, 39, 0.075);
--wash-1: rgba(79, 70, 229, 0.1);
--wash-2: rgba(219, 39, 119, 0.07);
--veil-top: rgba(255, 255, 255, 0.12);
--veil-mid: rgba(255, 255, 255, 0.74);
color-scheme: light;
}
.shell-logo,
@@ -148,26 +152,21 @@ body::before {
*/
/* The travel photo (Kyoto at dusk, as on liketrek.com), anchored left and faded
out toward the right so it hands over to the grid, and down into the page.
Dark-first; a dark photo over a white page reads badly, so light mode drops it
and keeps the grid alone. */
The veil over it takes the scheme's page colour: a dark dusk in dark mode, a
bright morning haze in light mode, so the black wordmark still reads on it. */
body::after {
content: '';
position: fixed;
inset: 0 0 auto;
height: 440px;
background:
linear-gradient(180deg, rgba(9, 9, 11, 0.4) 0%, rgba(9, 9, 11, 0.72) 62%, var(--bg) 100%),
linear-gradient(180deg, var(--veil-top) 0%, var(--veil-mid) 62%, var(--bg) 100%),
url('./img/kyoto.webp') left 28% / cover no-repeat;
-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 40%, transparent 80%);
mask-image: linear-gradient(90deg, #000 0%, #000 40%, transparent 80%);
pointer-events: none;
z-index: 0;
}
@media (prefers-color-scheme: light) {
body::after {
display: none;
}
}
.shell {
position: relative;