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

16
classes/index.html
View File

@@ -13,7 +13,7 @@
<link <link
href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..60,700;12..60,800&family=Caveat+Brush&family=JetBrains+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..60,700;12..60,800&family=Caveat+Brush&family=JetBrains+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap"
rel="stylesheet"> rel="stylesheet">
<link rel="stylesheet" href="../css/style.css?v=43b84b49"> <link rel="stylesheet" href="../css/style.css?v=d31dc0aa">
</head> </head>
<body> <body>
@@ -22,17 +22,17 @@
<span></span><span></span><span></span><span></span><span></span> <span></span><span></span><span></span><span></span><span></span>
<div class="sfB-palms"> <div class="sfB-palms">
<img class="sfB-palm corner-tl" src="../assets/palm-fronds-left.png" alt="" <img class="sfB-palm corner-tl" src="../assets/palm-fronds-left.png" alt=""
style="--sway:2.5deg;animation-duration:8s;animation-delay:0s"> style="--sway:10deg;animation-duration:8s;animation-delay:0s">
<img class="sfB-palm corner-tr" src="../assets/palm-fronds-right.png" alt="" <img class="sfB-palm corner-tr" src="../assets/palm-fronds-right.png" alt=""
style="--sway:3deg;animation-duration:9s;animation-delay:-2s"> style="--sway:12deg;animation-duration:9s;animation-delay:-2s">
<img class="sfB-palm corner-bl" src="../assets/palm-fronds-left.png" alt="" <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)"> style="--sway:11deg;animation-duration:10s;animation-delay:-4s;--flip:scaleY(-1)">
<img class="sfB-palm corner-br" src="../assets/palm-fronds-right.png" alt="" <img class="sfB-palm corner-br" src="../assets/palm-fronds-right.png" alt=""
style="--sway:2.2deg;animation-duration:11s;animation-delay:-1.5s;--flip:scaleY(-1)"> style="--sway:9deg;animation-duration:11s;animation-delay:-1.5s;--flip:scaleY(-1)">
<img class="sfB-palm corner-ml" src="../assets/palm-fronds-left.png" alt="" <img class="sfB-palm corner-ml" src="../assets/palm-fronds-left.png" alt=""
style="--sway:3.2deg;animation-duration:9.5s;animation-delay:-3s"> style="--sway:13deg;animation-duration:9.5s;animation-delay:-3s">
<img class="sfB-palm corner-mr" src="../assets/palm-fronds-right.png" alt="" <img class="sfB-palm corner-mr" src="../assets/palm-fronds-right.png" alt=""
style="--sway:2.4deg;animation-duration:11.5s;animation-delay:-1s"> style="--sway:10deg;animation-duration:11.5s;animation-delay:-1s">
</div> </div>
</div> </div>
@@ -375,7 +375,7 @@
</div> </div>
</footer> </footer>
<script src="../js/main.js?v=43b84b49"></script> <script src="../js/main.js?v=d31dc0aa"></script>
</body> </body>
</html> </html>

16
connect/index.html
View File

@@ -13,7 +13,7 @@
<link <link
href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..60,700;12..60,800&family=Caveat+Brush&family=JetBrains+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..60,700;12..60,800&family=Caveat+Brush&family=JetBrains+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap"
rel="stylesheet"> rel="stylesheet">
<link rel="stylesheet" href="../css/style.css?v=43b84b49"> <link rel="stylesheet" href="../css/style.css?v=d31dc0aa">
</head> </head>
<body> <body>
@@ -22,17 +22,17 @@
<span></span><span></span><span></span><span></span><span></span> <span></span><span></span><span></span><span></span><span></span>
<div class="sfB-palms"> <div class="sfB-palms">
<img class="sfB-palm corner-tl" src="../assets/palm-fronds-left.png" alt="" <img class="sfB-palm corner-tl" src="../assets/palm-fronds-left.png" alt=""
style="--sway:2.5deg;animation-duration:8s;animation-delay:0s"> style="--sway:10deg;animation-duration:8s;animation-delay:0s">
<img class="sfB-palm corner-tr" src="../assets/palm-fronds-right.png" alt="" <img class="sfB-palm corner-tr" src="../assets/palm-fronds-right.png" alt=""
style="--sway:3deg;animation-duration:9s;animation-delay:-2s"> style="--sway:12deg;animation-duration:9s;animation-delay:-2s">
<img class="sfB-palm corner-bl" src="../assets/palm-fronds-left.png" alt="" <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)"> style="--sway:11deg;animation-duration:10s;animation-delay:-4s;--flip:scaleY(-1)">
<img class="sfB-palm corner-br" src="../assets/palm-fronds-right.png" alt="" <img class="sfB-palm corner-br" src="../assets/palm-fronds-right.png" alt=""
style="--sway:2.2deg;animation-duration:11s;animation-delay:-1.5s;--flip:scaleY(-1)"> style="--sway:9deg;animation-duration:11s;animation-delay:-1.5s;--flip:scaleY(-1)">
<img class="sfB-palm corner-ml" src="../assets/palm-fronds-left.png" alt="" <img class="sfB-palm corner-ml" src="../assets/palm-fronds-left.png" alt=""
style="--sway:3.2deg;animation-duration:9.5s;animation-delay:-3s"> style="--sway:13deg;animation-duration:9.5s;animation-delay:-3s">
<img class="sfB-palm corner-mr" src="../assets/palm-fronds-right.png" alt="" <img class="sfB-palm corner-mr" src="../assets/palm-fronds-right.png" alt=""
style="--sway:2.4deg;animation-duration:11.5s;animation-delay:-1s"> style="--sway:10deg;animation-duration:11.5s;animation-delay:-1s">
</div> </div>
</div> </div>
@@ -193,7 +193,7 @@
</div> </div>
</footer> </footer>
<script src="../js/main.js?v=43b84b49"></script> <script src="../js/main.js?v=d31dc0aa"></script>
</body> </body>
</html> </html>

