feat(compare): PR3 — grid-of-lanes with labelled pills and mobile cards#28
Closed
BunsDev wants to merge 2 commits into
Closed
feat(compare): PR3 — grid-of-lanes with labelled pills and mobile cards#28BunsDev wants to merge 2 commits into
BunsDev wants to merge 2 commits into
Conversation
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>
|
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 is the “Compare” section overhaul, replacing the previous table + shared detail panel interaction with a CSS-grid “lane” matrix where each capability can expand independently, with clearer labelled verdict pills and a dedicated mobile card layout. It also standardizes many font-size declarations across the site from px to equivalent rem values.
Changes:
- Rebuild
Compareinto a grid-of-lanes with per-lane accordion details, labelled verdict pills (Yes/Limited/No), and always-visible takeaways. - Add a ≤720px mobile reflow to stacked capability cards (option labels visible, Coven lane styling retained).
- Convert many UI font sizes from
pxto equivalentremvalues across global and section/page styles for better scaling.
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/styles/global.css | Converts many font sizes to rem to improve typographic scaling while keeping existing visual sizes. |
| src/pages/terms.astro | Converts local page typography from px to rem. |
| src/pages/privacy.astro | Converts local page typography from px to rem (including table text sizing). |
| src/components/Testimonial.astro | Converts component typography from px to rem. |
| src/components/HowItWorks.astro | Converts component typography from px to rem. |
| src/components/Compare.astro | Major Compare rebuild: grid pseudo-table, labelled pills, per-lane details, mobile cards, and updated interaction JS. |
| src/components/Architecture.astro | Converts component typography from px to rem. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+132
to
136
| function setOpen(btn, open) { | ||
| const detail = document.getElementById(btn.getAttribute('aria-controls')); | ||
| btn.setAttribute('aria-expanded', open ? 'true' : 'false'); | ||
| if (detail) detail.classList.toggle('is-open', open); | ||
| } |
Comment on lines
+251
to
254
| :global(.js-on) .cmp-detail { | ||
| grid-template-rows: 0fr; | ||
| transition: grid-template-rows var(--dur-ui) ease; | ||
| } |
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.
PR3 of the section overhaul — Compare
Stacked on #27 (QuickStart) → #26 (foundation). Merge those first.
Replaces the fragile
<table>+ single shared detail panel with a CSS-gridpseudo-table of independently-expandable capability lanes.
What changed
grid-template-rowsdisclosure; arrow-key nav retained..panel; focus unified via--oc-focus-ring.Note
The disclosure keys off the external
.js-onclass; Astro would scope that to the component, so it's wrapped in:global(.js-on)to match<html>(verified via computed styles — closed lanes collapse to0px).Verification
npm run build✓ ·npm run check✓ · no console errors (CDP).🤖 Generated with Claude Code