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

Palmtrees background

Browse Source
This commit is contained in:
Javier Blanco
2026-05-02 11:31:21 +07:00
parent 4b954eaa7e
commit 0e0148d0fd
9 changed files with 114 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/palm-fronds-left.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 MiB

BIN
assets/palm-fronds.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 MiB

13
classes.html
View File

@@ -18,7 +18,18 @@
<body>
<div class="sfB-bg" aria-hidden="true"></div>
<div class="sfB-bg" aria-hidden="true">
<div class="sfB-palms">
<img class="sfB-palm corner-tl" src="assets/palm-fronds-left.png" alt="" style="--sway:2.5deg;animation-duration:8s;animation-delay:0s">
<img class="sfB-palm corner-tr" src="assets/palm-fronds.png" alt="" style="--sway:3deg;animation-duration:9s;animation-delay:-2s">
<img class="sfB-palm corner-bl" src="assets/palm-fronds-left.png" alt="" style="--sway:2.8deg;animation-duration:10s;animation-delay:-4s;--flip:scaleY(-1)">
<img class="sfB-palm corner-br" src="assets/palm-fronds.png" alt="" style="--sway:2.2deg;animation-duration:11s;animation-delay:-1.5s;--flip:scaleY(-1)">
<img class="sfB-palm corner-ml" src="assets/palm-fronds-left.png" alt="" style="--sway:3.2deg;animation-duration:9.5s;animation-delay:-3s">
<img class="sfB-palm corner-ml2" src="assets/palm-fronds-left.png" alt="" style="--sway:2.6deg;animation-duration:10.5s;animation-delay:-6s;--flip:scaleY(-1)">
<img class="sfB-palm corner-mr" src="assets/palm-fronds.png" alt="" style="--sway:2.4deg;animation-duration:11.5s;animation-delay:-1s">
<img class="sfB-palm corner-mr2" src="assets/palm-fronds.png" alt="" style="--sway:3.4deg;animation-duration:8.5s;animation-delay:-7s;--flip:scaleY(-1)">
</div>
</div>
<nav class="sfB-mobile-nav" id="sfB-mobile-nav">
<button class="mnav-close" id="sfB-mobile-nav-close">✕</button>

13
connect.html
View File

@@ -17,7 +17,18 @@
<body>
<div class="sfB-bg" aria-hidden="true"></div>
<div class="sfB-bg" aria-hidden="true">
<div class="sfB-palms">
<img class="sfB-palm corner-tl" src="assets/palm-fronds-left.png" alt="" style="--sway:2.5deg;animation-duration:8s;animation-delay:0s">
<img class="sfB-palm corner-tr" src="assets/palm-fronds.png" alt="" style="--sway:3deg;animation-duration:9s;animation-delay:-2s">
<img class="sfB-palm corner-bl" src="assets/palm-fronds-left.png" alt="" style="--sway:2.8deg;animation-duration:10s;animation-delay:-4s;--flip:scaleY(-1)">
<img class="sfB-palm corner-br" src="assets/palm-fronds.png" alt="" style="--sway:2.2deg;animation-duration:11s;animation-delay:-1.5s;--flip:scaleY(-1)">
<img class="sfB-palm corner-ml" src="assets/palm-fronds-left.png" alt="" style="--sway:3.2deg;animation-duration:9.5s;animation-delay:-3s">
<img class="sfB-palm corner-ml2" src="assets/palm-fronds-left.png" alt="" style="--sway:2.6deg;animation-duration:10.5s;animation-delay:-6s;--flip:scaleY(-1)">
<img class="sfB-palm corner-mr" src="assets/palm-fronds.png" alt="" style="--sway:2.4deg;animation-duration:11.5s;animation-delay:-1s">
<img class="sfB-palm corner-mr2" src="assets/palm-fronds.png" alt="" style="--sway:3.4deg;animation-duration:8.5s;animation-delay:-7s;--flip:scaleY(-1)">
</div>
</div>
<nav class="sfB-mobile-nav" id="sfB-mobile-nav">
<button class="mnav-close" id="sfB-mobile-nav-close">✕</button>

42
css/style.css
View File