19
css/style.css
View File

@@ -1479,24 +1479,25 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
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);
mix-blend-mode: lighten; 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-name: sfB-palm-sway;
animation-duration: 6s;
animation-iteration-count: infinite; animation-iteration-count: infinite;
animation-direction: alternate; animation-direction: alternate;
animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;
will-change: transform; will-change: transform;
} }
.sfB-palm.corner-tl { top: -8%; left: -10vw; transform-origin: 0% 0%; } .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%; } .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%; } .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%; } .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%; } .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%; } .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 { @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, 14deg) * -0.25)); }
to { transform: var(--flip, none) rotate(calc(var(--sway, 3deg) * 0.5)); } to { transform: var(--flip, none) rotate(calc(var(--sway, 14deg) * 0.25)); }
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {

16
festivals/index.html
View File

@@ -13,7 +13,7 @@
<link <link
href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..60,700;12..60,800&family=Caveat+Brush&family=JetBrains+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..60,700;12..60,800&family=Caveat+Brush&family=JetBrains+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap"
rel="stylesheet"> rel="stylesheet">
<link rel="stylesheet" href="../css/style.css?v=43b84b49"> <link rel="stylesheet" href="../css/style.css?v=d31dc0aa">
</head> </head>
<body> <body>
@@ -22,17 +22,17 @@
<span></span><span></span><span></span><span></span><span></span> <span></span><span></span><span></span><span></span><span></span>
<div class="sfB-palms"> <div class="sfB-palms">
<img class="sfB-palm corner-tl" src="../assets/palm-fronds-left.png" alt="" <img class="sfB-palm corner-tl" src="../assets/palm-fronds-left.png" alt=""
style="--sway:2.5deg;animation-duration:8s;animation-delay:0s"> style="--sway:10deg;animation-duration:8s;animation-delay:0s">
<img class="sfB-palm corner-tr" src="../assets/palm-fronds-right.png" alt="" <img class="sfB-palm corner-tr" src="../assets/palm-fronds-right.png" alt=""
style="--sway:3deg;animation-duration:9s;animation-delay:-2s"> style="--sway:12deg;animation-duration:9s;animation-delay:-2s">
<img class="sfB-palm corner-bl" src="../assets/palm-fronds-left.png" alt="" <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)"> style="--sway:11deg;animation-duration:10s;animation-delay:-4s;--flip:scaleY(-1)">
<img class="sfB-palm corner-br" src="../assets/palm-fronds-right.png" alt="" <img class="sfB-palm corner-br" src="../assets/palm-fronds-right.png" alt=""
style="--sway:2.2deg;animation-duration:11s;animation-delay:-1.5s;--flip:scaleY(-1)"> style="--sway:9deg;animation-duration:11s;animation-delay:-1.5s;--flip:scaleY(-1)">
<img class="sfB-palm corner-ml" src="../assets/palm-fronds-left.png" alt="" <img class="sfB-palm corner-ml" src="../assets/palm-fronds-left.png" alt=""
style="--sway:3.2deg;animation-duration:9.5s;animation-delay:-3s"> style="--sway:13deg;animation-duration:9.5s;animation-delay:-3s">
<img class="sfB-palm corner-mr" src="../assets/palm-fronds-right.png" alt="" <img class="sfB-palm corner-mr" src="../assets/palm-fronds-right.png" alt=""
style="--sway:2.4deg;animation-duration:11.5s;animation-delay:-1s"> style="--sway:10deg;animation-duration:11.5s;animation-delay:-1s">
</div> </div>
</div> </div>
@@ -244,7 +244,7 @@
</div> </div>
</footer> </footer>
<script src="../js/main.js?v=43b84b49"></script> <script src="../js/main.js?v=d31dc0aa"></script>
</body> </body>
</html> </html>

