closes 101: cards improvements - #102
Conversation
prudhomm
commented
Jan 7, 2026
prudhomm
commented
- closes cards improvements #101
…; add lead and section background styles
✅ Deploy Preview for antora-ui-peppy-froyo-6a3edb ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull request overview
This PR implements a comprehensive set of styling and functionality improvements for card-based layouts in an Antora documentation site. The changes focus on enhancing visual presentation, adding new card categories, improving debugging capabilities, and introducing utility styles for complex page layouts.
Key changes:
- Enhanced attribute lookup logic in card helpers to support multiple naming patterns
- Added four new CSS modules for specialized styling (tables, team pages, section backgrounds, and lead paragraphs)
- Extended card layout system with four new card categories (infos, resources, wps, highlights)
- Added responsive grid utilities and text styling utilities
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| src/helpers/get-page-cards-multi.js | Enhanced attribute lookup to check both 'page-' prefixed and non-prefixed attribute names in multiple locations; improved debug logging to display group titles |
| src/css/site.css | Added imports for four new CSS modules to integrate them into the build |
| src/css/team.css | New file providing circular photo styling, profile cards, and hover effects for team member pages |
| src/css/tables.css | New file with modern table styles including striped rows, clean borders, dark mode support, and publication-specific layouts |
| src/css/section-backgrounds.css | New file enabling full-width alternating background sections with card-style quoteblocks for long single-page layouts |
| src/css/lead.css | New file with extensive lead paragraph, hero block, and callout styles with comprehensive theming support including dark mode |
| src/css/grid.css | Extended with asymmetric grid layouts (sidebar-main patterns), exampleblock grid support, text alignment utilities, and color utilities |
| src/css/cards-layout.css | Added support for four new card categories (infos, resources, wps, highlights), updated grid parameters, and added group title styling |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| grid-template-columns: repeat(auto-fill, minmax(300px, 400px)); | ||
| gap: 1.5rem; | ||
| margin-top: 1.5em; | ||
| margin-bottom: 5em; | ||
| justify-content: start; |
There was a problem hiding this comment.
CSS grid specification inconsistency: The min and max values in the minmax() function create a narrow range (300px to 400px) which limits flexibility. Combined with justify-content: start, this may cause cards to not fill available space on wide screens. Consider either using a wider max value (e.g., minmax(300px, 1fr)) or removing justify-content: start to allow cards to stretch and fill available space more naturally.
| .doc .section-gray .quoteblock:hover, | ||
| .doc .section-white .quoteblock:hover { |
There was a problem hiding this comment.
Conflicting hover effects: This general hover effect on quoteblocks conflicts with the more specific hover effect defined in team.css (lines 51-55) which applies different transform values (translateY(-3px) vs translateY(-2px)) and box-shadow values. When both stylesheets are loaded, the specificity is the same, so the order of imports in site.css will determine which one wins. This can lead to inconsistent behavior. Consider using a more specific selector here, or align the hover values between the two files, or use a modifier class to differentiate team member cards from generic section cards.
| .doc .section-gray .quoteblock:hover, | |
| .doc .section-white .quoteblock:hover { | |
| .doc .section-gray .quoteblock:not([class*="team"]):hover, | |
| .doc .section-white .quoteblock:not([class*="team"]):hover { |
| grid-template-columns: 1fr 300px; | ||
| align-items: start; | ||
| } | ||
|
|
||
| .doc .exampleblock.grid-sidebar-main > .content { | ||
| grid-template-columns: 300px 1fr; |
There was a problem hiding this comment.
Inconsistent sidebar width values: The regular grid-main-sidebar and grid-sidebar-main classes use 280px for the sidebar, while the exampleblock variants use 300px. This inconsistency could lead to unexpected layout differences between regular grids and exampleblock grids when using the same semantic class name. Consider using consistent values (either 280px or 300px) across both implementations for maintainability.
| grid-template-columns: 1fr 300px; | |
| align-items: start; | |
| } | |
| .doc .exampleblock.grid-sidebar-main > .content { | |
| grid-template-columns: 300px 1fr; | |
| grid-template-columns: 1fr 280px; | |
| align-items: start; | |
| } | |
| .doc .exampleblock.grid-sidebar-main > .content { | |
| grid-template-columns: 280px 1fr; |
| /* Role/title styling (italic text) */ | ||
| .doc .section-gray .quoteblock .text-center em, | ||
| .doc .section-white .quoteblock .text-center em { | ||
| display: block; | ||
| color: #666; | ||
| font-size: 0.9rem; | ||
| margin-bottom: 0.25rem; | ||
| } | ||
|
|
||
| /* Institution styling */ | ||
| .doc .section-gray .quoteblock .text-center p:last-child, | ||
| .doc .section-white .quoteblock .text-center p:last-child { | ||
| color: #888; | ||
| font-size: 0.85rem; | ||
| } |
There was a problem hiding this comment.
Hardcoded color values in team.css lack dark mode support: Several color values like #666, #888, and #eee are hardcoded without corresponding dark mode overrides. This means in dark mode, these colors may not provide sufficient contrast or may look inconsistent with the rest of the UI. Consider adding dark mode support using html.is-dark selectors, similar to the pattern used in tables.css and lead.css.
| /* Hover effect for team cards with photos */ | ||
| .doc .section-gray .quoteblock:has(img):hover, | ||
| .doc .section-white .quoteblock:has(img):hover { |
There was a problem hiding this comment.
Browser compatibility concern with :has() selector: The :has() pseudo-class selector is used here but has limited browser support - it's not supported in Firefox versions before 121 (December 2023). Consider either documenting this requirement, providing a fallback style, or using a different approach that doesn't rely on :has() for better browser compatibility.
| /* Hover effect for team cards with photos */ | |
| .doc .section-gray .quoteblock:has(img):hover, | |
| .doc .section-white .quoteblock:has(img):hover { | |
| /* Hover effect for team cards */ | |
| .doc .section-gray .quoteblock:hover, | |
| .doc .section-white .quoteblock:hover { |
| // Note: Antora strips the 'page-' prefix when storing page attributes | ||
| // So :page-cards-catalog-title: becomes page.attributes['cards-catalog-title'] |
There was a problem hiding this comment.
Incomplete comment about Antora attribute behavior: The comment states that "Antora strips the 'page-' prefix when storing page attributes", but the code actually checks both with and without the prefix in BOTH asciidoc.attributes and attributes properties. Looking at the patterns elsewhere in this same file (lines 34-37, 48-51) and other helpers, it appears that asciidoc.attributes preserves the full attribute name including 'page-' prefix, while attributes may have it stripped. The comment should be clarified to accurately reflect that both locations (asciidoc.attributes and attributes) are checked with both naming patterns (with and without 'page-' prefix) to handle all possible cases.
| // Note: Antora strips the 'page-' prefix when storing page attributes | |
| // So :page-cards-catalog-title: becomes page.attributes['cards-catalog-title'] | |
| // Antora may store page attributes with or without the 'page-' prefix depending on context. | |
| // In practice, asciidoc.attributes often preserves the full name (e.g. 'page-cards-X-title'), | |
| // while attributes may have the prefix stripped (e.g. 'cards-X-title'), so we check both forms | |
| // in both locations to handle all cases. |
