Skip to content

Commit 5f8f1b3

Browse files
Merge pull request #110 from borgbackup/index2-tweaks-2
index2: nav size, dimmer chunks, Animate start button
2 parents b988ce2 + 3ee6ff2 commit 5f8f1b3

1 file changed

Lines changed: 10 additions & 13 deletions

File tree

index2.html

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@
139139
}
140140

141141
header.top nav a {
142-
font-size: 0.85rem;
142+
font-size: 1.00rem;
143143
font-weight: bold;
144144
letter-spacing: 0.04em;
145145
}
@@ -741,8 +741,8 @@ <h1 data-hero>Backups with <em>deduplication</em>, <em>compression</em> and <em>
741741
<div class="cta-row" data-hero>
742742
<a class="btn solid" href="#install">Install Borg</a>
743743
<a class="btn" href="#demo">Watch the demo</a>
744-
<button class="btn" id="stopBtn" type="button" aria-pressed="false"
745-
title="Calm the background animation">Stop</button>
744+
<button class="btn" id="stopBtn" type="button" aria-pressed="true"
745+
title="Start the background animation">Animate</button>
746746
</div>
747747
<noscript>
748748
<div class="hero-fallback">
@@ -1126,7 +1126,6 @@ <h2>Trusted by sysadmins, hoarders and the merely paranoid.</h2>
11261126
archives for a decade. It is boring, in the best possible way.</p>
11271127
<div class="counters">
11281128
<div class="counter"><div class="num"><span aria-hidden="true"><span data-count="10">0</span>+</span><span class="sr-only">10+</span></div><div class="what">years of development</div></div>
1129-
<div class="counter"><div class="num"><span aria-hidden="true"><span data-count="4">0</span></span><span class="sr-only">4</span></div><div class="what">compression algorithms</div></div>
11301129
<div class="counter"><div class="num"><span aria-hidden="true"><span data-count="100">0</span>%</span><span class="sr-only">100%</span></div><div class="what">free software, BSD licensed</div></div>
11311130
<div class="counter"><div class="num"><span aria-hidden="true"><span data-count="0">7</span></span><span class="sr-only">0</span></div><div class="what">trust required in your server</div></div>
11321131
</div>
@@ -1275,7 +1274,7 @@ <h2>Trusted by sysadmins, hoarders and the merely paranoid.</h2>
12751274
const CHUNKS = 48;
12761275
const chunkMesh = new THREE.InstancedMesh(
12771276
new THREE.BoxGeometry(0.22, 0.22, 0.22),
1278-
new THREE.MeshBasicMaterial({ color: 0x22d045 }),
1277+
new THREE.MeshBasicMaterial({ color: 0x189230 }), // 30% dimmer than the cube green
12791278
CHUNKS
12801279
);
12811280
chunkMesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
@@ -1300,7 +1299,7 @@ <h2>Trusted by sysadmins, hoarders and the merely paranoid.</h2>
13001299
/* --- scroll-driven state --- */
13011300
/* calm: 0 = full animation, 1 = cube gone, chunks stopped, stars only
13021301
starFade: 0 = stars at full brightness, 1 = stars gone (no animation left) */
1303-
const state = { progress: 0, mouseX: 0, mouseY: 0, calm: 0, starFade: 0 };
1302+
const state = { progress: 0, mouseX: 0, mouseY: 0, calm: 1, starFade: 1 };
13041303

13051304
window.addEventListener('pointermove', (e) => {
13061305
state.mouseX = (e.clientX / window.innerWidth - 0.5) * 2;
@@ -1433,22 +1432,20 @@ <h2>Trusted by sysadmins, hoarders and the merely paranoid.</h2>
14331432
renderer.render(scene, camera);
14341433
}
14351434

1436-
if (reduced) {
1437-
render(); // single static frame
1438-
} else {
1439-
renderer.setAnimationLoop(render);
1440-
}
1435+
// boot in the stopped/dark state: draw one empty frame, then leave the loop
1436+
// parked until the visitor clicks Animate (the button wakes it)
1437+
render();
14411438

14421439
/* --- stop button: wind the scene down in two stages, then to nothing ---
14431440
stop: cube + chunks recede (as before), then the starfield fades out and
14441441
the render loop is parked, leaving no animated background at all.
14451442
resume: restart the loop, fade the stars back, then bring the cube back. */
14461443
const stopBtn = document.getElementById('stopBtn');
1447-
let stopped = false;
1444+
let stopped = true; // boot in the stopped/dark state; Animate spins it up
14481445
let windTween = null;
14491446
stopBtn.addEventListener('click', () => {
14501447
stopped = !stopped;
1451-
stopBtn.textContent = stopped ? 'Resume' : 'Stop';
1448+
stopBtn.textContent = stopped ? 'Animate' : 'Stop';
14521449
stopBtn.setAttribute('aria-pressed', String(stopped));
14531450
if (reduced) {
14541451
state.calm = state.starFade = stopped ? 1 : 0;

0 commit comments

Comments
 (0)