From 9ca3f48def28ca869e4385450d71166fcbe8d5ff Mon Sep 17 00:00:00 2001 From: Marcos Paulo Date: Sat, 5 Sep 2026 23:13:59 +0000 Subject: [PATCH 1/4] style(motion): add strict animations and fix layout properties - Change ReadingProgress and RouteTable to use transform (scaleX/scaleY) instead of width/height - Convert existing easing functions to 200ms cubic-bezier(.2,0,0,1) - Document animation purpose with CSS comments - Add guide panel swap, review desk detail swap, and tally pop animations - Implement prefers-reduced-motion for all new states --- responsive.css | 2 +- skills-review/app.js | 8 ++++-- skills-review/styles.css | 1 + skills-review/vote.js | 8 +++--- src/components/blocks/ChangeLens.astro | 3 ++- src/components/blocks/VoteWidget.astro | 23 ++++++++++++++++ src/components/islands/GuideSelector.astro | 26 ++++++++++++++++++- src/components/islands/ReadingProgress.astro | 2 +- .../islands/SkillPackageExplorer.astro | 3 ++- styles.css | 2 +- 10 files changed, 66 insertions(+), 12 deletions(-) diff --git a/responsive.css b/responsive.css index b8561e8..c1220f1 100644 --- a/responsive.css +++ b/responsive.css @@ -29,7 +29,7 @@ button{font-family:inherit} .tree-detail{display:grid;grid-template-columns:.7fr 1fr 1.6fr;gap:1px;border-top:1px solid #41596b;background:#41596b}.tree-detail>div,.tree-detail>p,.tree-detail>code{margin:0;padding:18px;background:#102536}.tree-detail div{display:grid;gap:8px}.tree-detail span{color:var(--accent);font:500 8px var(--font-mono);letter-spacing:.1em}.tree-detail strong{color:var(--paper);font:500 11px var(--font-mono)}.tree-detail p{color:#aebbc3;font-size:11px;line-height:1.55}.tree-detail code{grid-column:1/-1;color:var(--gold);font:11px var(--font-mono)} .route-console{display:grid;gap:14px}.route-table button{display:grid;grid-template-columns:.8fr .9fr 1.4fr;width:100%;padding:0;border:0;color:inherit;background:transparent;text-align:left;cursor:pointer}.route-table button>*{padding:15px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.route-table button:hover,.route-table button.active{background:#e8ecee}.route-table button.active strong{box-shadow:inset 4px 0 0 var(--gold)} -.route-detail{display:grid;grid-template-columns:100px 1fr;gap:22px;align-items:center;padding:22px;color:var(--paper);background:var(--deep)}.route-meter{display:grid;align-items:end;width:76px;height:76px;padding:7px;border:1px solid #496274}.route-meter span{display:block;width:100%;height:var(--score);background:var(--gold);transition:height .35s ease}.route-detail>div:last-child{display:grid;gap:7px}.route-detail small{color:var(--gold);font:500 8px var(--font-mono);letter-spacing:.08em}.route-detail strong{font-size:17px}.route-detail p{margin:0;color:#b5c0c7;font-size:12px;line-height:1.5} +.route-detail{display:grid;grid-template-columns:100px 1fr;gap:22px;align-items:center;padding:22px;color:var(--paper);background:var(--deep)}.route-meter{display:grid;align-items:end;width:76px;height:76px;padding:7px;border:1px solid #496274}.route-meter span{display:block;width:100%;height:100%;background:var(--gold);transform:scaleY(var(--score));transform-origin:bottom;transition:transform .35s ease-out}.route-detail>div:last-child{display:grid;gap:7px}.route-detail small{color:var(--gold);font:500 8px var(--font-mono);letter-spacing:.08em}.route-detail strong{font-size:17px}.route-detail p{margin:0;color:#b5c0c7;font-size:12px;line-height:1.5} .skill-explorer{display:grid;grid-template-columns:.9fr 1.1fr;min-height:290px;background:var(--blue)}.skill-package button{display:grid;grid-template-columns:1fr 1fr;gap:15px;padding:17px 20px;border:0;border-bottom:1px solid #ffffff40;color:var(--paper);background:transparent;text-align:left;cursor:pointer}.skill-package button:hover,.skill-package button.active{background:#315f80}.skill-package button.active{box-shadow:inset 4px 0 0 var(--gold)}.skill-package button code{font:12px var(--font-mono)}.skill-package button small{opacity:.7} .skill-detail{display:grid;grid-template-columns:auto 1fr;gap:18px;align-content:center;padding:28px;color:var(--paper);background:#244760}.skill-detail>span{color:var(--gold);font:42px Georgia,serif}.skill-detail>div{display:grid;gap:13px}.skill-detail strong{font:600 15px var(--font-mono)}.skill-detail p{margin:0;color:#c4cdd3;font-size:12px;line-height:1.65}.skill-detail small{color:var(--gold);font:500 8px var(--font-mono);letter-spacing:.06em;text-transform:uppercase} diff --git a/skills-review/app.js b/skills-review/app.js index 125bd98..40f3361 100644 --- a/skills-review/app.js +++ b/skills-review/app.js @@ -437,10 +437,14 @@ function previewMarkup(entry, available) { function renderDetail() { const entry = state.selected; const available = packageFiles(entry); - $('#detail').innerHTML = + const detailPanel = $('#detail'); + detailPanel.innerHTML = `
${escape(entry.status)}

${escape(entry.title)}

Submitted by ${escape(entry.author)} ·

THE JOB

${escape(entry.focus)}

WHAT'S ALREADY WORKING
    ${entry.wins.map((item) => `
  • ${escape(item)}
    • `).join('')}
HIGHEST-VALUE IMPROVEMENTS
    ${entry.improve.map((item) => `
  • ${escape(item)}
    • `).join('')}
${previewMarkup(entry, available)}`; + detailPanel.classList.remove('is-swapping'); + void detailPanel.offsetWidth; + detailPanel.classList.add('is-swapping'); renderVoteWidget($('#vote-widget'), entry.id); - $('#detail') + detailPanel .querySelectorAll('[data-file]') .forEach((button) => button.addEventListener('click', () => { diff --git a/skills-review/styles.css b/skills-review/styles.css index b71006b..7bea10a 100644 --- a/skills-review/styles.css +++ b/skills-review/styles.css @@ -15,3 +15,4 @@ .markdown-preview{max-height:540px;overflow:auto;padding:24px;color:#d6e1e4;background:#0c1a25}.markdown-preview>:first-child{margin-top:0}.markdown-preview h1,.markdown-preview h2,.markdown-preview h3,.markdown-preview h4,.markdown-preview h5,.markdown-preview h6{margin:1.5em 0 .5em;color:#fff;line-height:1.15}.markdown-preview h1{font-size:1.8em}.markdown-preview h2{font-size:1.45em}.markdown-preview h3{font-size:1.2em}.markdown-preview p,.markdown-preview li{max-width:78ch}.markdown-preview li+li{margin-top:.35em}.markdown-preview a{color:var(--gold)}.markdown-preview code{padding:.12em .3em;color:#fff;background:#29455a;white-space:break-spaces}.markdown-preview pre{max-height:none;margin:1em 0;padding:14px;border:1px solid #486175}.markdown-preview pre code{padding:0;background:transparent}.markdown-preview blockquote{margin:1em 0;padding:.3em 1em;border-left:3px solid var(--gold);color:#b9c8d0}.markdown-preview hr{border:0;border-top:1px solid #486175}.markdown-frontmatter{display:grid;grid-template-columns:max-content 1fr;gap:3px 14px;margin:0 0 24px;padding:12px;border:1px solid #486175;font:11px/1.5 var(--font-mono)}.markdown-frontmatter dt{color:var(--gold)}.markdown-frontmatter dd{margin:0}.markdown-table-wrap{max-width:100%;overflow:auto;margin:1em 0;border:1px solid #486175}.markdown-preview table{width:100%;min-width:460px;border-collapse:collapse;font-size:13px}.markdown-preview th,.markdown-preview td{padding:9px 11px;border:1px solid #486175;text-align:left;vertical-align:top}.markdown-preview th{color:var(--gold);background:#173046} .markdown-toc{margin:0 0 24px;padding:12px 14px;border:1px solid #486175;background:#102b3a}.markdown-toc>span{color:var(--gold);font:700 10px var(--font-mono);letter-spacing:.1em}.markdown-toc ol{display:flex;flex-wrap:wrap;gap:7px 13px;margin:9px 0 0;padding:0;list-style:none}.markdown-toc li.level-2{margin-left:10px}.markdown-toc li.level-3{margin-left:20px}.markdown-toc a{font:12px/1.3 var(--font-sans);text-decoration:none}.markdown-toc a:hover{text-decoration:underline} +.detail.is-swapping > * { /* purpose: review-desk detail swap on selection (state change) */ animation: detail-swap 200ms cubic-bezier(.2,0,0,1) both; } @keyframes detail-swap { from { opacity: 0.15; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } .vote-buttons button b { display: inline-block; } .vote-buttons button b.is-updating { /* purpose: vote widget tally update (feedback) */ animation: tally-pop 200ms cubic-bezier(.2,0,0,1) both; } @keyframes tally-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .detail.is-swapping > *, .vote-buttons button b.is-updating { animation: none; } } diff --git a/skills-review/vote.js b/skills-review/vote.js index fc6bb1a..4e664fa 100644 --- a/skills-review/vote.js +++ b/skills-review/vote.js @@ -19,15 +19,15 @@ async function api(path, options = {}) { return response.json(); } -function widgetMarkup(skillId, tally, you, unavailable) { +function widgetMarkup(skillId, tally, you, unavailable, isUpdate = false) { const total = (tally.original || 0) + (tally.improved || 0); const share = (count) => total ? Math.round((count / total) * 100) : 0; if (unavailable) return `
READER VOTE

Voting is offline right now — the vote service is not configured or unreachable.

`; return `
WHICH DRAFT WOULD YOU SHIP?
- - + +

${you ? `You voted ${you === 'original' ? 'original' : 'improved draft'}. Pick the other option to change it.` : 'One vote per visitor, tracked by network source.'}

`; @@ -40,7 +40,7 @@ export async function renderVoteWidget(container, skillId) { container.innerHTML = widgetMarkup(skillId, {}, null, false); try { const result = await api('/api/votes', { method: 'POST', body: JSON.stringify({ skillId, choice }) }); - container.innerHTML = widgetMarkup(skillId, { original: result.original, improved: result.improved }, result.you, false); + container.innerHTML = widgetMarkup(skillId, { original: result.original, improved: result.improved }, result.you, false, true); bind(); } catch { container.innerHTML = widgetMarkup(skillId, {}, null, true); } }; diff --git a/src/components/blocks/ChangeLens.astro b/src/components/blocks/ChangeLens.astro index aeea152..b0d6845 100644 --- a/src/components/blocks/ChangeLens.astro +++ b/src/components/blocks/ChangeLens.astro @@ -137,7 +137,8 @@ const isDiff = mode === 'diff'; .skill-diff { border: 1px solid var(--ink); color: var(--paper); - animation: lens-enter 0.28s ease both; + /* purpose: change lens reveal (state change) */ + animation: lens-enter 200ms cubic-bezier(0.2, 0, 0, 1) both; } .change-lens { diff --git a/src/components/blocks/VoteWidget.astro b/src/components/blocks/VoteWidget.astro index 21b7a19..60b6e11 100644 --- a/src/components/blocks/VoteWidget.astro +++ b/src/components/blocks/VoteWidget.astro @@ -139,4 +139,27 @@ const share = (count: number) => (total ? Math.round((count / total) * 100) : 0) flex-direction: column; } } + + .vote-buttons button b { + display: inline-block; + } + :global(.is-updating) { + /* purpose: vote widget tally update (feedback) */ + animation: tally-pop 200ms cubic-bezier(0.2, 0, 0, 1) both; + } + @keyframes tally-pop { + from { + opacity: 0; + transform: translateY(-4px); + } + to { + opacity: 1; + transform: translateY(0); + } + } + @media (prefers-reduced-motion: reduce) { + :global(.is-updating) { + animation: none; + } + } diff --git a/src/components/islands/GuideSelector.astro b/src/components/islands/GuideSelector.astro index 1c2dc67..bdb2666 100644 --- a/src/components/islands/GuideSelector.astro +++ b/src/components/islands/GuideSelector.astro @@ -99,7 +99,11 @@ const { rootSelector, data } = Astro.props; function replace(target, markup) { const panel = root.querySelector(target); - if (panel) panel.innerHTML = markup; + if (!panel) return; + panel.innerHTML = markup; + panel.classList.remove('is-swapping'); + void panel.offsetWidth; + panel.classList.add('is-swapping'); } // Names deliberately match legacy functions until task 19 updates its checks. @@ -291,4 +295,24 @@ const { rootSelector, data } = Astro.props; outline: 3px solid var(--gold); outline-offset: -3px; } + + :global(.is-swapping > *) { + /* purpose: tab panel change in the guide (state change) */ + animation: guide-swap 200ms cubic-bezier(0.2, 0, 0, 1) both; + } + @keyframes guide-swap { + from { + opacity: 0.15; + transform: translateY(5px); + } + to { + opacity: 1; + transform: translateY(0); + } + } + @media (prefers-reduced-motion: reduce) { + :global(.is-swapping > *) { + animation: none; + } + } diff --git a/src/components/islands/ReadingProgress.astro b/src/components/islands/ReadingProgress.astro index ad6d2f1..9956223 100644 --- a/src/components/islands/ReadingProgress.astro +++ b/src/components/islands/ReadingProgress.astro @@ -42,7 +42,7 @@ const { target = '.reading-progress span' } = Astro.props; function update() { const height = document.documentElement.scrollHeight - window.innerHeight; - span.style.width = (height > 0 ? (window.scrollY / height) * 100 : 0) + '%'; + span.style.transform = `scaleX(${height > 0 ? window.scrollY / height : 0})`; } // `{ passive: true }` is non-negotiable. The legacy app.js binds diff --git a/src/components/islands/SkillPackageExplorer.astro b/src/components/islands/SkillPackageExplorer.astro index dbb29a2..4132bfb 100644 --- a/src/components/islands/SkillPackageExplorer.astro +++ b/src/components/islands/SkillPackageExplorer.astro @@ -235,7 +235,8 @@ const packageFiles: PackageFile[] = [ } .package-preview.is-swapping { - animation: package-preview-in 0.34s ease both; + /* purpose: review-desk detail swap on selection (state change) */ + animation: package-preview-in 200ms cubic-bezier(0.2, 0, 0, 1) both; } @keyframes package-preview-in { diff --git a/styles.css b/styles.css index 33bf1e3..7597b6a 100644 --- a/styles.css +++ b/styles.css @@ -1,2 +1,2 @@ @import url('public/fonts/fonts.css'); :root{--paper:#f5f4f1;--ink:#172f42;--muted:#697b89;--accent:#7c78a8;--blue:#527f9f;--gold:#efc76b;--line:#d8dee2;--deep:#102536;--font-sans:manrope,arial,sans-serif;--font-mono:'DM Mono',monospace;}*{box-sizing:border-box}body{margin:0;min-width:320px;background:var(--paper);color:var(--ink);font-family:var(--font-sans)}main{padding:28px clamp(24px,6vw,96px) 80px}.topbar,.section-label{display:flex;justify-content:space-between;align-items:center}.brand{color:var(--ink);font-size:12px;font-weight:800;text-decoration:none;text-transform:uppercase}.mark{display:inline-grid;place-items:center;width:28px;height:28px;margin-right:9px;border-radius:50%;color:var(--paper);background:var(--accent)}.edition,.eyebrow,.section-label,.thesis span,.captain span,.workers span,.route-table b,.skill-package>span,.rule span,.callout span,.sources{font:500 10px var(--font-mono);letter-spacing:.1em;text-transform:uppercase}.edition i{display:inline-block;width:6px;height:6px;margin:0 8px;border-radius:50%;background:var(--accent)}.hero{max-width:780px;padding:clamp(75px,12vh,145px) 0 85px}.eyebrow,.section-label,.thesis span{color:var(--accent)}h1{margin:16px 0 24px;font-size:clamp(56px,9vw,126px);line-height:.86;letter-spacing:-.08em}h1 em,h2 em{color:var(--blue);font-family:Georgia,serif;font-weight:400}.lede,.copy>p:last-child,.skills>div:first-child>p:last-child,.worktrees>div:first-child>p,.caption{max-width:570px;color:var(--muted);line-height:1.65}.thesis{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;margin-bottom:110px;padding:28px;background:var(--gold)}.thesis div:first-child{display:grid;gap:16px}.thesis strong{font-size:clamp(24px,4vw,46px);line-height:1.05;letter-spacing:-.04em}.signal{display:flex;align-items:center;gap:10px}.signal i{width:28px;height:28px;border:1px solid var(--ink);background:var(--paper)}.signal i:nth-of-type(3){background:var(--blue)}.signal b{font:500 10px var(--font-mono)}.fleet{margin-bottom:120px}.section-label{padding-bottom:14px;border-bottom:1px solid var(--line)}.section-label span:last-child{color:var(--muted)}.fleet-grid{display:grid;grid-template-columns:.8fr 50px 1.5fr;gap:24px;margin-top:30px;color:var(--paper);background:var(--deep)}.captain{display:grid;align-content:center;gap:16px;padding:32px}.captain span{color:var(--gold)}h2{margin:14px 0 20px;font-size:clamp(36px,5vw,65px);line-height:.98;letter-spacing:-.06em}.captain h2{font-size:clamp(24px,3vw,38px)}.captain code,.workers code{color:var(--gold);font:11px var(--font-mono)}.arrow{display:grid;place-items:center;color:var(--gold);font-size:30px}.workers{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#41596b}.workers article{display:grid;align-content:space-between;gap:20px;min-height:180px;padding:22px;background:var(--ink)}.workers span{color:#9eabb4}.workers strong{font-size:16px;line-height:1.2}.caption{margin:22px 0 0 auto}.workflow,.routing,.skills{display:grid;grid-template-columns:.7fr 1fr 1.3fr;gap:40px;align-items:start;margin-bottom:130px;padding-top:80px;border-top:1px solid var(--line)}.phase-tabs{display:grid;gap:8px}.phase-tabs button{display:grid;grid-template-columns:42px 1fr;gap:10px;padding:15px;border:1px solid var(--line);color:var(--ink);background:transparent;font:500 10px var(--font-mono);letter-spacing:.07em;text-align:left;cursor:pointer}.phase-tabs button b{color:var(--accent)}.phase-tabs button.active{color:var(--paper);border-color:var(--ink);background:var(--ink)}.phase-panel{min-height:260px;padding:30px;color:var(--paper);background:var(--accent)}.phase-meta{display:flex;justify-content:space-between;gap:15px;color:var(--gold);font:500 10px var(--font-mono)}.phase-meta small{color:var(--paper);opacity:.7}.phase-panel h3{margin:44px 0 12px;font-size:clamp(24px,3vw,38px);line-height:1.05}.phase-panel p{line-height:1.6;opacity:.82}.phase-panel code{display:block;margin-top:26px;color:var(--gold);font:11px var(--font-mono)}.handoff{margin-bottom:130px}.handoff table{width:100%;margin-top:30px;border-collapse:collapse;text-align:left}.handoff th,.handoff td{padding:17px 14px;border-bottom:1px solid var(--line)}.handoff thead{color:var(--paper);background:var(--ink);font:500 10px var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.handoff tbody th{color:var(--blue);font:600 14px var(--font-mono)}.handoff td{color:var(--muted);font-size:13px}.worktrees{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:center;margin-bottom:130px;padding:45px;color:var(--paper);background:var(--deep)}.worktrees .eyebrow{color:var(--gold)}.worktrees h2{color:var(--paper)}.worktrees h2 em{color:var(--gold)}.worktrees>div:first-child>p{color:#b0bac1}.worktrees pre{margin:32px 0 0;padding:20px;overflow:auto;color:var(--gold);background:var(--ink)}pre code{font:12px/1.75 var(--font-mono)}.map{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-top:90px}.repo{position:absolute;top:0;left:50%;width:180px;padding:17px;transform:translateX(-50%);color:var(--ink);background:var(--gold)}.map>div:not(.repo){min-height:135px;padding:20px;border:1px solid #41596b;background:var(--ink)}.repo span,.map>div:not(.repo) span{display:block;margin-bottom:12px;color:var(--accent);font:500 9px var(--font-mono)}.repo strong,.map>div:not(.repo) strong{display:block;font:14px var(--font-mono)}.repo small,.map>div:not(.repo) small{display:block;margin-top:12px;color:#9eabb4;font-size:11px}.routing{grid-template-columns:.8fr 1.2fr}.route-table{border-top:1px solid var(--line);border-left:1px solid var(--line)}.route-table>div{display:grid;grid-template-columns:.8fr .9fr 1.4fr}.route-table .head{color:var(--paper);background:var(--ink);font:500 10px var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.route-table>div>*{padding:15px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.route-table strong{font-size:14px}.route-table b{color:var(--blue);letter-spacing:0;text-transform:none}.route-table small{color:var(--muted);font-size:12px}.skills{grid-template-columns:.8fr 1fr;margin-bottom:90px}.skill-package{display:grid;align-content:start;color:var(--paper);background:var(--blue)}.skill-package>span{padding:20px;color:var(--gold);border-bottom:1px solid #ffffff40}.skill-package>div{display:grid;grid-template-columns:1fr 1fr;gap:15px;padding:17px 20px;border-bottom:1px solid #ffffff40}.skill-package code{font:12px var(--font-mono)}.skill-package small{opacity:.7}.skills>pre{grid-column:2;margin:0;padding:28px;overflow:auto;color:#d8dee2;background:var(--ink)}.rule{display:grid;grid-template-columns:150px 1fr;gap:30px;margin-top:55px;padding-top:22px;border-top:4px solid var(--gold)}.rule strong{max-width:850px;font-size:clamp(24px,3.3vw,42px);line-height:1.12}.callout{display:grid;grid-template-columns:150px 1fr;gap:30px;margin-top:70px;padding:27px;background:var(--gold)}.callout strong{max-width:850px;font-size:clamp(22px,3vw,36px);line-height:1.1}.sources{margin-top:90px;color:var(--muted)}.sources p{color:var(--muted);font:13px/1.6 var(--font-sans);letter-spacing:0;text-transform:none}.sources a{color:var(--blue);font-weight:700}@media(max-width:800px){.thesis,.fleet-grid,.workflow,.worktrees,.routing,.skills{grid-template-columns:1fr}.arrow{transform:rotate(90deg);min-height:35px}.workers{grid-template-columns:1fr}.skills>pre{grid-column:auto}.route-table,.handoff{overflow-x:auto}.route-table>div{min-width:620px}.handoff table{min-width:650px}.rule,.callout{grid-template-columns:1fr}}@media(max-width:600px){.edition{display:none}.worktrees{padding:24px}.map{grid-template-columns:1fr;padding-top:90px}} -main{max-width:1840px;margin-inline:auto}.reading-progress{position:fixed;inset:0 0 auto;z-index:20;height:3px;background:transparent}.reading-progress span{display:block;width:0;height:100%;background:var(--gold);transition:width .15s ease}.chapter-links{display:flex;gap:22px;margin-left:auto;margin-right:32px}.chapter-links a{color:var(--muted);font:500 10px var(--font-mono);letter-spacing:.08em;text-decoration:none;text-transform:uppercase}.chapter-links a:hover{color:var(--ink)}.hero{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:80px;align-items:end}.hero-index{display:grid;gap:14px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.hero-index span,.hero-index small{color:var(--muted);font:500 10px var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.hero-index strong{font-size:clamp(27px,3vw,48px);line-height:.95;letter-spacing:-.06em}.hero-index em{color:var(--accent);font-family:Georgia,serif;font-weight:400}.hero-stats{display:grid;grid-template-columns:repeat(3,1fr) 1.6fr;gap:1px;margin:0 0 110px;background:var(--line);border-top:1px solid var(--line);border-left:1px solid var(--line)}.hero-stats div,.hero-stats p{min-height:110px;margin:0;padding:20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}.hero-stats div{display:flex;align-items:center;gap:16px}.hero-stats strong{font:500 34px var(--font-mono);color:var(--blue)}.hero-stats span{color:var(--muted);font:500 10px/1.4 var(--font-mono);letter-spacing:.06em;text-transform:uppercase}.hero-stats p{display:grid;place-items:center;color:var(--muted);font-size:13px;line-height:1.5;text-align:center}.failure-map{margin-bottom:130px;padding-top:80px;border-top:1px solid var(--line)}.failure-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:30px;background:var(--line);border-left:1px solid var(--line)}.failure-grid article{min-height:220px;padding:24px;background:var(--paper);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.failure-grid span{color:var(--accent);font:500 11px var(--font-mono)}.failure-grid strong{display:block;margin:52px 0 12px;font-size:22px}.failure-grid p{max-width:300px;margin:0;color:var(--muted);font-size:13px;line-height:1.6}.skill-principles{display:grid;gap:10px;margin-top:30px;color:var(--blue);font:500 10px var(--font-mono);letter-spacing:.06em;text-transform:uppercase}.skill-principles span{color:var(--blue)}@media(min-width:2200px){main{max-width:1960px}.hero{grid-template-columns:minmax(0,1fr) 380px}.hero h1{font-size:clamp(100px,7vw,160px)}body{font-size:18px}}@media(max-width:800px){.chapter-links{display:none}.hero{display:block}.hero-index{max-width:300px;margin-top:50px}.hero-stats{grid-template-columns:1fr 1fr;margin-bottom:80px}.hero-stats p{grid-column:1/-1}.failure-grid{grid-template-columns:1fr}.failure-grid article{min-height:0}.failure-grid strong{margin-top:30px}} +main{max-width:1840px;margin-inline:auto}.reading-progress{position:fixed;inset:0 0 auto;z-index:20;height:3px;background:transparent}.reading-progress span{display:block;width:100%;height:100%;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .15s ease}.chapter-links{display:flex;gap:22px;margin-left:auto;margin-right:32px}.chapter-links a{color:var(--muted);font:500 10px var(--font-mono);letter-spacing:.08em;text-decoration:none;text-transform:uppercase}.chapter-links a:hover{color:var(--ink)}.hero{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:80px;align-items:end}.hero-index{display:grid;gap:14px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.hero-index span,.hero-index small{color:var(--muted);font:500 10px var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.hero-index strong{font-size:clamp(27px,3vw,48px);line-height:.95;letter-spacing:-.06em}.hero-index em{color:var(--accent);font-family:Georgia,serif;font-weight:400}.hero-stats{display:grid;grid-template-columns:repeat(3,1fr) 1.6fr;gap:1px;margin:0 0 110px;background:var(--line);border-top:1px solid var(--line);border-left:1px solid var(--line)}.hero-stats div,.hero-stats p{min-height:110px;margin:0;padding:20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}.hero-stats div{display:flex;align-items:center;gap:16px}.hero-stats strong{font:500 34px var(--font-mono);color:var(--blue)}.hero-stats span{color:var(--muted);font:500 10px/1.4 var(--font-mono);letter-spacing:.06em;text-transform:uppercase}.hero-stats p{display:grid;place-items:center;color:var(--muted);font-size:13px;line-height:1.5;text-align:center}.failure-map{margin-bottom:130px;padding-top:80px;border-top:1px solid var(--line)}.failure-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:30px;background:var(--line);border-left:1px solid var(--line)}.failure-grid article{min-height:220px;padding:24px;background:var(--paper);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.failure-grid span{color:var(--accent);font:500 11px var(--font-mono)}.failure-grid strong{display:block;margin:52px 0 12px;font-size:22px}.failure-grid p{max-width:300px;margin:0;color:var(--muted);font-size:13px;line-height:1.6}.skill-principles{display:grid;gap:10px;margin-top:30px;color:var(--blue);font:500 10px var(--font-mono);letter-spacing:.06em;text-transform:uppercase}.skill-principles span{color:var(--blue)}@media(min-width:2200px){main{max-width:1960px}.hero{grid-template-columns:minmax(0,1fr) 380px}.hero h1{font-size:clamp(100px,7vw,160px)}body{font-size:18px}}@media(max-width:800px){.chapter-links{display:none}.hero{display:block}.hero-index{max-width:300px;margin-top:50px}.hero-stats{grid-template-columns:1fr 1fr;margin-bottom:80px}.hero-stats p{grid-column:1/-1}.failure-grid{grid-template-columns:1fr}.failure-grid article{min-height:0}.failure-grid strong{margin-top:30px}} From 2b621843a28a75e8cdcbb3a7d35acf75175bbeaf Mon Sep 17 00:00:00 2001 From: Marcos Paulo Date: Sat, 5 Sep 2026 23:29:03 +0000 Subject: [PATCH 2/4] docs: reject 19 attempt 1, count parity hid a coverage drop --- .../astro-refactor/task-19-verify-repoint.md | 56 +++++++++++++++++++ 1 file changed, 56 insertions(+) diff --git a/plans/astro-refactor/task-19-verify-repoint.md b/plans/astro-refactor/task-19-verify-repoint.md index b8d36b3..79576b0 100644 --- a/plans/astro-refactor/task-19-verify-repoint.md +++ b/plans/astro-refactor/task-19-verify-repoint.md @@ -108,3 +108,59 @@ to remove one, that is the escalation path, not the workaround. `.agents/scripts/visual-regression.mjs` runs. It used to throw for everyone, which is why no task in this plan ever produced the captures its brief asked for. + +## Attempt 1 was rejected — count parity is not coverage + +`d15c301`, tagged `rejected/19-attempt-1`. It did good work: `verify.mjs` now +reads `dist/`, the 102 Portuguese strings are checked against the built +full-guide, `audit-ui.mjs` gained per-page CSS-variable resolution and a +built-CSS baseline (`.agents/snapshots/built-css-values.json`). Keep all of +that. + +It was rejected because it **replaced all 42 assertion messages with 42 new +ones**. Not one of the originals survives. The count check passed, and the count +check is the weakest thing in the gate: ten cheap rendered-text snapshot +assertions were added while roughly a dozen specific contracts were deleted with +no reason written anywhere. + +Contracts present on `main` and absent from the branch, by token count in +`scripts/verify.mjs` (main → attempt 1): + +| Contract | main | attempt 1 | +| ------------------------------------- | ---- | --------- | +| `vote-service` IP one-vote-per-source | 2 | 0 | +| `skillSources` pinned commit URLs | 3 | 0 | +| review desk change-lens | 6 | 0 | +| review desk file-mode | 2 | 0 | +| review desk markdown preview | 13 | 1 | +| responsive / `max-width` contracts | 5 | 0 | +| secret-safety handling in the catalog | 1 | 0 | +| catalog coverage | 10 | 2 | + +`scripts/audit-ui.mjs` also went from 6 assertions to 5. + +A rendered-text snapshot does not replace these. "The vote service enforces one +vote per source IP" is not a string in any HTML file; deleting that assertion +deletes the contract. Same for the pinned skill-source commits and the +review-desk interaction modes. + +### What attempt 2 must produce + +1. **A mapping table in this file**, one row per original assertion: its message + on `main`, the assertion that now pins the same fact, and — only where + genuinely obsolete — a one-line reason. Build it from + `git show rejected/19-attempt-1^:scripts/verify.mjs | grep -oP 'throw new Error\(\s*\K.*'` + so no row is missed. 42 rows, no gaps. +2. **Every fact still pinned.** Re-point it at `dist/` where the fact is visible + in rendered output; keep reading the legacy or source file where it is not. + `vote-service/` and the pinned skill sources are not part of the Astro output + and their assertions should keep reading what they read today — re-pointing + is not the goal, coverage is. +3. **Raise the baseline.** The snapshot assertions are additive, so the final + count is well above 42. Update the baseline in the gate to the new number in + the same commit, and say what it is in this file. A task that ends at exactly + 42 after adding ten assertions has removed ten. +4. Keep `audit-ui.mjs` at 6 or more. + +Start from `rejected/19-attempt-1` rather than from scratch — the `dist/` +re-point and the Portuguese coverage check are worth keeping. From 47fff7d289c9412917b05c03e0c37eb682c4bb32 Mon Sep 17 00:00:00 2001 From: Marcos Paulo Date: Sat, 5 Sep 2026 23:31:18 +0000 Subject: [PATCH 3/4] revert(motion): drop the legacy-file edits, keep the Astro ones The motion pass edited five legacy files. Two changes were behaviour regressions on the live site, and all five were out of scope: the brief asks for an inventory of `src/`, and the legacy pages are what visitors see until task 20 cuts over. The confirmed break: `styles.css` changed the reading-progress bar to `width:100%; transform:scaleX(0)`, but `app.js:406` still sets `style.width = "N%"`. The inline width applies, the scaleX(0) is never updated, and the bar renders at 0px on every legacy page. Verified in a headless browser at 1100px, scrolled halfway: computed transform `matrix(0, 0, 0, 1, 0, 0)`, bounding width `0`. The Astro island was updated to set `transform` and is correct -- its half-scrolled bar measures 595px -- so only the legacy half was broken. The route-meter change (`height:var(--score)` to `transform:scaleY(var(--score))` in `responsive.css`) does work: `--score` is a percentage and Chromium accepts a percentage in `scaleY()`. It is reverted anyway, because it belongs in the component. `responsive.css` is being retired by task 15e, which is porting these rules into the components that need them; that is where the meter should stop animating a layout property. Noted in the 15e brief. The three review-desk animations added to `skills-review/` are not broken, but they change live-site behaviour ahead of the cutover and the same motion already exists on the Astro side. Reverted for the same reason. Kept: every `src/` change -- the ReadingProgress transform, the guide panel swap, the change-lens and package-preview easing, and the vote widget tally pop. --- responsive.css | 2 +- skills-review/app.js | 8 ++------ skills-review/styles.css | 1 - skills-review/vote.js | 8 ++++---- styles.css | 2 +- 5 files changed, 8 insertions(+), 13 deletions(-) diff --git a/responsive.css b/responsive.css index c1220f1..b8561e8 100644 --- a/responsive.css +++ b/responsive.css @@ -29,7 +29,7 @@ button{font-family:inherit} .tree-detail{display:grid;grid-template-columns:.7fr 1fr 1.6fr;gap:1px;border-top:1px solid #41596b;background:#41596b}.tree-detail>div,.tree-detail>p,.tree-detail>code{margin:0;padding:18px;background:#102536}.tree-detail div{display:grid;gap:8px}.tree-detail span{color:var(--accent);font:500 8px var(--font-mono);letter-spacing:.1em}.tree-detail strong{color:var(--paper);font:500 11px var(--font-mono)}.tree-detail p{color:#aebbc3;font-size:11px;line-height:1.55}.tree-detail code{grid-column:1/-1;color:var(--gold);font:11px var(--font-mono)} .route-console{display:grid;gap:14px}.route-table button{display:grid;grid-template-columns:.8fr .9fr 1.4fr;width:100%;padding:0;border:0;color:inherit;background:transparent;text-align:left;cursor:pointer}.route-table button>*{padding:15px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.route-table button:hover,.route-table button.active{background:#e8ecee}.route-table button.active strong{box-shadow:inset 4px 0 0 var(--gold)} -.route-detail{display:grid;grid-template-columns:100px 1fr;gap:22px;align-items:center;padding:22px;color:var(--paper);background:var(--deep)}.route-meter{display:grid;align-items:end;width:76px;height:76px;padding:7px;border:1px solid #496274}.route-meter span{display:block;width:100%;height:100%;background:var(--gold);transform:scaleY(var(--score));transform-origin:bottom;transition:transform .35s ease-out}.route-detail>div:last-child{display:grid;gap:7px}.route-detail small{color:var(--gold);font:500 8px var(--font-mono);letter-spacing:.08em}.route-detail strong{font-size:17px}.route-detail p{margin:0;color:#b5c0c7;font-size:12px;line-height:1.5} +.route-detail{display:grid;grid-template-columns:100px 1fr;gap:22px;align-items:center;padding:22px;color:var(--paper);background:var(--deep)}.route-meter{display:grid;align-items:end;width:76px;height:76px;padding:7px;border:1px solid #496274}.route-meter span{display:block;width:100%;height:var(--score);background:var(--gold);transition:height .35s ease}.route-detail>div:last-child{display:grid;gap:7px}.route-detail small{color:var(--gold);font:500 8px var(--font-mono);letter-spacing:.08em}.route-detail strong{font-size:17px}.route-detail p{margin:0;color:#b5c0c7;font-size:12px;line-height:1.5} .skill-explorer{display:grid;grid-template-columns:.9fr 1.1fr;min-height:290px;background:var(--blue)}.skill-package button{display:grid;grid-template-columns:1fr 1fr;gap:15px;padding:17px 20px;border:0;border-bottom:1px solid #ffffff40;color:var(--paper);background:transparent;text-align:left;cursor:pointer}.skill-package button:hover,.skill-package button.active{background:#315f80}.skill-package button.active{box-shadow:inset 4px 0 0 var(--gold)}.skill-package button code{font:12px var(--font-mono)}.skill-package button small{opacity:.7} .skill-detail{display:grid;grid-template-columns:auto 1fr;gap:18px;align-content:center;padding:28px;color:var(--paper);background:#244760}.skill-detail>span{color:var(--gold);font:42px Georgia,serif}.skill-detail>div{display:grid;gap:13px}.skill-detail strong{font:600 15px var(--font-mono)}.skill-detail p{margin:0;color:#c4cdd3;font-size:12px;line-height:1.65}.skill-detail small{color:var(--gold);font:500 8px var(--font-mono);letter-spacing:.06em;text-transform:uppercase} diff --git a/skills-review/app.js b/skills-review/app.js index 40f3361..125bd98 100644 --- a/skills-review/app.js +++ b/skills-review/app.js @@ -437,14 +437,10 @@ function previewMarkup(entry, available) { function renderDetail() { const entry = state.selected; const available = packageFiles(entry); - const detailPanel = $('#detail'); - detailPanel.innerHTML = + $('#detail').innerHTML = `
${escape(entry.status)}

${escape(entry.title)}

Submitted by ${escape(entry.author)} ·

THE JOB

${escape(entry.focus)}

WHAT'S ALREADY WORKING
    ${entry.wins.map((item) => `
  • ${escape(item)}
    • `).join('')}
HIGHEST-VALUE IMPROVEMENTS
    ${entry.improve.map((item) => `
  • ${escape(item)}
    • `).join('')}
${previewMarkup(entry, available)}`; - detailPanel.classList.remove('is-swapping'); - void detailPanel.offsetWidth; - detailPanel.classList.add('is-swapping'); renderVoteWidget($('#vote-widget'), entry.id); - detailPanel + $('#detail') .querySelectorAll('[data-file]') .forEach((button) => button.addEventListener('click', () => { diff --git a/skills-review/styles.css b/skills-review/styles.css index 7bea10a..b71006b 100644 --- a/skills-review/styles.css +++ b/skills-review/styles.css @@ -15,4 +15,3 @@ .markdown-preview{max-height:540px;overflow:auto;padding:24px;color:#d6e1e4;background:#0c1a25}.markdown-preview>:first-child{margin-top:0}.markdown-preview h1,.markdown-preview h2,.markdown-preview h3,.markdown-preview h4,.markdown-preview h5,.markdown-preview h6{margin:1.5em 0 .5em;color:#fff;line-height:1.15}.markdown-preview h1{font-size:1.8em}.markdown-preview h2{font-size:1.45em}.markdown-preview h3{font-size:1.2em}.markdown-preview p,.markdown-preview li{max-width:78ch}.markdown-preview li+li{margin-top:.35em}.markdown-preview a{color:var(--gold)}.markdown-preview code{padding:.12em .3em;color:#fff;background:#29455a;white-space:break-spaces}.markdown-preview pre{max-height:none;margin:1em 0;padding:14px;border:1px solid #486175}.markdown-preview pre code{padding:0;background:transparent}.markdown-preview blockquote{margin:1em 0;padding:.3em 1em;border-left:3px solid var(--gold);color:#b9c8d0}.markdown-preview hr{border:0;border-top:1px solid #486175}.markdown-frontmatter{display:grid;grid-template-columns:max-content 1fr;gap:3px 14px;margin:0 0 24px;padding:12px;border:1px solid #486175;font:11px/1.5 var(--font-mono)}.markdown-frontmatter dt{color:var(--gold)}.markdown-frontmatter dd{margin:0}.markdown-table-wrap{max-width:100%;overflow:auto;margin:1em 0;border:1px solid #486175}.markdown-preview table{width:100%;min-width:460px;border-collapse:collapse;font-size:13px}.markdown-preview th,.markdown-preview td{padding:9px 11px;border:1px solid #486175;text-align:left;vertical-align:top}.markdown-preview th{color:var(--gold);background:#173046} .markdown-toc{margin:0 0 24px;padding:12px 14px;border:1px solid #486175;background:#102b3a}.markdown-toc>span{color:var(--gold);font:700 10px var(--font-mono);letter-spacing:.1em}.markdown-toc ol{display:flex;flex-wrap:wrap;gap:7px 13px;margin:9px 0 0;padding:0;list-style:none}.markdown-toc li.level-2{margin-left:10px}.markdown-toc li.level-3{margin-left:20px}.markdown-toc a{font:12px/1.3 var(--font-sans);text-decoration:none}.markdown-toc a:hover{text-decoration:underline} -.detail.is-swapping > * { /* purpose: review-desk detail swap on selection (state change) */ animation: detail-swap 200ms cubic-bezier(.2,0,0,1) both; } @keyframes detail-swap { from { opacity: 0.15; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } .vote-buttons button b { display: inline-block; } .vote-buttons button b.is-updating { /* purpose: vote widget tally update (feedback) */ animation: tally-pop 200ms cubic-bezier(.2,0,0,1) both; } @keyframes tally-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .detail.is-swapping > *, .vote-buttons button b.is-updating { animation: none; } } diff --git a/skills-review/vote.js b/skills-review/vote.js index 4e664fa..fc6bb1a 100644 --- a/skills-review/vote.js +++ b/skills-review/vote.js @@ -19,15 +19,15 @@ async function api(path, options = {}) { return response.json(); } -function widgetMarkup(skillId, tally, you, unavailable, isUpdate = false) { +function widgetMarkup(skillId, tally, you, unavailable) { const total = (tally.original || 0) + (tally.improved || 0); const share = (count) => total ? Math.round((count / total) * 100) : 0; if (unavailable) return `
READER VOTE

Voting is offline right now — the vote service is not configured or unreachable.

`; return `
WHICH DRAFT WOULD YOU SHIP?
- - + +

${you ? `You voted ${you === 'original' ? 'original' : 'improved draft'}. Pick the other option to change it.` : 'One vote per visitor, tracked by network source.'}

`; @@ -40,7 +40,7 @@ export async function renderVoteWidget(container, skillId) { container.innerHTML = widgetMarkup(skillId, {}, null, false); try { const result = await api('/api/votes', { method: 'POST', body: JSON.stringify({ skillId, choice }) }); - container.innerHTML = widgetMarkup(skillId, { original: result.original, improved: result.improved }, result.you, false, true); + container.innerHTML = widgetMarkup(skillId, { original: result.original, improved: result.improved }, result.you, false); bind(); } catch { container.innerHTML = widgetMarkup(skillId, {}, null, true); } }; diff --git a/styles.css b/styles.css index 7597b6a..33bf1e3 100644 --- a/styles.css +++ b/styles.css @@ -1,2 +1,2 @@ @import url('public/fonts/fonts.css'); :root{--paper:#f5f4f1;--ink:#172f42;--muted:#697b89;--accent:#7c78a8;--blue:#527f9f;--gold:#efc76b;--line:#d8dee2;--deep:#102536;--font-sans:manrope,arial,sans-serif;--font-mono:'DM Mono',monospace;}*{box-sizing:border-box}body{margin:0;min-width:320px;background:var(--paper);color:var(--ink);font-family:var(--font-sans)}main{padding:28px clamp(24px,6vw,96px) 80px}.topbar,.section-label{display:flex;justify-content:space-between;align-items:center}.brand{color:var(--ink);font-size:12px;font-weight:800;text-decoration:none;text-transform:uppercase}.mark{display:inline-grid;place-items:center;width:28px;height:28px;margin-right:9px;border-radius:50%;color:var(--paper);background:var(--accent)}.edition,.eyebrow,.section-label,.thesis span,.captain span,.workers span,.route-table b,.skill-package>span,.rule span,.callout span,.sources{font:500 10px var(--font-mono);letter-spacing:.1em;text-transform:uppercase}.edition i{display:inline-block;width:6px;height:6px;margin:0 8px;border-radius:50%;background:var(--accent)}.hero{max-width:780px;padding:clamp(75px,12vh,145px) 0 85px}.eyebrow,.section-label,.thesis span{color:var(--accent)}h1{margin:16px 0 24px;font-size:clamp(56px,9vw,126px);line-height:.86;letter-spacing:-.08em}h1 em,h2 em{color:var(--blue);font-family:Georgia,serif;font-weight:400}.lede,.copy>p:last-child,.skills>div:first-child>p:last-child,.worktrees>div:first-child>p,.caption{max-width:570px;color:var(--muted);line-height:1.65}.thesis{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;margin-bottom:110px;padding:28px;background:var(--gold)}.thesis div:first-child{display:grid;gap:16px}.thesis strong{font-size:clamp(24px,4vw,46px);line-height:1.05;letter-spacing:-.04em}.signal{display:flex;align-items:center;gap:10px}.signal i{width:28px;height:28px;border:1px solid var(--ink);background:var(--paper)}.signal i:nth-of-type(3){background:var(--blue)}.signal b{font:500 10px var(--font-mono)}.fleet{margin-bottom:120px}.section-label{padding-bottom:14px;border-bottom:1px solid var(--line)}.section-label span:last-child{color:var(--muted)}.fleet-grid{display:grid;grid-template-columns:.8fr 50px 1.5fr;gap:24px;margin-top:30px;color:var(--paper);background:var(--deep)}.captain{display:grid;align-content:center;gap:16px;padding:32px}.captain span{color:var(--gold)}h2{margin:14px 0 20px;font-size:clamp(36px,5vw,65px);line-height:.98;letter-spacing:-.06em}.captain h2{font-size:clamp(24px,3vw,38px)}.captain code,.workers code{color:var(--gold);font:11px var(--font-mono)}.arrow{display:grid;place-items:center;color:var(--gold);font-size:30px}.workers{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#41596b}.workers article{display:grid;align-content:space-between;gap:20px;min-height:180px;padding:22px;background:var(--ink)}.workers span{color:#9eabb4}.workers strong{font-size:16px;line-height:1.2}.caption{margin:22px 0 0 auto}.workflow,.routing,.skills{display:grid;grid-template-columns:.7fr 1fr 1.3fr;gap:40px;align-items:start;margin-bottom:130px;padding-top:80px;border-top:1px solid var(--line)}.phase-tabs{display:grid;gap:8px}.phase-tabs button{display:grid;grid-template-columns:42px 1fr;gap:10px;padding:15px;border:1px solid var(--line);color:var(--ink);background:transparent;font:500 10px var(--font-mono);letter-spacing:.07em;text-align:left;cursor:pointer}.phase-tabs button b{color:var(--accent)}.phase-tabs button.active{color:var(--paper);border-color:var(--ink);background:var(--ink)}.phase-panel{min-height:260px;padding:30px;color:var(--paper);background:var(--accent)}.phase-meta{display:flex;justify-content:space-between;gap:15px;color:var(--gold);font:500 10px var(--font-mono)}.phase-meta small{color:var(--paper);opacity:.7}.phase-panel h3{margin:44px 0 12px;font-size:clamp(24px,3vw,38px);line-height:1.05}.phase-panel p{line-height:1.6;opacity:.82}.phase-panel code{display:block;margin-top:26px;color:var(--gold);font:11px var(--font-mono)}.handoff{margin-bottom:130px}.handoff table{width:100%;margin-top:30px;border-collapse:collapse;text-align:left}.handoff th,.handoff td{padding:17px 14px;border-bottom:1px solid var(--line)}.handoff thead{color:var(--paper);background:var(--ink);font:500 10px var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.handoff tbody th{color:var(--blue);font:600 14px var(--font-mono)}.handoff td{color:var(--muted);font-size:13px}.worktrees{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:center;margin-bottom:130px;padding:45px;color:var(--paper);background:var(--deep)}.worktrees .eyebrow{color:var(--gold)}.worktrees h2{color:var(--paper)}.worktrees h2 em{color:var(--gold)}.worktrees>div:first-child>p{color:#b0bac1}.worktrees pre{margin:32px 0 0;padding:20px;overflow:auto;color:var(--gold);background:var(--ink)}pre code{font:12px/1.75 var(--font-mono)}.map{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-top:90px}.repo{position:absolute;top:0;left:50%;width:180px;padding:17px;transform:translateX(-50%);color:var(--ink);background:var(--gold)}.map>div:not(.repo){min-height:135px;padding:20px;border:1px solid #41596b;background:var(--ink)}.repo span,.map>div:not(.repo) span{display:block;margin-bottom:12px;color:var(--accent);font:500 9px var(--font-mono)}.repo strong,.map>div:not(.repo) strong{display:block;font:14px var(--font-mono)}.repo small,.map>div:not(.repo) small{display:block;margin-top:12px;color:#9eabb4;font-size:11px}.routing{grid-template-columns:.8fr 1.2fr}.route-table{border-top:1px solid var(--line);border-left:1px solid var(--line)}.route-table>div{display:grid;grid-template-columns:.8fr .9fr 1.4fr}.route-table .head{color:var(--paper);background:var(--ink);font:500 10px var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.route-table>div>*{padding:15px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.route-table strong{font-size:14px}.route-table b{color:var(--blue);letter-spacing:0;text-transform:none}.route-table small{color:var(--muted);font-size:12px}.skills{grid-template-columns:.8fr 1fr;margin-bottom:90px}.skill-package{display:grid;align-content:start;color:var(--paper);background:var(--blue)}.skill-package>span{padding:20px;color:var(--gold);border-bottom:1px solid #ffffff40}.skill-package>div{display:grid;grid-template-columns:1fr 1fr;gap:15px;padding:17px 20px;border-bottom:1px solid #ffffff40}.skill-package code{font:12px var(--font-mono)}.skill-package small{opacity:.7}.skills>pre{grid-column:2;margin:0;padding:28px;overflow:auto;color:#d8dee2;background:var(--ink)}.rule{display:grid;grid-template-columns:150px 1fr;gap:30px;margin-top:55px;padding-top:22px;border-top:4px solid var(--gold)}.rule strong{max-width:850px;font-size:clamp(24px,3.3vw,42px);line-height:1.12}.callout{display:grid;grid-template-columns:150px 1fr;gap:30px;margin-top:70px;padding:27px;background:var(--gold)}.callout strong{max-width:850px;font-size:clamp(22px,3vw,36px);line-height:1.1}.sources{margin-top:90px;color:var(--muted)}.sources p{color:var(--muted);font:13px/1.6 var(--font-sans);letter-spacing:0;text-transform:none}.sources a{color:var(--blue);font-weight:700}@media(max-width:800px){.thesis,.fleet-grid,.workflow,.worktrees,.routing,.skills{grid-template-columns:1fr}.arrow{transform:rotate(90deg);min-height:35px}.workers{grid-template-columns:1fr}.skills>pre{grid-column:auto}.route-table,.handoff{overflow-x:auto}.route-table>div{min-width:620px}.handoff table{min-width:650px}.rule,.callout{grid-template-columns:1fr}}@media(max-width:600px){.edition{display:none}.worktrees{padding:24px}.map{grid-template-columns:1fr;padding-top:90px}} -main{max-width:1840px;margin-inline:auto}.reading-progress{position:fixed;inset:0 0 auto;z-index:20;height:3px;background:transparent}.reading-progress span{display:block;width:100%;height:100%;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .15s ease}.chapter-links{display:flex;gap:22px;margin-left:auto;margin-right:32px}.chapter-links a{color:var(--muted);font:500 10px var(--font-mono);letter-spacing:.08em;text-decoration:none;text-transform:uppercase}.chapter-links a:hover{color:var(--ink)}.hero{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:80px;align-items:end}.hero-index{display:grid;gap:14px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.hero-index span,.hero-index small{color:var(--muted);font:500 10px var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.hero-index strong{font-size:clamp(27px,3vw,48px);line-height:.95;letter-spacing:-.06em}.hero-index em{color:var(--accent);font-family:Georgia,serif;font-weight:400}.hero-stats{display:grid;grid-template-columns:repeat(3,1fr) 1.6fr;gap:1px;margin:0 0 110px;background:var(--line);border-top:1px solid var(--line);border-left:1px solid var(--line)}.hero-stats div,.hero-stats p{min-height:110px;margin:0;padding:20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}.hero-stats div{display:flex;align-items:center;gap:16px}.hero-stats strong{font:500 34px var(--font-mono);color:var(--blue)}.hero-stats span{color:var(--muted);font:500 10px/1.4 var(--font-mono);letter-spacing:.06em;text-transform:uppercase}.hero-stats p{display:grid;place-items:center;color:var(--muted);font-size:13px;line-height:1.5;text-align:center}.failure-map{margin-bottom:130px;padding-top:80px;border-top:1px solid var(--line)}.failure-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:30px;background:var(--line);border-left:1px solid var(--line)}.failure-grid article{min-height:220px;padding:24px;background:var(--paper);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.failure-grid span{color:var(--accent);font:500 11px var(--font-mono)}.failure-grid strong{display:block;margin:52px 0 12px;font-size:22px}.failure-grid p{max-width:300px;margin:0;color:var(--muted);font-size:13px;line-height:1.6}.skill-principles{display:grid;gap:10px;margin-top:30px;color:var(--blue);font:500 10px var(--font-mono);letter-spacing:.06em;text-transform:uppercase}.skill-principles span{color:var(--blue)}@media(min-width:2200px){main{max-width:1960px}.hero{grid-template-columns:minmax(0,1fr) 380px}.hero h1{font-size:clamp(100px,7vw,160px)}body{font-size:18px}}@media(max-width:800px){.chapter-links{display:none}.hero{display:block}.hero-index{max-width:300px;margin-top:50px}.hero-stats{grid-template-columns:1fr 1fr;margin-bottom:80px}.hero-stats p{grid-column:1/-1}.failure-grid{grid-template-columns:1fr}.failure-grid article{min-height:0}.failure-grid strong{margin-top:30px}} +main{max-width:1840px;margin-inline:auto}.reading-progress{position:fixed;inset:0 0 auto;z-index:20;height:3px;background:transparent}.reading-progress span{display:block;width:0;height:100%;background:var(--gold);transition:width .15s ease}.chapter-links{display:flex;gap:22px;margin-left:auto;margin-right:32px}.chapter-links a{color:var(--muted);font:500 10px var(--font-mono);letter-spacing:.08em;text-decoration:none;text-transform:uppercase}.chapter-links a:hover{color:var(--ink)}.hero{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:80px;align-items:end}.hero-index{display:grid;gap:14px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.hero-index span,.hero-index small{color:var(--muted);font:500 10px var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.hero-index strong{font-size:clamp(27px,3vw,48px);line-height:.95;letter-spacing:-.06em}.hero-index em{color:var(--accent);font-family:Georgia,serif;font-weight:400}.hero-stats{display:grid;grid-template-columns:repeat(3,1fr) 1.6fr;gap:1px;margin:0 0 110px;background:var(--line);border-top:1px solid var(--line);border-left:1px solid var(--line)}.hero-stats div,.hero-stats p{min-height:110px;margin:0;padding:20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}.hero-stats div{display:flex;align-items:center;gap:16px}.hero-stats strong{font:500 34px var(--font-mono);color:var(--blue)}.hero-stats span{color:var(--muted);font:500 10px/1.4 var(--font-mono);letter-spacing:.06em;text-transform:uppercase}.hero-stats p{display:grid;place-items:center;color:var(--muted);font-size:13px;line-height:1.5;text-align:center}.failure-map{margin-bottom:130px;padding-top:80px;border-top:1px solid var(--line)}.failure-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:30px;background:var(--line);border-left:1px solid var(--line)}.failure-grid article{min-height:220px;padding:24px;background:var(--paper);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.failure-grid span{color:var(--accent);font:500 11px var(--font-mono)}.failure-grid strong{display:block;margin:52px 0 12px;font-size:22px}.failure-grid p{max-width:300px;margin:0;color:var(--muted);font-size:13px;line-height:1.6}.skill-principles{display:grid;gap:10px;margin-top:30px;color:var(--blue);font:500 10px var(--font-mono);letter-spacing:.06em;text-transform:uppercase}.skill-principles span{color:var(--blue)}@media(min-width:2200px){main{max-width:1960px}.hero{grid-template-columns:minmax(0,1fr) 380px}.hero h1{font-size:clamp(100px,7vw,160px)}body{font-size:18px}}@media(max-width:800px){.chapter-links{display:none}.hero{display:block}.hero-index{max-width:300px;margin-top:50px}.hero-stats{grid-template-columns:1fr 1fr;margin-bottom:80px}.hero-stats p{grid-column:1/-1}.failure-grid{grid-template-columns:1fr}.failure-grid article{min-height:0}.failure-grid strong{margin-top:30px}} From aefbd206f96c96bd443f5fd4de31ae046bba179e Mon Sep 17 00:00:00 2001 From: Marcos Paulo Date: Sat, 5 Sep 2026 23:34:29 +0000 Subject: [PATCH 4/4] docs: 15e cannot delete responsive.css before the cutover --- .../astro-refactor/task-15e-responsive-css.md | 41 +++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/plans/astro-refactor/task-15e-responsive-css.md b/plans/astro-refactor/task-15e-responsive-css.md index a809117..1224ed9 100644 --- a/plans/astro-refactor/task-15e-responsive-css.md +++ b/plans/astro-refactor/task-15e-responsive-css.md @@ -82,3 +82,44 @@ read the legacy files, so deleting `responsive.css` and breaking every mobile layout passes it cleanly. Before you claim done, diff the **built** CSS (`dist/_astro/*.css`) against `main` and enumerate every declaration that disappeared. Each one is either present elsewhere or a regression. + +## Attempt 1 stopped short — and the goal as written is not reachable yet + +Preserved as `rejected/15e-attempt-1` (`d2312d7`). Start by reading that diff: +it ported rules into `ChapterHero`, `FleetDiagram`, `RouteTable`, `WorktreeMap`, +`LanguageToggle`, `ReadingProgress`, `agents.astro`, `full-guide.astro` and +`tokens.css`, and it added `pixelmatch`, `pngjs` and `postcss` plus a working +screenshot-compare harness. Reuse all of it. It never finished the comparison +loop and never committed on its own. + +It also deleted `responsive.css` while **`full-guide/index.html` still links +it**. That page is the live site until task 20 cuts over; deleting the +stylesheet strips it. `src/components/islands/GuideSelector.astro` still +references it too. + +So the "delete it" checkbox in this brief cannot be honestly ticked before the +cutover. Do not tick it, and do not delete the file. **The deliverable is +everything up to the deletion:** + +- Every rule `responsive.css` provides to an Astro route lives with the + component that needs it, or in `tokens.css`. +- No `.astro` file and no Astro layout links `responsive.css` any more. +- `full-guide/index.html` still links it, unchanged, and still renders exactly + as it does today. +- A list, in this file, of the rules that remain in `responsive.css` solely for + the legacy page — that list is the deletion checklist task 20 will execute. + +Amend the "Done when" boxes to match before you start, and say in your final +report that the file is intentionally still present. + +### One rule to port properly while you are in there + +`.route-meter span` animates `height: var(--score)` — a layout property, which +task 18 was meant to eliminate. 18 changed it in `responsive.css` and that +change was reverted (`0bca43c`) because it belongs in the component, not in a +legacy file. When you port this rule, port it as +`transform: scaleY(var(--score)); transform-origin: bottom` with `height: 100%`. +`--score` is set inline as a percentage (`--score:92%`) by `GuideSelector.astro` +and `full-guide.astro`; a percentage in `scaleY()` is valid and was verified +rendering correctly at `matrix(1, 0, 0, 0.92, 0, 0)`. Leave the legacy +`responsive.css` copy of the rule alone.