Javi/saborflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix palm trees

Browse Source
This commit is contained in:
Javier Blanco
2026-05-02 12:30:22 +07:00
parent ab99588e14
commit 559a2e9132
1 changed files with 7 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
css/style.css
View File

@@ -1466,8 +1466,9 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
.sfB-palm { .sfB-palm {
position: absolute; position: absolute;
width: 620px; /* 40vw total width → 10vw off-screen (matching -10% offset) → 30vw visible per side */
height: 620px; width: clamp(100px, 40vw, 620px);
height: clamp(100px, 40vw, 620px);
object-fit: contain; object-fit: contain;
opacity: 0.22; opacity: 0.22;
filter: saturate(0.75) brightness(0.95) hue-rotate(-6deg); filter: saturate(0.75) brightness(0.95) hue-rotate(-6deg);
@@ -1484,10 +1485,10 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
.sfB-palm.corner-tr { top: -8%; right: -10%; transform-origin: 100% 0%; } .sfB-palm.corner-tr { top: -8%; right: -10%; transform-origin: 100% 0%; }
.sfB-palm.corner-bl { bottom: -8%; left: -10%; transform-origin: 0% 100%; } .sfB-palm.corner-bl { bottom: -8%; left: -10%; transform-origin: 0% 100%; }
.sfB-palm.corner-br { bottom: -8%; right: -10%; transform-origin: 100% 100%; } .sfB-palm.corner-br { bottom: -8%; right: -10%; transform-origin: 100% 100%; }
.sfB-palm.corner-ml { top: 32%; left: -8%; width: 760px; height: 760px; opacity: 0.28; transform-origin: 0% 50%; } .sfB-palm.corner-ml { top: 32%; left: -8%; width: clamp(120px, 49vw, 760px); height: clamp(120px, 49vw, 760px); opacity: 0.28; transform-origin: 0% 50%; }
.sfB-palm.corner-ml2 { top: 62%; left: -10%; width: 700px; height: 700px; opacity: 0.26; transform-origin: 0% 50%; } .sfB-palm.corner-ml2 { top: 62%; left: -10%; width: clamp(110px, 45vw, 700px); height: clamp(110px, 45vw, 700px); opacity: 0.26; transform-origin: 0% 50%; }
.sfB-palm.corner-mr { top: 22%; right: -10%; width: 680px; height: 680px; opacity: 0.26; transform-origin: 100% 50%; } .sfB-palm.corner-mr { top: 22%; right: -10%; width: clamp(110px, 44vw, 680px); height: clamp(110px, 44vw, 680px); opacity: 0.26; transform-origin: 100% 50%; }
.sfB-palm.corner-mr2 { top: 70%; right: -7%; width: 740px; height: 740px; opacity: 0.28; transform-origin: 100% 50%; } .sfB-palm.corner-mr2 { top: 70%; right: -7%; width: clamp(115px, 48vw, 740px); height: clamp(115px, 48vw, 740px); opacity: 0.28; transform-origin: 100% 50%; }
@keyframes sfB-palm-sway { @keyframes sfB-palm-sway {
from { transform: var(--flip, none) rotate(calc(var(--sway, 3deg) * -0.5)); } from { transform: var(--flip, none) rotate(calc(var(--sway, 3deg) * -0.5)); }