Fix palm trees

This commit is contained in:
2026-05-02 12:43:56 +07:00
parent ca3a5e8926
commit 3c47ffafec
7 changed files with 12 additions and 38 deletions

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=ba34a4ab"> <link rel="stylesheet" href="../css/style.css?v=8d16d9a2">
</head> </head>
<body> <body>
@@ -31,12 +31,8 @@
style="--sway:2.2deg;animation-duration:11s;animation-delay:-1.5s;--flip:scaleY(-1)"> 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="" <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: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-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:2.4deg;animation-duration:11.5s;animation-delay:-1s">
<img class="sfB-palm corner-mr2" src="../assets/palm-fronds-right.png" alt=""
style="--sway:3.4deg;animation-duration:8.5s;animation-delay:-7s;--flip:scaleY(-1)">
</div> </div>
</div> </div>
@@ -379,7 +375,7 @@
</div> </div>
</footer> </footer>
<script src="../js/main.js?v=ba34a4ab"></script> <script src="../js/main.js?v=8d16d9a2"></script>
</body> </body>
</html> </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=ba34a4ab"> <link rel="stylesheet" href="../css/style.css?v=8d16d9a2">
</head> </head>
<body> <body>
@@ -31,12 +31,8 @@
style="--sway:2.2deg;animation-duration:11s;animation-delay:-1.5s;--flip:scaleY(-1)"> 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="" <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: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-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:2.4deg;animation-duration:11.5s;animation-delay:-1s">
<img class="sfB-palm corner-mr2" src="../assets/palm-fronds-right.png" alt=""
style="--sway:3.4deg;animation-duration:8.5s;animation-delay:-7s;--flip:scaleY(-1)">
</div> </div>
</div> </div>
@@ -197,7 +193,7 @@
</div> </div>
</footer> </footer>
<script src="../js/main.js?v=ba34a4ab"></script> <script src="../js/main.js?v=8d16d9a2"></script>
</body> </body>
</html> </html>

View File

@@ -1486,9 +1486,7 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
.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: clamp(120px, 49vw, 760px); height: clamp(120px, 49vw, 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: 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-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 { @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)); }

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=ba34a4ab"> <link rel="stylesheet" href="../css/style.css?v=8d16d9a2">
</head> </head>
<body> <body>
@@ -31,12 +31,8 @@
style="--sway:2.2deg;animation-duration:11s;animation-delay:-1.5s;--flip:scaleY(-1)"> 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="" <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: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-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:2.4deg;animation-duration:11.5s;animation-delay:-1s">
<img class="sfB-palm corner-mr2" src="../assets/palm-fronds-right.png" alt=""
style="--sway:3.4deg;animation-duration:8.5s;animation-delay:-7s;--flip:scaleY(-1)">
</div> </div>
</div> </div>
@@ -248,7 +244,7 @@
</div> </div>
</footer> </footer>
<script src="../js/main.js?v=ba34a4ab"></script> <script src="../js/main.js?v=8d16d9a2"></script>
</body> </body>
</html> </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=ba34a4ab"> <link rel="stylesheet" href="css/style.css?v=8d16d9a2">
</head> </head>
<body> <body>
@@ -32,12 +32,8 @@
style="--sway:2.2deg;animation-duration:11s;animation-delay:-1.5s;--flip:scaleY(-1)"> 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="" <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: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-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:2.4deg;animation-duration:11.5s;animation-delay:-1s">
<img class="sfB-palm corner-mr2" src="assets/palm-fronds-right.png" alt=""
style="--sway:3.4deg;animation-duration:8.5s;animation-delay:-7s;--flip:scaleY(-1)">
</div> </div>
</div> </div>
@@ -277,7 +273,7 @@
</div> </div>
</footer> </footer>
<script src="js/main.js?v=ba34a4ab"></script> <script src="js/main.js?v=8d16d9a2"></script>
</body> </body>
</html> </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=ba34a4ab"> <link rel="stylesheet" href="../css/style.css?v=8d16d9a2">
</head> </head>
<body> <body>
@@ -31,12 +31,8 @@
style="--sway:2.2deg;animation-duration:11s;animation-delay:-1.5s;--flip:scaleY(-1)"> 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="" <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: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-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:2.4deg;animation-duration:11.5s;animation-delay:-1s">
<img class="sfB-palm corner-mr2" src="../assets/palm-fronds-right.png" alt=""
style="--sway:3.4deg;animation-duration:8.5s;animation-delay:-7s;--flip:scaleY(-1)">
</div> </div>
</div> </div>
@@ -124,7 +120,7 @@
</div> </div>
</footer> </footer>
<script src="../js/main.js?v=ba34a4ab"></script> <script src="../js/main.js?v=8d16d9a2"></script>
<script> <script>
// Dynamic last-update label // Dynamic last-update label
(function () { (function () {

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=ba34a4ab"> <link rel="stylesheet" href="../css/style.css?v=8d16d9a2">
</head> </head>
<body> <body>
@@ -31,12 +31,8 @@
style="--sway:2.2deg;animation-duration:11s;animation-delay:-1.5s;--flip:scaleY(-1)"> 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="" <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: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-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:2.4deg;animation-duration:11.5s;animation-delay:-1s">
<img class="sfB-palm corner-mr2" src="../assets/palm-fronds-right.png" alt=""
style="--sway:3.4deg;animation-duration:8.5s;animation-delay:-7s;--flip:scaleY(-1)">
</div> </div>
</div> </div>
@@ -241,7 +237,7 @@
</div> </div>
</footer> </footer>
<script src="../js/main.js?v=ba34a4ab"></script> <script src="../js/main.js?v=8d16d9a2"></script>
</body> </body>
</html> </html>