gsadmin/KoalaSync
1
0
Fork 0
mirror of https://github.com/Shik3i/KoalaSync.git synced 2026-08-24 17:56:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix bamboo stalk taper and align stray colors to palette

Browse Source 
The stalks used border-radius:50%, which renders a tall ellipse whose
ends taper to points, and unbounded parallax drift pushed them off the
bottom of the viewport on long pages. Rounded caps + 20% overscan +
a viewport-relative drift clamp keep them full-height while scrolling.

Sweep the remaining off-palette colors into the nature palette:
content-script overlays (slate grays), amber warnings/badges/star
accents (now terracotta) in popup, background badge and website
illustrations, and the support-heart red (now --danger).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
KoalaDev
2026-07-10 19:28:50 +02:00
parent aa52d319e1
commit 1f1844e99b
8 changed files with 53 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/app.js
+5 -3
View File
@@ -217,9 +217,11 @@ document.addEventListener('DOMContentLoaded', () => {
const bambooNear = document.getElementById('bamboo-near');
if (bambooFar && bambooNear && !window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
window.addEventListener('scroll', () => {
const scrollY = window.scrollY;
bambooFar.style.transform = `translateY(${scrollY * 0.04}px)`;
bambooNear.style.transform = `translateY(${-scrollY * 0.06}px)`;
// Cap the drift at ~14% of the viewport: the stalks have 20%
// overscan, so they always span the full height while parallaxing.
const maxShift = window.innerHeight * 0.14;
bambooFar.style.transform = `translateY(${Math.min(window.scrollY * 0.04, maxShift)}px)`;
bambooNear.style.transform = `translateY(${-Math.min(window.scrollY * 0.06, maxShift)}px)`;
}, { passive: true });
}
website/join.html
+1 -1
View File
@@ -173,7 +173,7 @@
<a href="privacy" lang="en" style="color: var(--text-muted); text-decoration: none;">Privacy Policy</a>
<a href="de/datenschutz" lang="de" style="color: var(--text-muted); text-decoration: none;">Datenschutz</a>
<a href="alternatives"><span lang="en">Guides & comparisons</span><span lang="de">Vergleiche & Anleitungen</span></a>
<a href="https://support.koalastuff.net" target="_blank" rel="noopener" title="Support KoalaSync" style="color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; background: #c9302c; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 3px 9px; font-size: 0.72rem; font-weight: 700; line-height: 1;">
<a href="https://support.koalastuff.net" target="_blank" rel="noopener" title="Support KoalaSync" style="color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; background: #b94642; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 3px 9px; font-size: 0.72rem; font-weight: 700; line-height: 1;">
<span aria-hidden="true">♥</span>
<span>Support KoalaSync</span>
</a>
website/style.css
+23 -23
View File
@@ -139,9 +139,9 @@ body {
#bamboo-far .bamboo-stalk {
position: absolute;
top: -6%;
height: 112%;
border-radius: 50%;
top: -20%;
height: 140%;
border-radius: 999px;
filter: blur(5.5px);
background: linear-gradient(180deg, oklch(0.32 0.05 145 / 0.35), oklch(0.24 0.04 140 / 0.15));
}
@@ -159,9 +159,9 @@ body {
#bamboo-near .bamboo-stalk {
position: absolute;
top: -6%;
height: 112%;
border-radius: 50%;
top: -20%;
height: 140%;
border-radius: 999px;
background: linear-gradient(180deg, oklch(0.4 0.07 145 / 0.55), oklch(0.26 0.05 140 / 0.25));
transform-origin: bottom center;
animation: bambooSway 10s ease-in-out infinite;
@@ -179,9 +179,9 @@ body {
background: oklch(0.5 0.08 145 / 0.5);
}
#bamboo-near .node-1 { top: 24%; }
#bamboo-near .node-2 { top: 49%; }
#bamboo-near .node-3 { top: 74%; }
#bamboo-near .node-1 { top: 28%; }
#bamboo-near .node-2 { top: 48%; }
#bamboo-near .node-3 { top: 68%; }
#bamboo-near .bamboo-leaf {
position: absolute;
@@ -191,9 +191,9 @@ body {
background: oklch(0.55 0.11 145 / 0.4);
}
#bamboo-near .near-1 .leaf-1 { top: 23%; left: 10px; transform: rotate(18deg); }
#bamboo-near .near-1 .leaf-2 { top: 48.5%; left: -28px; transform: rotate(-160deg); width: 22px; height: 10px; }
#bamboo-near .near-2 .leaf-1 { top: 30%; left: -26px; transform: rotate(-155deg); }
#bamboo-near .near-1 .leaf-1 { top: 27.5%; left: 10px; transform: rotate(18deg); }
#bamboo-near .near-1 .leaf-2 { top: 47.5%; left: -28px; transform: rotate(-160deg); width: 22px; height: 10px; }
#bamboo-near .near-2 .leaf-1 { top: 44%; left: -26px; transform: rotate(-155deg); }
@keyframes bambooSway {
0%, 100% { transform: rotate(0); }
@@ -1409,9 +1409,9 @@ html.theme-light .koala-speech-bubble::after {
display: flex;
align-items: center;
gap: 0.4rem;
background: rgba(234, 179, 8, 0.1);
border: 1px solid rgba(234, 179, 8, 0.2);
color: #facc15;
background: oklch(0.62 0.14 45 / 0.1);
border: 1px solid oklch(0.62 0.14 45 / 0.2);
color: oklch(0.72 0.13 50);
padding: 0.5rem 0.6rem;
border-radius: 8px;
font-weight: 600;
@@ -1977,7 +1977,7 @@ input:checked + .mock-slider:before {
opacity: 0.6;
}
.illus-browser-dot:nth-child(1) { background: oklch(0.55 0.15 25); }
.illus-browser-dot:nth-child(2) { background: #fbbf24; }
.illus-browser-dot:nth-child(2) { background: oklch(0.68 0.14 45); }
.illus-browser-dot:nth-child(3) { background: oklch(0.68 0.13 150); }
.illus-browser-address-bar {
@@ -2639,7 +2639,7 @@ input:checked + .mock-slider:before {
}
.terminal-dot.red { background: oklch(0.55 0.15 25); }
.terminal-dot.yellow { background: #f59e0b; }
.terminal-dot.yellow { background: oklch(0.68 0.14 45); }
.terminal-dot.green { background: oklch(0.68 0.13 150); }
.terminal-tabs {
@@ -2701,7 +2701,7 @@ input:checked + .mock-slider:before {
.t-key { color: oklch(0.72 0.12 45); }
.t-val { color: oklch(0.75 0.10 150); }
.t-str { color: oklch(0.80 0.12 155); }
.t-num { color: #fbbf24; }
.t-num { color: oklch(0.75 0.12 50); }
.terminal-copy-btn {
position: absolute;
@@ -3046,7 +3046,7 @@ html:not(.lang-de) [lang="de"] {
.feature-card:nth-child(2) { --card-accent: oklch(0.62 0.14 45 / 0.06); }
.feature-card:nth-child(3) { --card-accent: oklch(0.68 0.13 150 / 0.06); }
.feature-card:nth-child(4) { --card-accent: oklch(0.75 0.10 150 / 0.06); }
.feature-card:nth-child(5) { --card-accent: rgba(245, 158, 11, 0.06); }
.feature-card:nth-child(5) { --card-accent: oklch(0.68 0.14 45 / 0.06); }
.feature-card:nth-child(6) { --card-accent: oklch(0.62 0.14 45 / 0.06); }
.feature-card:nth-child(7) { --card-accent: oklch(0.62 0.14 45 / 0.06); }
.feature-card:nth-child(8) { --card-accent: oklch(0.68 0.13 150 / 0.06); }
@@ -3339,9 +3339,9 @@ html.theme-light .compat-logo img.compat-logo-disneyplus-mark {
transition: opacity 0.3s ease;
}
.use-case-card:nth-child(1) { --card-accent-border: #f59e0b; }
.use-case-card:nth-child(2) { --card-accent-border: oklch(0.75 0.10 150); }
.use-case-card:nth-child(3) { --card-accent-border: oklch(0.62 0.14 45); }
.use-case-card:nth-child(1) { --card-accent-border: oklch(0.68 0.13 150); }
.use-case-card:nth-child(2) { --card-accent-border: oklch(0.62 0.14 45); }
.use-case-card:nth-child(3) { --card-accent-border: oklch(0.75 0.10 150); }
.use-case-card:hover {
@@ -4789,7 +4789,7 @@ header[id] {
.film-bounce-ball {
transform-origin: bottom center;
transform: translateY(var(--bounce-y, 0px));
filter: drop-shadow(0 0 4px #fde047);
filter: drop-shadow(0 0 4px oklch(0.72 0.13 50));
}
/* Twinkle & Glow play state bindings */
website/template.html
+5 -5
View File
@@ -425,7 +425,7 @@
<polygon points="275,84 288,42 301,84" fill="#040903"/>
<path d="M0,84 Q80,82 160,84 T320,84 L320,92 L0,92 Z" fill="#040903"/>
</g>
<circle class="film-bounce-ball" cx="80" cy="46" r="3.5" fill="#fde047"/>
<circle class="film-bounce-ball" cx="80" cy="46" r="3.5" fill="#de7949"/>
</svg>
<div class="demo-play-overlay" aria-hidden="true">
<span class="demo-icon-wrap">
@@ -482,7 +482,7 @@
<polygon points="275,84 288,42 301,84" fill="#040903"/>
<path d="M0,84 Q80,82 160,84 T320,84 L320,92 L0,92 Z" fill="#040903"/>
</g>
<circle class="film-bounce-ball" cx="80" cy="46" r="3.5" fill="#fde047"/>
<circle class="film-bounce-ball" cx="80" cy="46" r="3.5" fill="#de7949"/>
</svg>
<div class="demo-play-overlay" aria-hidden="true">
<span class="demo-icon-wrap">
@@ -1169,7 +1169,7 @@
<polygon points="115,84 128,42 141,84" fill="#040903"/>
<path d="M0,84 Q40,82 80,84 T160,84 L160,92 L0,92 Z" fill="#040903"/>
</g>
<circle class="film-bounce-ball" cx="80" cy="80" r="4.5" fill="#fde047"/>
<circle class="film-bounce-ball" cx="80" cy="80" r="4.5" fill="#de7949"/>
</svg>
</div>
<div class="player-controls">
@@ -1222,7 +1222,7 @@
<polygon points="115,84 128,42 141,84" fill="#040903"/>
<path d="M0,84 Q40,82 80,84 T160,84 L160,92 L0,92 Z" fill="#040903"/>
</g>
<circle class="film-bounce-ball" cx="80" cy="80" r="4.5" fill="#fde047"/>
<circle class="film-bounce-ball" cx="80" cy="80" r="4.5" fill="#de7949"/>
</svg>
</div>
<div class="player-controls">
@@ -1463,7 +1463,7 @@
<a href="{{ASSET_PATH}}{{FOOTER_LEGAL_LINK}}" style="color: var(--text-muted); text-decoration: none;"><span>{{FOOTER_LEGAL}}</span></a>
<a href="{{ASSET_PATH}}{{FOOTER_PRIVACY_LINK}}" style="color: var(--text-muted); text-decoration: none;"><span>{{FOOTER_PRIVACY}}</span></a>
<a href="{{ASSET_PATH}}{{LANG_PREFIX}}alternatives"><span><span lang="en">Guides & comparisons</span><span lang="de">Vergleiche & Anleitungen</span></span></a>
<a href="https://support.koalastuff.net" target="_blank" rel="noopener" title="{{FOOTER_SUPPORT}}" style="color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; background: #c9302c; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 3px 9px; font-size: 0.72rem; font-weight: 700; line-height: 1;">
<a href="https://support.koalastuff.net" target="_blank" rel="noopener" title="{{FOOTER_SUPPORT}}" style="color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; background: #b94642; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 3px 9px; font-size: 0.72rem; font-weight: 700; line-height: 1;">
<span aria-hidden="true">♥</span>
<span>{{FOOTER_SUPPORT}}</span>
</a>