From 559a2e9132b6dff7e101eea9619546b4152b1013 Mon Sep 17 00:00:00 2001 From: Javier Blanco Date: Sat, 2 May 2026 12:30:22 +0700 Subject: [PATCH] Fix palm trees --- css/style.css | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/css/style.css b/css/style.css index 8b79ad0..3c560de 100644 --- a/css/style.css +++ b/css/style.css @@ -1466,8 +1466,9 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; } .sfB-palm { position: absolute; - width: 620px; - height: 620px; + /* 40vw total width → 10vw off-screen (matching -10% offset) → 30vw visible per side */ + width: clamp(100px, 40vw, 620px); + height: clamp(100px, 40vw, 620px); object-fit: contain; opacity: 0.22; 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-bl { bottom: -8%; left: -10%; transform-origin: 0% 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-ml2 { top: 62%; left: -10%; width: 700px; height: 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-mr2 { top: 70%; right: -7%; width: 740px; height: 740px; opacity: 0.28; transform-origin: 100% 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: 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: 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: clamp(115px, 48vw, 740px); height: clamp(115px, 48vw, 740px); opacity: 0.28; transform-origin: 100% 50%; } @keyframes sfB-palm-sway { from { transform: var(--flip, none) rotate(calc(var(--sway, 3deg) * -0.5)); }