CSS Phase E: the paved path - jt-info-card component (21 instances single-sourced) + new-page checklist

[pftg]

What this is

Phase E — the paved path, per Paul's mandate: a person must be able to create a new page from scratch reusing existing components, consistently.

E1 — components/info-card.css (.jt-info-card)

The pp-infobox card pattern repeated 21× across homepage (6), services (6), about-us (3), careers (6), each under page-specific class names. The measured 16-rule intersection of all 21 instances now lives once, applied via the additive jt-info-card class on each card module — 336 rule-instances deleted from the four page files. Page variants (hover colors, equal-height framework, media tweaks) stay page-side and win by concat position; the tie-scan found one systematic selector+property tie (text-align) with identical values on both sides. Greedy purge entry /^jt-info-card/ added per the C2 lesson.

Gates: only the 4 card-page bundles' fingerprints changed; scoped screenshot gate green on all four; full macOS suite 65/119 zero failures, zero baseline changes; Linux dtest-all EXIT=0.

E3 — docs/workflows/new-page.md

The complete recipe: template shell, the load-bearing bundle-slice order, the component reuse table (testimonials, cta-banner, info-card, header-cta, technologies), design tokens, and the traps that each bit a real sprint — @import only works in the prelude, bundleName collisions race, the PurgeCSS greedy-prefix requirement, qtest/tests/ownership-map wiring, the baseline-overwrite recovery.

Still in Phase E (tracker):

• E2 stat-row component (about/home/service counter rows) — same measured-intersection protocol.
• E4 (optional): collapse the 6 inline CTA template copies onto the partial — copies diverge at outer wrappers, needs per-page params + visual gates; the partial is already usable for new pages today.

🤖 Generated with Claude Code

https://claude.ai/code/session_01GYRU9wGepomJo5hSuqtu7V

Summary by CodeRabbit

• New Features

  • Added shared styling for information cards across the About, Careers, Home, and Services pages.
  • Standardized card layouts, icon sizing, rounded corners, spacing, and responsive behavior.
  • Improved equal-height card presentation across desktop, tablet, and mobile breakpoints.

• Bug Fixes

  • Preserved required component styles from being removed during CSS optimization.

• Documentation

  • Added guidance for creating new pages with reusable components, responsive styles, testing, and visual verification.
  • Documented required CSS ordering and page configuration steps.

[coderabbitai]

📝 Walkthrough

Walkthrough

The PR introduces a shared jt-info-card stylesheet, applies it to About, Careers, Homepage, and Services infoboxes, updates page-specific responsive styling, extends PurgeCSS safelisting, and documents the standardized new-page workflow.

Changes

Info-card migration

