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

Fix palm trees 4

Browse Source
This commit is contained in:
Javier Blanco
2026-05-02 14:51:08 +07:00
parent 9fc2eb4b89
commit b50ad2eb23
7 changed files with 58 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
css/style.css
View File

@@ -1479,24 +1479,25 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
opacity: 0.22;
filter: saturate(0.75) brightness(0.95) hue-rotate(-6deg);
mix-blend-mode: lighten;
transform: var(--flip, none);
--flip: ; /* empty default so keyframes resolve to rotate(...) not "none rotate(...)" */
animation-name: sfB-palm-sway;
animation-duration: 6s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
will-change: transform;
}
.sfB-palm.corner-tl { top: -8%; left: -10vw; transform-origin: 0% 0%; }
.sfB-palm.corner-tr { top: -8%; right: -10vw; transform-origin: 100% 0%; }
.sfB-palm.corner-bl { bottom: -8%; left: -10vw; transform-origin: 0% 100%; }
.sfB-palm.corner-br { bottom: -8%; right: -10vw; transform-origin: 100% 100%; }
.sfB-palm.corner-ml { top: 32%; left: -10vw; width: clamp(120px, 49vw, 760px); height: clamp(120px, 49vw, 760px); opacity: 0.28; transform-origin: 0% 50%; }
.sfB-palm.corner-mr { top: 22%; right: -10vw; width: clamp(110px, 44vw, 680px); height: clamp(110px, 44vw, 680px); opacity: 0.26; transform-origin: 100% 50%; }
.sfB-palm.corner-tl { top: -8%; left: -10vw; transform-origin: 0% 0%; animation-duration: 7s; }
.sfB-palm.corner-tr { top: -8%; right: -10vw; transform-origin: 100% 0%; animation-duration: 5s; }
.sfB-palm.corner-bl { bottom: -8%; left: -10vw; transform-origin: 0% 100%; animation-duration: 8s; }
.sfB-palm.corner-br { bottom: -8%; right: -10vw; transform-origin: 100% 100%; animation-duration: 6.5s;}
.sfB-palm.corner-ml { top: 32%; left: -10vw; width: clamp(120px, 49vw, 760px); height: clamp(120px, 49vw, 760px); opacity: 0.28; transform-origin: 0% 50%; animation-duration: 9s; }
.sfB-palm.corner-mr { top: 22%; right: -10vw; width: clamp(110px, 44vw, 680px); height: clamp(110px, 44vw, 680px); opacity: 0.26; transform-origin: 100% 50%; animation-duration: 7.5s;}
@keyframes sfB-palm-sway {
from { transform: var(--flip, none) rotate(calc(var(--sway, 3deg) * -0.5)); }
to { transform: var(--flip, none) rotate(calc(var(--sway, 3deg) * 0.5)); }
from { transform: var(--flip, none) rotate(calc(var(--sway, 14deg) * -0.25)); }
to { transform: var(--flip, none) rotate(calc(var(--sway, 14deg) * 0.25)); }
}
@media (prefers-reduced-motion: reduce) {