@@ -1412,3 +1412,45 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
.sfB-page-head h1 { font-size: 44px; letter-spacing: -1.5px; }
.sfB-collab h2 { font-size: 28px; }
}
/* ── Palm-frond background layer ── */
.sfB-palms {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.sfB-palm {
position: absolute;
width: 620px;
height: 620px;
object-fit: contain;
opacity: 0.22;
filter: saturate(0.75) brightness(0.95) hue-rotate(-6deg);
mix-blend-mode: lighten;
transform: var(--flip, none);
animation-name: sfB-palm-sway;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
will-change: transform;
}
.sfB-palm.corner-tl { top: -8%; left: -10%; transform-origin: 0% 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-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%; }
@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)); }
}
@media (prefers-reduced-motion: reduce) {
.sfB-palm { animation: none !important; }
}

13
festivals.html
View File

@@ -18,7 +18,18 @@
<body>
<div class="sfB-bg" aria-hidden="true"></div>
<div class="sfB-bg" aria-hidden="true">
<div class="sfB-palms">
<img class="sfB-palm corner-tl" src="assets/palm-fronds-left.png" alt="" style="--sway:2.5deg;animation-duration:8s;animation-delay:0s">
<img class="sfB-palm corner-tr" src="assets/palm-fronds.png" alt="" style="--sway:3deg;animation-duration:9s;animation-delay:-2s">
<img class="sfB-palm corner-bl" src="assets/palm-fronds-left.png" alt="" style="--sway:2.8deg;animation-duration:10s;animation-delay:-4s;--flip:scaleY(-1)">
<img class="sfB-palm corner-br" src="assets/palm-fronds.png" alt="" style="--sway:2.2deg;animation-duration:11s;animation-delay:-1.5s;--flip:scaleY(-1)">
<img class="sfB-palm corner-ml" src="assets/palm-fronds-left.png" alt="" style="--sway:3.2deg;animation-duration:9.5s;animation-delay:-3s">
<img class="sfB-palm corner-ml2" src="assets/palm-fronds-left.png" alt="" style="--sway:2.6deg;animation-duration:10.5s;animation-delay:-6s;--flip:scaleY(-1)">
<img class="sfB-palm corner-mr" src="assets/palm-fronds.png" alt="" style="--sway:2.4deg;animation-duration:11.5s;animation-delay:-1s">
<img class="sfB-palm corner-mr2" src="assets/palm-fronds.png" alt="" style="--sway:3.4deg;animation-duration:8.5s;animation-delay:-7s;--flip:scaleY(-1)">
</div>
</div>
<nav class="sfB-mobile-nav" id="sfB-mobile-nav">
<button class="mnav-close" id="sfB-mobile-nav-close">✕</button>

13
index.html
View File

@@ -19,7 +19,18 @@
<body>
<!-- Background blobs -->
<div class="sfB-bg" aria-hidden="true"></div>
<div class="sfB-bg" aria-hidden="true">
<div class="sfB-palms">
<img class="sfB-palm corner-tl" src="assets/palm-fronds-left.png" alt="" style="--sway:2.5deg;animation-duration:8s;animation-delay:0s">
<img class="sfB-palm corner-tr" src="assets/palm-fronds.png" alt="" style="--sway:3deg;animation-duration:9s;animation-delay:-2s">
<img class="sfB-palm corner-bl" src="assets/palm-fronds-left.png" alt="" style="--sway:2.8deg;animation-duration:10s;animation-delay:-4s;--flip:scaleY(-1)">
<img class="sfB-palm corner-br" src="assets/palm-fronds.png" alt="" style="--sway:2.2deg;animation-duration:11s;animation-delay:-1.5s;--flip:scaleY(-1)">
<img class="sfB-palm corner-ml" src="assets/palm-fronds-left.png" alt="" style="--sway:3.2deg;animation-duration:9.5s;animation-delay:-3s">
<img class="sfB-palm corner-ml2" src="assets/palm-fronds-left.png" alt="" style="--sway:2.6deg;animation-duration:10.5s;animation-delay:-6s;--flip:scaleY(-1)">
<img class="sfB-palm corner-mr" src="assets/palm-fronds.png" alt="" style="--sway:2.4deg;animation-duration:11.5s;animation-delay:-1s">
<img class="sfB-palm corner-mr2" src="assets/palm-fronds.png" alt="" style="--sway:3.4deg;animation-duration:8.5s;animation-delay:-7s;--flip:scaleY(-1)">
</div>
</div>
<!-- Mobile nav overlay -->
<nav class="sfB-mobile-nav" id="sfB-mobile-nav" aria-label="Mobile navigation">