16
index.html
View File

@@ -13,7 +13,7 @@
<link <link
href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..60,700;12..60,800&family=Caveat+Brush&family=JetBrains+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..60,700;12..60,800&family=Caveat+Brush&family=JetBrains+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap"
rel="stylesheet"> rel="stylesheet">
<link rel="stylesheet" href="css/style.css?v=43b84b49"> <link rel="stylesheet" href="css/style.css?v=d31dc0aa">
</head> </head>
<body> <body>
@@ -23,17 +23,17 @@
<span></span><span></span><span></span><span></span><span></span> <span></span><span></span><span></span><span></span><span></span>
<div class="sfB-palms"> <div class="sfB-palms">
<img class="sfB-palm corner-tl" src="assets/palm-fronds-left.png" alt="" <img class="sfB-palm corner-tl" src="assets/palm-fronds-left.png" alt=""
style="--sway:2.5deg;animation-duration:8s;animation-delay:0s"> style="--sway:10deg;animation-duration:8s;animation-delay:0s">
<img class="sfB-palm corner-tr" src="assets/palm-fronds-right.png" alt="" <img class="sfB-palm corner-tr" src="assets/palm-fronds-right.png" alt=""
style="--sway:3deg;animation-duration:9s;animation-delay:-2s"> style="--sway:12deg;animation-duration:9s;animation-delay:-2s">
<img class="sfB-palm corner-bl" src="assets/palm-fronds-left.png" alt="" <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)"> style="--sway:11deg;animation-duration:10s;animation-delay:-4s;--flip:scaleY(-1)">
<img class="sfB-palm corner-br" src="assets/palm-fronds-right.png" alt="" <img class="sfB-palm corner-br" src="assets/palm-fronds-right.png" alt=""
style="--sway:2.2deg;animation-duration:11s;animation-delay:-1.5s;--flip:scaleY(-1)"> style="--sway:9deg;animation-duration:11s;animation-delay:-1.5s;--flip:scaleY(-1)">
<img class="sfB-palm corner-ml" src="assets/palm-fronds-left.png" alt="" <img class="sfB-palm corner-ml" src="assets/palm-fronds-left.png" alt=""
style="--sway:3.2deg;animation-duration:9.5s;animation-delay:-3s"> style="--sway:13deg;animation-duration:9.5s;animation-delay:-3s">
<img class="sfB-palm corner-mr" src="assets/palm-fronds-right.png" alt="" <img class="sfB-palm corner-mr" src="assets/palm-fronds-right.png" alt=""
style="--sway:2.4deg;animation-duration:11.5s;animation-delay:-1s"> style="--sway:10deg;animation-duration:11.5s;animation-delay:-1s">
</div> </div>
</div> </div>
@@ -273,7 +273,7 @@
</div> </div>
</footer> </footer>
<script src="js/main.js?v=43b84b49"></script> <script src="js/main.js?v=d31dc0aa"></script>
</body> </body>
</html> </html>

16
schedule/index.html
View File

