feat: section overhaul — shared design foundation across landing sections#38
Closed
BunsDev wants to merge 14 commits into
Closed
feat: section overhaul — shared design foundation across landing sections#38BunsDev wants to merge 14 commits into
BunsDev wants to merge 14 commits into
Conversation
…shared.js Groundwork for the five-section overhaul (Architecture, HowItWorks, Compare, QuickStart, Ecosystem). Purely additive; no element consumes the new utilities yet, so there are no visual changes beyond a subtle per-section chapter divider. - global.css: motion/layout tokens (--ease-out, --dur-*, --section-py, --gutter), shared panel surfaces (--panel-bg, --panel-shadow, accent scale), .panel/.panel--arrival + .panel-inset (with .is-active and guarded hover), .swap-fade content-swap, a unified :where() focus ring consuming the previously-unused --oc-focus-ring, .section-header--wide, a faint .content-section::before chapter divider, and a .reveal-stagger utility (existing grids keep working; extended to 6 items). - shared.js (new): fadeSwap, wireRadioGroup, typewriter, grid2DNav — extracted from the hero + HowItWorks so later sections reuse them. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Rebuild Quick Start from three flat parallel cards into a semantic <ol>
stepper that reads as a sequence, on the hero's continuity-rail motif.
- Numbered nodes threaded on a gradient connector; the final node lights
up (is-now + now-pulse) as "you're running now".
- Each step is a glass card with a syntax-accented command (static token
spans; clean plaintext stays in data-copy), an expected-output "expect"
hint (what success looks like), and a short note.
- Copy now announces success to screen readers via an sr-only aria-live
region and restores the step-specific button label.
- Step 3 command retargeted to Forge ("pick up where we left off") to tie
into the hero narrative; migrated to the new violet palette.
- Vertical at every breakpoint, so mobile just works (no 3->1 collapse).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Browser font-size preferences now scale all type (verified identical at 16px root, scaling at 20px root). Structural dimensions stay px. Compare.astro intentionally skipped — it has an in-flight redesign from a parallel session; its font sizes get converted when that work lands. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Replace the fragile <table> + single shared detail with a CSS-grid pseudo-table of independently-expandable capability lanes. - Verdict pills (Yes / Limited / No) replace the ambiguous circular marks; colourblind-safe via distinct text + border-style, not hue. - Every lane shows an always-visible one-line takeaway, so rows have identity before any click; each lane expands its own deep-dive (multi-open accordion via an animated grid-rows disclosure). - The Coven column is one continuous highlighted "best fit" rail. - At <=720px the matrix reflows into real stacked capability cards (option labels become visible, Coven row tinted) — not a shrunk table. - Keeps the arrow-key nav; frame uses the shared .panel; focus ring unified via --oc-focus-ring. Note: the disclosure rule keys off the external .js-on class, which Astro would otherwise scope to the component — wrapped in :global(.js-on) so it matches <html>. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Rebuild the thin closing section into a deliberate "choose your door" arrival on the shared .panel.panel--arrival surface. - Two-column layout: a dominant "Join the Coven" (Discord) CTA beside a 2×2 grid of descriptive destination cards (Coven CLI on GitHub, Docs, CastCodes terminal, Download CovenCave) built on .panel-inset.is-card with familiar-sigil icon tiles. - Sentence-case closing headline with a period to match the sibling sections; each destination gains a one-line description. - External links get target/rel + an sr-only "(opens in new tab)"; the ↗ cue nudges on hover, icon tiles pick up the shared hover glow. - Collapses to one column at 900 (edge-to-edge), portals stack at 520. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Recast the 4-tab explainer as a hero-grade runtime console and bring it onto the shared design language. - Palette migration off the legacy #8E3DFF system: rgba(142,61,255)→ rgba(154,142,205), rgba(201,167,255)→rgba(180,170,235), #4ade80→ var(--green). This section was the biggest source of "five experiments". - Frame uses the shared .panel with a new topbar rail (dots + "coven · runtime" + a local status dot) echoing the hero card. - Stage min-height locked so switching tabs never reflows the page; incoming panels crossfade (motion-gated); live content (memory board, harness detail, tool rule) repaints through fadeSwap from shared.js. - wireRadioGroup lifted to shared.js (was inline). - Sessions filter now hides non-matches (was dimming) and announces an empty state inside the aria-live region. - Removed every !important by scoping widget typography under .howit-widget. - Retired the four ad-hoc #E8DBFF focus outlines for the unified ring. - Mobile: tabs become a 2×2 grid (≥40px targets, no 9px squeeze); the tool flow stacks vertically with rotated (still-visible) arrows. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Short laptops (901px+ wide, <=720px tall): compress hero vertical rhythm so the continuity timeline stays above the fold (verified at 1280x640, 1366x700, 1440x720) - Ultrawide (1680px+): shared containers step 1280->1440px; hero type, terminal card, timeline, and ambient glows scale with the canvas - Hero stacking is now orientation-aware: portrait handhelds stack, landscape phones 701-900px wide keep a compact two-column hero - QuickStart stepper: minmax(0,1fr) track + min-width:0 chain so the nowrap codeblock scrolls internally instead of widening the page on phones (fixes horizontal overflow at <=500px) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Bring the interactive diagram onto the shared design language and fix its biggest UX gaps. - Wrap the diagram + detail in the shared .panel with a console topbar (dots + "coven · architecture" + a layer legend: harness/runtime/project). - Recommended-first: the Adapter node is pre-selected and its content is server-rendered, so the detail panel never ships a generic "pick a node" state; a subtle pulse primes it until the first interaction. - Glossary de-noised: mark only the FIRST occurrence of each term (was every occurrence), and marks are now real <button>s (native tap). - Tooltip is now a tap-toggle, dismissible popover (role=dialog): click/tap pins it, hover previews on pointer devices, with a close button, Escape (returns focus), and click-outside. position:fixed + viewport clamp makes it robust on mobile — the old hover-only tooltip was unusable on touch. - Detail repaints crossfade through fadeSwap; palette fixed (green token, violet focus stroke, dropped the off-palette magenta). Deferred (SVG is tappable and usable on mobile as-is): a parallel HTML node-stack for larger touch targets, and 2-D grid keyboard nav. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Continuity thread draws itself on reveal (scaleX/scaleY transition gated by :has() + @supports; static thread on older browsers), reaching each node as it fades in — horizontal and vertical variants - Terminal boots like a real session: first command types, then the output frame, identity, memory, and roster arrive in beats; roster interaction cancels the boot; no-JS and reduced-motion render complete - Quiet ambient bloom breathing behind the terminal (horizontal inset 0 so it never creates scrollable overflow on phones) - Download CTA sub-line uses text-wrap: balance (no orphaned word at 320px) - Compare.astro font sizes converted to rem now that its redesign landed (completes the zoom-a11y conversion) Verified: 9-viewport matrix (320x568 -> 2560x1440) with zero horizontal overflow, hero above the fold on short laptops, tabs + arrow keys, reduced-motion, JS-off, and 20px root scaling. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Removes the terminal boot sequence, continuity thread draw-in, and ambient bloom added in e90c7c5. The hero returns to its state as of 2722406 (the version approved in review), keeping the unrelated fixes from that commit: text-wrap balance on the CTA sub-line, the Compare rem conversion, and all screen-support work. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
The sections below became full-width console frames (COVEN · RUNTIME, COVEN · ARCHITECTURE); the old copy-left/card-right split read as a generic SaaS hero with a small card that no longer matched its own page. The hero now opens the way the rest of the page speaks: - Editorial masthead: full-width kicker eyebrow (echoing the section eyebrows), display headline LEFT, lede + platform-aware download RIGHT - One full-width COVEN · SESSION panel (shared .panel primitive): live session on the left (typed command, familiar state, roster tabs), continuity rail on the right — the familiar's memory across 47 days ending in the pulsing today node, now a labelled column inside the console instead of a floating strip - Motion unchanged and restrained per prior review: typing, rotation, and the shared reveal stagger only - All screen support preserved: fold-fit on short laptops re-verified (1280x640/1366x700/1440x720), 9-viewport overflow matrix clean, tabs + arrow keys, reduced-motion, and no-JS paths re-tested Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Masthead reuses the console's column split (--hero-cols) with zero gap — the aside's left padding is the gutter — so the masthead seam sits exactly above the console's inner divider - Masthead row 2 bottom-aligns: the h1 baseline, the aside's last row, and the console's top edge share one line - Roster moves out of the session column to a full-width console footer, framing the panel top (COVEN · SESSION bar) and bottom - Continuity events distribute across the full rail height (space-between) so the thread fills the column with no dead space - Short-viewport compression re-tuned for the taller frame; 9-viewport matrix and fold-fit re-verified, roster tabs re-tested Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Remove the 'also on Windows / Linux / iOS / all releases' row — the single download button already retargets to the visitor's platform (macOS default without JS; iOS goes to TestFlight in a new tab, verified with iPhone and Windows UAs) - Move Join Discord + Read the docs under the 'Summon agents that remember.' headline in the left column - verify-static.mjs updated: asserts the server-rendered macOS default and the TestFlight retarget URL instead of the removed alt row - 9-viewport matrix re-verified: no overflow, fold-fit intact Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
The .kw tooltip fired mouseenter/mouseleave on every device, so touch
devices got a synthetic hover flash right before the tap-to-pin. Gate
the hover-preview behind matchMedia('(hover: hover) and (pointer: fine)').
Tap-to-pin and keyboard focus/blur stay wired on all devices.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR rebuilds the landing page sections on a shared design foundation (tokens + panel primitives + shared JS helpers), while updating section layouts/interactions (hero/architecture/compare/quickstart/ecosystem) and aligning verification checks with the new CTA copy/markup.
Changes:
- Added shared motion/layout tokens, panel primitives, unified focus ring, and rem-based typography updates in global styles.
- Introduced
src/scripts/shared.jshelpers and migrated section scripts to use shared crossfade + input wiring. - Refactored multiple sections (Hero, Architecture, Compare, QuickStart, Ecosystem) and updated
verify-static.mjsto match the new single-button download CTA.
Reviewed changes
Copilot reviewed 14 out of 14 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/styles/global.css | Adds shared tokens (motion/layout), .panel / .panel-inset primitives, unified focus ring, and extensive section style refactors (rem typography + new layouts). |
| src/scripts/shared.js | New shared interaction helper module (fadeSwap, wireRadioGroup, typewriter, grid2DNav). |
| src/scripts/main.js | Updates hero container selector and improves QuickStart copy-to-clipboard behavior with an aria-live announcement. |
| src/pages/terms.astro | Converts page typography from px to rem for zoom/accessibility consistency. |
| src/pages/privacy.astro | Converts page typography from px to rem for zoom/accessibility consistency. |
| src/components/Testimonial.astro | Converts component typography from px to rem. |
| src/components/QuickStart.astro | Reworks QuickStart into a vertical stepper with tokenized command display + copy labels and a status live region. |
| src/components/HowItWorks.astro | Moves frame to shared .panel, adds swap-fade crossfades, improves sessions filtering UX, and imports shared helpers. |
| src/components/Hero.astro | Rebuilds hero as “first console frame” with masthead + full-width session panel and embedded continuity rail. |
| src/components/Ecosystem.astro | Rebuilds ecosystem into an “arrival” section with a dominant Discord CTA and portal card grid. |
| src/components/DownloadCTA.astro | Simplifies to a single dynamic download button carrying releases + TestFlight URLs for JS retargeting. |
| src/components/Compare.astro | Replaces table-based compare with a lane/grid layout, per-lane expandable details, and mobile card reflow. |
| src/components/Architecture.astro | Adds console framing, recommended-first Adapter SSR selection, shared crossfade, and a gated hover/tap glossary popover. |
| scripts/verify-static.mjs | Updates static verification to validate the new single-button download CTA + TestFlight URL presence. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+13
to
+24
| export function fadeSwap(el, repaint, opts) { | ||
| var ms = (opts && opts.ms) || 200; | ||
| if (!el || !motionOn()) { | ||
| if (repaint) repaint(); | ||
| return; | ||
| } | ||
| el.classList.add('is-swapping'); | ||
| setTimeout(function () { | ||
| if (repaint) repaint(); | ||
| el.classList.remove('is-swapping'); | ||
| }, ms); | ||
| } |
Comment on lines
+227
to
229
| // Announce success to screen readers. | ||
| if (liveRegion) liveRegion.textContent = 'Copied: ' + cmd; | ||
| if (resetTimer) clearTimeout(resetTimer); |
| data-layer={n.layer} | ||
| data-recommended={n.id === 'adapter' ? 'true' : null} | ||
| role="button" | ||
| tabindex={i === 0 ? '0' : '-1'} |
Comment on lines
+404
to
+406
| document.addEventListener('click', (e) => { | ||
| if (pinnedMark && tooltip && !tooltip.contains(e.target) && !e.target.closest('.kw')) hideTooltip(); | ||
| }); |
Member
Author
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Reworks the landing page onto a shared design foundation and rebuilds each section on top of it. Supersedes the closed #31.
shared.jshelpers (fadeSwap, reveal wiring); typography converted px → rem for zoom accessibility; responsive support for short laptops, ultrawide, and landscape phones.matchMedia('(hover: hover) and (pointer: fine)')) so touch devices don't get a synthetic hover flash before tap-to-pin; tap and keyboard focus stay wired everywhere.verify-static.mjscopy-string checks updated to match.Verification
npm run buildandnpm run checkpass.hover:none→ hover suppressed, tap opens, keyboard focus works).🤖 Generated with Claude Code