Fix palm trees 3
This commit is contained in:
@@ -13,7 +13,7 @@
|
||||
<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"
|
||||
rel="stylesheet">
|
||||
<link rel="stylesheet" href="../css/style.css?v=8d16d9a2">
|
||||
<link rel="stylesheet" href="../css/style.css?v=f3e0b5f8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@@ -193,7 +193,7 @@
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="../js/main.js?v=8d16d9a2"></script>
|
||||
<script src="../js/main.js?v=f3e0b5f8"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1481,12 +1481,12 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
|
||||
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: clamp(120px, 49vw, 760px); height: clamp(120px, 49vw, 760px); opacity: 0.28; 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-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%; }
|
||||
|
||||
@keyframes sfB-palm-sway {
|
||||
from { transform: var(--flip, none) rotate(calc(var(--sway, 3deg) * -0.5)); }
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
<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"
|
||||
rel="stylesheet">
|
||||
<link rel="stylesheet" href="../css/style.css?v=8d16d9a2">
|
||||
<link rel="stylesheet" href="../css/style.css?v=f3e0b5f8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@@ -244,7 +244,7 @@
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="../js/main.js?v=8d16d9a2"></script>
|
||||
<script src="../js/main.js?v=f3e0b5f8"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -13,7 +13,7 @@
|
||||
<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"
|
||||
rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/style.css?v=8d16d9a2">
|
||||
<link rel="stylesheet" href="css/style.css?v=f3e0b5f8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@@ -273,7 +273,7 @@
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/main.js?v=8d16d9a2"></script>
|
||||
<script src="js/main.js?v=f3e0b5f8"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -178,14 +178,14 @@ function lockPalmSizes() {
|
||||
|
||||
// Each entry: [size, { top|bottom, left|right } in px]
|
||||
const config = {
|
||||
'corner-tl': { size: clamp(vw * 0.40, 100, 620), pos: { top: vh * -0.08, left: vw * -0.10 } },
|
||||
'corner-tl': { size: clamp(vw * 0.40, 100, 620), pos: { top: vh * -0.08, left: vw * -0.15 } },
|
||||
'corner-tr': { size: clamp(vw * 0.40, 100, 620), pos: { top: vh * -0.08, right: vw * -0.10 } },
|
||||
'corner-bl': { size: clamp(vw * 0.40, 100, 620), pos: { bottom: vh * -0.08, left: vw * -0.10 } },
|
||||
'corner-bl': { size: clamp(vw * 0.40, 100, 620), pos: { bottom: vh * -0.08, left: vw * -0.15 } },
|
||||
'corner-br': { size: clamp(vw * 0.40, 100, 620), pos: { bottom: vh * -0.08, right: vw * -0.10 } },
|
||||
'corner-ml': { size: clamp(vw * 0.49, 120, 760), pos: { top: vh * 0.32, left: vw * -0.08 } },
|
||||
'corner-ml': { size: clamp(vw * 0.49, 120, 760), pos: { top: vh * 0.32, left: vw * -0.15 } },
|
||||
'corner-ml2': { size: clamp(vw * 0.45, 110, 700), pos: { top: vh * 0.62, left: vw * -0.10 } },
|
||||
'corner-mr': { size: clamp(vw * 0.44, 110, 680), pos: { top: vh * 0.22, right: vw * -0.10 } },
|
||||
'corner-mr2': { size: clamp(vw * 0.48, 115, 740), pos: { top: vh * 0.70, right: vw * -0.07 } },
|
||||
'corner-mr2': { size: clamp(vw * 0.48, 115, 740), pos: { top: vh * 0.70, right: vw * -0.10 } },
|
||||
};
|
||||
|
||||
document.querySelectorAll('.sfB-palm').forEach(el => {
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
<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"
|
||||
rel="stylesheet">
|
||||
<link rel="stylesheet" href="../css/style.css?v=8d16d9a2">
|
||||
<link rel="stylesheet" href="../css/style.css?v=f3e0b5f8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@@ -120,7 +120,7 @@
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="../js/main.js?v=8d16d9a2"></script>
|
||||
<script src="../js/main.js?v=f3e0b5f8"></script>
|
||||
<script>
|
||||
// Dynamic last-update label
|
||||
(function () {
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
<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"
|
||||
rel="stylesheet">
|
||||
<link rel="stylesheet" href="../css/style.css?v=8d16d9a2">
|
||||
<link rel="stylesheet" href="../css/style.css?v=f3e0b5f8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@@ -237,7 +237,7 @@
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="../js/main.js?v=8d16d9a2"></script>
|
||||
<script src="../js/main.js?v=f3e0b5f8"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user