@@ -13,7 +13,7 @@
<link <link
href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..60,700;12..60,800&family=Caveat+Brush&family=JetBrains+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..60,700;12..60,800&family=Caveat+Brush&family=JetBrains+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap"
rel="stylesheet"> rel="stylesheet">
<link rel="stylesheet" href="../css/style.css?v=43b84b49"> <link rel="stylesheet" href="../css/style.css?v=d31dc0aa">
</head> </head>
<body> <body>
@@ -22,17 +22,17 @@
<span></span><span></span><span></span><span></span><span></span> <span></span><span></span><span></span><span></span><span></span>
<div class="sfB-palms"> <div class="sfB-palms">
<img class="sfB-palm corner-tl" src="../assets/palm-fronds-left.png" alt="" <img class="sfB-palm corner-tl" src="../assets/palm-fronds-left.png" alt=""
style="--sway:2.5deg;animation-duration:8s;animation-delay:0s"> style="--sway:10deg;animation-duration:8s;animation-delay:0s">
<img class="sfB-palm corner-tr" src="../assets/palm-fronds-right.png" alt="" <img class="sfB-palm corner-tr" src="../assets/palm-fronds-right.png" alt=""
style="--sway:3deg;animation-duration:9s;animation-delay:-2s"> style="--sway:12deg;animation-duration:9s;animation-delay:-2s">
<img class="sfB-palm corner-bl" src="../assets/palm-fronds-left.png" alt="" <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)"> style="--sway:11deg;animation-duration:10s;animation-delay:-4s;--flip:scaleY(-1)">
<img class="sfB-palm corner-br" src="../assets/palm-fronds-right.png" alt="" <img class="sfB-palm corner-br" src="../assets/palm-fronds-right.png" alt=""
style="--sway:2.2deg;animation-duration:11s;animation-delay:-1.5s;--flip:scaleY(-1)"> style="--sway:9deg;animation-duration:11s;animation-delay:-1.5s;--flip:scaleY(-1)">
<img class="sfB-palm corner-ml" src="../assets/palm-fronds-left.png" alt="" <img class="sfB-palm corner-ml" src="../assets/palm-fronds-left.png" alt=""
style="--sway:3.2deg;animation-duration:9.5s;animation-delay:-3s"> style="--sway:13deg;animation-duration:9.5s;animation-delay:-3s">
<img class="sfB-palm corner-mr" src="../assets/palm-fronds-right.png" alt="" <img class="sfB-palm corner-mr" src="../assets/palm-fronds-right.png" alt=""
style="--sway:2.4deg;animation-duration:11.5s;animation-delay:-1s"> style="--sway:10deg;animation-duration:11.5s;animation-delay:-1s">
</div> </div>
</div> </div>
@@ -119,7 +119,7 @@
</div> </div>
</footer> </footer>
<script src="../js/main.js?v=43b84b49"></script> <script src="../js/main.js?v=d31dc0aa"></script>
<script> <script>
// Dynamic last-update label // Dynamic last-update label
(function () { (function () {

16
studios/index.html
View File

@@ -13,7 +13,7 @@
<link <link
href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..60,700;12..60,800&family=Caveat+Brush&family=JetBrains+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..60,700;12..60,800&family=Caveat+Brush&family=JetBrains+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap"
rel="stylesheet"> rel="stylesheet">
<link rel="stylesheet" href="../css/style.css?v=43b84b49"> <link rel="stylesheet" href="../css/style.css?v=d31dc0aa">
</head> </head>
<body> <body>
@@ -22,17 +22,17 @@
<span></span><span></span><span></span><span></span><span></span> <span></span><span></span><span></span><span></span><span></span>
<div class="sfB-palms"> <div class="sfB-palms">
<img class="sfB-palm corner-tl" src="../assets/palm-fronds-left.png" alt="" <img class="sfB-palm corner-tl" src="../assets/palm-fronds-left.png" alt=""
style="--sway:2.5deg;animation-duration:8s;animation-delay:0s"> style="--sway:10deg;animation-duration:8s;animation-delay:0s">
<img class="sfB-palm corner-tr" src="../assets/palm-fronds-right.png" alt="" <img class="sfB-palm corner-tr" src="../assets/palm-fronds-right.png" alt=""
style="--sway:3deg;animation-duration:9s;animation-delay:-2s"> style="--sway:12deg;animation-duration:9s;animation-delay:-2s">
<img class="sfB-palm corner-bl" src="../assets/palm-fronds-left.png" alt="" <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)"> style="--sway:11deg;animation-duration:10s;animation-delay:-4s;--flip:scaleY(-1)">
<img class="sfB-palm corner-br" src="../assets/palm-fronds-right.png" alt="" <img class="sfB-palm corner-br" src="../assets/palm-fronds-right.png" alt=""
style="--sway:2.2deg;animation-duration:11s;animation-delay:-1.5s;--flip:scaleY(-1)"> style="--sway:9deg;animation-duration:11s;animation-delay:-1.5s;--flip:scaleY(-1)">
<img class="sfB-palm corner-ml" src="../assets/palm-fronds-left.png" alt="" <img class="sfB-palm corner-ml" src="../assets/palm-fronds-left.png" alt=""
style="--sway:3.2deg;animation-duration:9.5s;animation-delay:-3s"> style="--sway:13deg;animation-duration:9.5s;animation-delay:-3s">
<img class="sfB-palm corner-mr" src="../assets/palm-fronds-right.png" alt="" <img class="sfB-palm corner-mr" src="../assets/palm-fronds-right.png" alt=""
style="--sway:2.4deg;animation-duration:11.5s;animation-delay:-1s"> style="--sway:10deg;animation-duration:11.5s;animation-delay:-1s">
</div> </div>
</div> </div>
@@ -237,7 +237,7 @@
</div> </div>
</footer> </footer>
<script src="../js/main.js?v=43b84b49"></script> <script src="../js/main.js?v=d31dc0aa"></script>
</body> </body>
</html> </html>