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 typeInto = async (el, text, opts = {}) => {
@ -61,13 +65,12 @@ function startHowItWorks(stepEl, detailEl) {
const run = async () => {
if (prefersReducedMotion) {
const first = steps[0];
stepEl.textContent = first.step;
detailEl.textContent = first.detail;
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
while (true) {
const current = steps[idx % steps.length];
@ -76,10 +79,6 @@ function startHowItWorks(stepEl, detailEl) {
await typeInto(detailEl, current.detail, { minDelayMs: 8, maxDelayMs: 18 });
await sleep(2200);
stepEl.textContent = "";
detailEl.textContent = "";
await sleep(240);
idx += 1;
}
};

22
ifttt/style.css
View file

@ -1113,6 +1113,19 @@ body.home--sig a:hover {
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 {
position: fixed;
left: 0;
@ -1129,6 +1142,7 @@ body.home--sig a:hover {
align-items: center;
justify-content: space-between;
gap: 14px;
max-width: 980px;
padding: 8px 12px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.14);
@ -1182,7 +1196,7 @@ body.home--sig a:hover {
}
.sigBrand {
font-weight: 760;
font-weight: 680;
letter-spacing: -0.01em;
color: rgba(255, 255, 255, 0.96);
padding: 7px 9px;
@ -1290,10 +1304,10 @@ body.home--sig a:hover {
.sigTitle {
margin: 0 0 10px;
font-size: clamp(48px, 6.6vw, 84px);
font-size: clamp(44px, 6vw, 78px);
line-height: 1.02;
letter-spacing: -0.024em;
font-weight: 820;
font-weight: 760;
color: rgba(255, 255, 255, 0.96);
}
@ -1332,7 +1346,7 @@ body.home--sig a:hover {
background: rgba(255, 255, 255, 0.06);
color: rgba(226, 232, 240, 0.92);
font-size: 12px;
font-weight: 650;
font-weight: 600;
letter-spacing: 0.01em;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.05),