Layer / File(s)	Summary
Workflow and selector preservation docs/projects/2509-css-migration/TASK-TRACKER.md, docs/workflows/new-page.md, postcss.config.js	Adds Phase E planning, a new-page workflow checklist, and additional PurgeCSS greedy selector prefixes.
Shared component and bundle wiring themes/beaver/assets/css/components/info-card.css, themes/beaver/layouts/partials/assets/*-css-resources.html, themes/beaver/layouts/page/{about,services}.html	Defines shared responsive info-card styling and adds the stylesheet to page CSS resource slices.
About value-card migration themes/beaver/layouts/page/about.html, themes/beaver/assets/css/pages/about-us.css	Adds jt-info-card to the three About value infoboxes and revises their visibility, alignment, image, spacing, and radius rules.
Careers value-card migration themes/beaver/layouts/page/careers.html, themes/beaver/assets/css/pages/careers.css	Adds jt-info-card to six Careers value cards and standardizes their responsive visibility, image sizing, padding, radius, and link typography.
Homepage and Services card migration themes/beaver/layouts/home.html, themes/beaver/layouts/page/services.html, themes/beaver/assets/css/pages/{homepage,services}.css	Applies the shared class to service infoboxes and replaces repeated layout, image, animation, radius, and link styling across Homepage and Services variants.

Estimated code review effort: 4 (Complex) | ~60 minutes

Possibly related PRs

• jetthoughts/jetthoughts.github.io#119 — Both update the PurgeCSS safelist configuration.
• jetthoughts/jetthoughts.github.io#261 — Both modify Careers page templates and CSS resource bundling.
• jetthoughts/jetthoughts.github.io#372 — Both extend PurgeCSS greedy selector preservation for semantic component selectors.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly matches the main changes: the new jt-info-card component and the new-page checklist documentation.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch css-migration/phase-e-paved-path

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

🧹 Nitpick comments (2)

themes/beaver/assets/css/components/info-card.css (2)

24-31: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Remove redundant flex-shrink property.

The flex-shrink: 1; declaration is overridden by the shorthand flex: 1 1 auto; on line 31. You can safely remove it.

♻️ Proposed fix

-  flex-shrink: 1;
   min-width: 1px;
   max-width: 100%;
   -webkit-box-flex: 1 1 auto;
   -moz-box-flex: 1 1 auto;
   -webkit-flex: 1 1 auto;
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@themes/beaver/assets/css/components/info-card.css` around lines 24 - 31,
Remove the redundant flex-shrink declaration from the flex item rule in
info-card.css, leaving the existing flex: 1 1 auto shorthand and related
vendor-prefixed declarations unchanged.

Source: Linters/SAST tools

---

55-57: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Remove empty CSS blocks.

These CSS blocks are empty and serve no purpose.

• themes/beaver/assets/css/components/info-card.css#L55-L57: remove the empty .jt-info-card .pp-infobox:hover .pp-infobox-image img block.
• themes/beaver/assets/css/components/info-card.css#L70-L72: remove the empty .jt-info-card .pp-infobox-wrap .layout-3-wrapper, .jt-info-card .pp-infobox-wrap .layout-4-wrapper block.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@themes/beaver/assets/css/components/info-card.css` around lines 55 - 57,
Remove both empty CSS rule blocks in
themes/beaver/assets/css/components/info-card.css: the .jt-info-card
.pp-infobox:hover .pp-infobox-image img block at lines 55-57 and the
.jt-info-card .pp-infobox-wrap .layout-3-wrapper, .jt-info-card .pp-infobox-wrap
.layout-4-wrapper block at lines 70-72. No replacement styles are needed.

Source: Linters/SAST tools

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@themes/beaver/assets/css/components/info-card.css`:
- Around line 24-31: Remove the redundant flex-shrink declaration from the flex
item rule in info-card.css, leaving the existing flex: 1 1 auto shorthand and
related vendor-prefixed declarations unchanged.
- Around line 55-57: Remove both empty CSS rule blocks in
themes/beaver/assets/css/components/info-card.css: the .jt-info-card
.pp-infobox:hover .pp-infobox-image img block at lines 55-57 and the
.jt-info-card .pp-infobox-wrap .layout-3-wrapper, .jt-info-card .pp-infobox-wrap
.layout-4-wrapper block at lines 70-72. No replacement styles are needed.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: ceea195a-6484-490f-ad59-2181e47050d0

📥 Commits

Reviewing files that changed from the base of the PR and between e12d9ec and 25b359c.

📒 Files selected for processing (14)

• docs/projects/2509-css-migration/TASK-TRACKER.md
• docs/workflows/new-page.md
• postcss.config.js
• themes/beaver/assets/css/components/info-card.css
• themes/beaver/assets/css/pages/about-us.css
• themes/beaver/assets/css/pages/careers.css
• themes/beaver/assets/css/pages/homepage.css
• themes/beaver/assets/css/pages/services.css
• themes/beaver/layouts/home.html
• themes/beaver/layouts/page/about.html
• themes/beaver/layouts/page/careers.html
• themes/beaver/layouts/page/services.html
• themes/beaver/layouts/partials/assets/careers-css-resources.html
• themes/beaver/layouts/partials/assets/homepage-css-resources.html

💤 Files with no reviewable changes (3)

• themes/beaver/assets/css/pages/about-us.css
• themes/beaver/assets/css/pages/services.css
• themes/beaver/assets/css/pages/careers.css