Fix interface review findings across the marketing site - #54
Merged
Conversation
Resolve the accessibility, layout, colour and typography defects found in the cross-discipline review of the three site pages. - Point eight declarations at defined tokens: --hearth-ink-strong, --hearth-ink-soft and --hearth-card-border were never defined, so the final CTA lost its focus ring, accent arrows, hover bar and ink hierarchy, and the specimen border fell back to currentColor. - Gate the scroll-reveal start state on html.has-js so a script-less load renders every section instead of a blank page. - Give the copy-command button a focus ring: --cap-accent is out of scope in .specimen-stage, which made the whole declaration invalid. - Restore focus rings on footer links and nav/lang pills, where the ::after underline alone was indistinguishable from .is-active. - Move the ignition readout above the command chip; the left-anchored capsule covered 90% of it whenever it outgrew the stage. - Name the nav landmark, localise the language-switch label, and expose the active page and locale with aria-current, lang and hreflang. - Lift the CJK language pills to a 24px target with the spacing to match. - Stop the hero install grid inheriting the smallest meta size. - Announce the copy confirmation through a stable status region. - Add a skip link and a main landmark id. - Offer the preferred locale as a dismissible notice instead of redirecting, so a shared English URL still renders English. - Carry the page's purpose into the h1 and drop the pointer-only "Click to copy" wording.
Deploying hearththeme with
|
| Latest commit: |
b8a7d43
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://bf09ae04.hearththeme.pages.dev |
| Branch Preview URL: | https://cx-interface-review-fixes.hearththeme.pages.dev |
The capsule was absolutely positioned, so its height never reached its container: .hero-specimen was sized by the stage alone. The stage clamps to a 540px floor, but the capsule's height is content-driven, so once the viewport got short the panel escaped the frame and landed on top of the following section — at 1000x500 it overflowed the stage by 198px and covered the "one colour language" heading. Place the stage and the capsule in a single grid cell instead. The capsule still overlays the specimen, but as a grid item it contributes its height to the row, and the stage takes min-height rather than height so it stretches to match. The section now grows to fit the panel at every viewport height, and the capsule sits symmetrically inside the frame instead of overhanging it. The narrow-screen stack resets the grid placement it no longer needs.
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
1 participant
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.
Cross-discipline interface review of the three site pages (home, forge, docs) turned up 13 defects across accessibility, layout, colour, typography and copy. This fixes all of them.
Highest impact
--hearth-ink-strong,--hearth-ink-softand--hearth-card-borderhad no definition anywhere, so every declaration referencing them was invalid at computed-value time. The final CTA lost its focus ring, accent arrows, hover bar and ink hierarchy (title, body and secondary link all collapsed to the same colour), and the specimen border fell back tocurrentColor. All eight call sites now point at the defined equivalents rather than adding new tokens to the generatedtheme-vars.css.[data-reveal] { opacity: 0 }was ungated and only JS ever added.is-visible— 0 of 9 reveal containers shipped visible in the SSR HTML. The start state is now gated onhtml.has-js.--cap-accent, which is out of scope in.specimen-stage; footer links replaced the outline with a colour change only.Everything else
Nav landmark naming and
aria-current/lang/hreflangexposure, 24px targets for the CJK language pills, the ignition readout that sat 90% behind the hero capsule, the hero install grid inheriting the smallest meta size (9.28px), an announced copy confirmation, a skip link, a descriptiveh1, and the pointer-only "Click to copy" wording.Verification
content-sync/cjk/claims/forge-quality/sync-cleanaudits,astro build+ built-site smoke checkLocal verification ran against the pre-#51 dependency set; CI covers the current stack.