danny/hosted
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

iftrace: polish CTA contrast and how-it-works

Browse source
This commit is contained in:
root 2025-12-30 08:13:26 +00:00
parent 8188d649db
commit 9aa20de0e7
2 changed files with 25 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
ifttt/app.js
View file

@ -45,6 +45,10 @@ function startHowItWorks(stepEl, detailEl) {
}, },
]; ];
// First impression: show a complete step immediately (not mid-typing).
stepEl.textContent = steps[0].step;
detailEl.textContent = steps[0].detail;
const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
const typeInto = async (el, text, opts = {}) => { const typeInto = async (el, text, opts = {}) => {
@ -61,13 +65,12 @@ function startHowItWorks(stepEl, detailEl) {
const run = async () => { const run = async () => {
if (prefersReducedMotion) { if (prefersReducedMotion) {
const first = steps[0];
stepEl.textContent = first.step;
detailEl.textContent = first.detail;
return; return;
} }
let idx = 0; // Keep the first step visible briefly so the panel never looks “broken”.
let idx = 1;
await sleep(1400);
// eslint-disable-next-line no-constant-condition // eslint-disable-next-line no-constant-condition
while (true) { while (true) {
const current = steps[idx % steps.length]; const current = steps[idx % steps.length];
@ -76,10 +79,6 @@ function startHowItWorks(stepEl, detailEl) {
await typeInto(detailEl, current.detail, { minDelayMs: 8, maxDelayMs: 18 }); await typeInto(detailEl, current.detail, { minDelayMs: 8, maxDelayMs: 18 });
await sleep(2200); await sleep(2200);
stepEl.textContent = "";
detailEl.textContent = "";
await sleep(240);
idx += 1; idx += 1;
} }
}; };

22
ifttt/style.css
View file

@ -1113,6 +1113,19 @@ body.home--sig a:hover {
text-decoration: none; text-decoration: none;
} }
/* Ensure component-level link colors win over the generic dark-mode anchor rule. */
body.home--sig a.sigBrand {
color: rgba(255, 255, 255, 0.96);
}
body.home--sig a.sigAction {
color: rgba(226, 232, 240, 0.92);
}
body.home--sig a.sigAction--primary {
color: rgba(11, 18, 32, 0.92);
}
.sigNav { .sigNav {
position: fixed; position: fixed;
left: 0; left: 0;
@ -1129,6 +1142,7 @@ body.home--sig a:hover {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 14px; gap: 14px;
max-width: 980px;
padding: 8px 12px; padding: 8px 12px;
border-radius: 16px; border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.14);
@ -1182,7 +1196,7 @@ body.home--sig a:hover {
} }
.sigBrand { .sigBrand {
font-weight: 760; font-weight: 680;
letter-spacing: -0.01em; letter-spacing: -0.01em;
color: rgba(255, 255, 255, 0.96); color: rgba(255, 255, 255, 0.96);
padding: 7px 9px; padding: 7px 9px;
@ -1290,10 +1304,10 @@ body.home--sig a:hover {
.sigTitle { .sigTitle {
margin: 0 0 10px; margin: 0 0 10px;
font-size: clamp(48px, 6.6vw, 84px); font-size: clamp(44px, 6vw, 78px);
line-height: 1.02; line-height: 1.02;
letter-spacing: -0.024em; letter-spacing: -0.024em;
font-weight: 820; font-weight: 760;
color: rgba(255, 255, 255, 0.96); color: rgba(255, 255, 255, 0.96);
} }
@ -1332,7 +1346,7 @@ body.home--sig a:hover {
background: rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.06);
color: rgba(226, 232, 240, 0.92); color: rgba(226, 232, 240, 0.92);
font-size: 12px; font-size: 12px;
font-weight: 650; font-weight: 600;
letter-spacing: 0.01em; letter-spacing: 0.01em;
box-shadow: box-shadow:
0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 0 rgba(255, 255, 255, 0.05),