13
schedule.html
View File

@@ -18,7 +18,18 @@
<body>
<div class="sfB-bg" aria-hidden="true"></div>
<div class="sfB-bg" aria-hidden="true">
<div class="sfB-palms">
<img class="sfB-palm corner-tl" src="assets/palm-fronds-left.png" alt="" style="--sway:2.5deg;animation-duration:8s;animation-delay:0s">
<img class="sfB-palm corner-tr" src="assets/palm-fronds.png" alt="" style="--sway:3deg;animation-duration:9s;animation-delay:-2s">
<img class="sfB-palm corner-bl" src="assets/palm-fronds-left.png" alt="" style="--sway:2.8deg;animation-duration:10s;animation-delay:-4s;--flip:scaleY(-1)">
<img class="sfB-palm corner-br" src="assets/palm-fronds.png" alt="" style="--sway:2.2deg;animation-duration:11s;animation-delay:-1.5s;--flip:scaleY(-1)">
<img class="sfB-palm corner-ml" src="assets/palm-fronds-left.png" alt="" style="--sway:3.2deg;animation-duration:9.5s;animation-delay:-3s">
<img class="sfB-palm corner-ml2" src="assets/palm-fronds-left.png" alt="" style="--sway:2.6deg;animation-duration:10.5s;animation-delay:-6s;--flip:scaleY(-1)">
<img class="sfB-palm corner-mr" src="assets/palm-fronds.png" alt="" style="--sway:2.4deg;animation-duration:11.5s;animation-delay:-1s">
<img class="sfB-palm corner-mr2" src="assets/palm-fronds.png" alt="" style="--sway:3.4deg;animation-duration:8.5s;animation-delay:-7s;--flip:scaleY(-1)">
</div>
</div>
<nav class="sfB-mobile-nav" id="sfB-mobile-nav" aria-label="Mobile navigation">
<button class="mnav-close" id="sfB-mobile-nav-close" aria-label="Close menu">✕</button>

13
studios.html
View File

@@ -18,7 +18,18 @@
<body>
<div class="sfB-bg" aria-hidden="true"></div>
<div class="sfB-bg" aria-hidden="true">
<div class="sfB-palms">
<img class="sfB-palm corner-tl" src="assets/palm-fronds-left.png" alt="" style="--sway:2.5deg;animation-duration:8s;animation-delay:0s">
<img class="sfB-palm corner-tr" src="assets/palm-fronds.png" alt="" style="--sway:3deg;animation-duration:9s;animation-delay:-2s">
<img class="sfB-palm corner-bl" src="assets/palm-fronds-left.png" alt="" style="--sway:2.8deg;animation-duration:10s;animation-delay:-4s;--flip:scaleY(-1)">
<img class="sfB-palm corner-br" src="assets/palm-fronds.png" alt="" style="--sway:2.2deg;animation-duration:11s;animation-delay:-1.5s;--flip:scaleY(-1)">
<img class="sfB-palm corner-ml" src="assets/palm-fronds-left.png" alt="" style="--sway:3.2deg;animation-duration:9.5s;animation-delay:-3s">
<img class="sfB-palm corner-ml2" src="assets/palm-fronds-left.png" alt="" style="--sway:2.6deg;animation-duration:10.5s;animation-delay:-6s;--flip:scaleY(-1)">
<img class="sfB-palm corner-mr" src="assets/palm-fronds.png" alt="" style="--sway:2.4deg;animation-duration:11.5s;animation-delay:-1s">
<img class="sfB-palm corner-mr2" src="assets/palm-fronds.png" alt="" style="--sway:3.4deg;animation-duration:8.5s;animation-delay:-7s;--flip:scaleY(-1)">
</div>
</div>
<nav class="sfB-mobile-nav" id="sfB-mobile-nav">
<button class="mnav-close" id="sfB-mobile-nav-close">✕</button>