mirror of
https://github.com/Shik3i/KoalaSync.git
synced 2026-08-21 00:16:36 +00:00
style(website): declutter background and polish stacked hero on small screens
- thin out bamboo/leaf/firefly decor in tiers (<=1440 / <=1024 / <=768px) so nothing moves behind the text column and copy stays readable - center the single-column hero below 1024px (text, koala, CTAs, trust line) and let the odd CTA button span the full grid row - remove the periodic wind gusts; keep the constant gentle bamboo sway - reword the German demo CTA to "Live-Demo ansehen" Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -258,7 +258,6 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
const bambooFar = document.getElementById('bamboo-far');
|
||||
const bambooMid = document.getElementById('bamboo-mid');
|
||||
const bambooNear = document.getElementById('bamboo-near');
|
||||
const forestScene = document.querySelector('.bg-nature');
|
||||
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
if (bambooFar && bambooNear && !prefersReducedMotion) {
|
||||
const depthDay = document.querySelector('.bg-depth-day');
|
||||
@@ -332,22 +331,6 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
});
|
||||
}
|
||||
renderForest();
|
||||
|
||||
// Wind gusts: every 12-24s the sway variables ramp up for ~3s. The
|
||||
// custom properties are registered via @property, so they transition
|
||||
// smoothly inside the running keyframes instead of jumping.
|
||||
if (forestScene) {
|
||||
const scheduleGust = () => {
|
||||
setTimeout(() => {
|
||||
forestScene.classList.add('gusting');
|
||||
setTimeout(() => {
|
||||
forestScene.classList.remove('gusting');
|
||||
scheduleGust();
|
||||
}, 3000);
|
||||
}, 12000 + Math.random() * 12000);
|
||||
};
|
||||
scheduleGust();
|
||||
}
|
||||
}
|
||||
|
||||
// Eucalyptus click confetti: leaves burst from wherever the visitor
|
||||
|
||||
Reference in New Issue
Block a user