dandri/simplex-chat
1
0
Fork 0
mirror of https://github.com/simplex-chat/simplex-chat.git synced 2026-07-12 18:19:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

website: keep the testing-water hero flag locked to its background

Browse Source 
The standalone flag phone + Reserve block was positioned by viewport percentage
(left:82%, bottom in canvas units), so on wide or narrow desktops it drifted
right/down relative to the centred background illustration. Anchor it to the
section centre instead and offset it in canvas units (--sec-vwu/--sec-vhu),
which scale by min(vw,vh) exactly like the background — so the block stays
pinned to the same spot in the illustration on any aspect ratio, as if baked
into it. Mobile is unaffected (it overrides the block to static/grid).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
another-simple-pixel
2026-06-30 02:28:25 -07:00
parent 75a2de3573
commit e3247f2f2a
1 changed files with 13 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/css/design3.css
+13 -8
View File
@@ -1670,16 +1670,21 @@ section.page.footer {
font-size: calc(var(--sec-vwu) * 2.3);
}
/* testing-water: standalone flag phone + reserve block, bottom-right (matches the baked-in
flag position of the full background). FIRST PASS — positions to calibrate visually. */
/* testing-water: flag + Reserve block are ONE positioned unit (flex), so they
stay attached when the block's width changes. */
/* testing-water: flag + Reserve are ONE absolutely-positioned unit. Anchored to the SECTION CENTRE
(= the centred background illustration's centre) and offset in canvas units (--sec-*), which scale
by min(vw,vh) exactly like the background. So the block stays locked to the same spot in the
illustration on any aspect ratio — as if baked into it — instead of drifting with viewport width.
--flag-x / --flag-y are the offsets from centre (canvas units); width:max-content keeps the text
from being squeezed when the position changes. */
.cf-hero--testing-water .cf-flag-block {
position: absolute;
bottom: calc(var(--sec-vhu) * 15);
left: 82%; /* horizontal CENTER of the group (it floats in the gutter, not pinned to the edge) */
transform: translateX(-50%);
width: max-content; /* size to content, so moving the position never squeezes the text */
left: 50%;
top: 50%;
--flag-x: 35;
--flag-y: 16;
transform: translate(calc(-50% + var(--sec-vwu) * var(--flag-x)),
calc(-50% + var(--sec-vhu) * var(--flag-y)));
width: max-content;
display: flex;
align-items: center;
}