Fixed responsive styles for CTA card frontend rendering#22210
Fixed responsive styles for CTA card frontend rendering#22210
Conversation
Ref https://linear.app/ghost/issue/PLG-337/create-cta-card-web-design - The minimal layout version now changes to a column layout on mobile - The sponsor label color now inherits the theme color so that it works on any background color - The spacing is adjusted for mobile
WalkthroughThe pull request introduces several styling updates to the CTA card CSS file. It modifies the background color of the Possibly related PRs
📜 Recent review detailsConfiguration used: CodeRabbit UI ⛔ Files ignored due to path filters (3)
📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
⏰ Context from checks skipped due to timeout of 90000ms (1)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
ghost/core/core/frontend/src/cards/css/cta.css (2)
53-54: Addition oftext-wrap: pretty;to Sponsor Label
The propertytext-wrap: pretty;has been added to.kg-cta-sponsor-label, likely intended to improve text wrapping aesthetics. Since this property is still experimental, please verify browser support and consider adding a fallback if necessary.
67-71: New Color Mix Rule for Nested Sponsor Label Text
A new rule for.kg-cta-sponsor-label p span:not(a span)leverages the CSScolor-mixfunction to blendcurrentColorwith transparency. This enhances visual integration, but please verify that thecolor-mix(in srgb, currentColor 40%, transparent)function is supported by all target browsers or consider adding a fallback.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
ghost/core/core/frontend/src/cards/css/cta.css(5 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (6)
- GitHub Check: Regression tests (Node 20.11.1, sqlite3)
- GitHub Check: Database tests (Node 20.11.1, sqlite3)
- GitHub Check: Regression tests (Node 20.11.1, mysql8)
- GitHub Check: Database tests (Node 20.11.1, mysql8)
- GitHub Check: Ghost-CLI tests
- GitHub Check: Database tests (Node 18.12.1, mysql8)
🔇 Additional comments (8)
ghost/core/core/frontend/src/cards/css/cta.css (8)
12-14: CTA Background Color Update
The background color for.kg-cta-bg-greyhas been updated torgba(151, 163, 175, 0.14), which gives the card a refreshed tone. Please verify that this new color harmonizes well with the overall theme and design system.
56-60: Responsive Spacing for Sponsor Label
The media query for screens with a maximum width of 600px now adjusts the margin and padding for.kg-cta-sponsor-label. This change should enhance readability and layout consistency on mobile devices.
72-74: Consistent Color Inheritance for Sponsor Label Links
The color for.kg-cta-sponsor-label ais now set tocurrentColor, which ensures that link colors inherit from their parent element. This change contributes to a consistent theming approach across the CTA card.
82-87: Improved Mobile Spacing for CTA Content
A media query targeting screens ≤600px adjusts the padding and gap of.kg-cta-contentto2remeach. This update enhances content spacing and overall mobile responsiveness.
94-98: Responsive Padding for.kg-cta-bg-none .kg-cta-content
The media query now sets the padding of.kg-cta-bg-none .kg-cta-contentto2rem 0on mobile devices, which should provide a cleaner and more cohesive layout.
104-109: Responsive Layout for Minimal CTA Content
For screens ≤600px, the.kg-cta-minimal .kg-cta-contentis adjusted to a column layout with a gap of1.6rem. This change aligns with responsive design best practices by ensuring content stacks neatly on smaller devices.
121-125: Adjusted Gap in Inner CTA Content for Mobile
The media query for.kg-cta-content-innerreduces the gap to2remon mobile, which helps maintain a balanced vertical spacing within the card.
142-147: Reduced Image Size for Minimal CTA on Mobile
Within a media query for screens with a maximum width of 600px, the image in.kg-cta-minimal .kg-cta-image-containeris resized to52pxby52px. This reduction is likely intended to maintain visual proportionality in compact layouts. Please ensure that the smaller images remain clear and effective on mobile devices.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
ghost/email-service/lib/email-templates/partials/styles.hbs (1)
1057-1060: Document the reason for style duplication.The styles here are duplicated from the button container styles above. While this might be necessary for email client compatibility, it would be helpful to add a comment explaining why this duplication is needed.
Add a comment explaining the necessity of style duplication:
+/* Duplicate styles from container for email client compatibility */ .kg-cta-immersive a.kg-cta-button.kg-style-accent { background-color: {{accentColor}} !important; color: #fff !important; }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
ghost/email-service/lib/email-templates/partials/styles.hbs(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (10)
- GitHub Check: Ghost-CLI tests
- GitHub Check: Regression tests (Node 20.11.1, sqlite3)
- GitHub Check: Database tests (Node 20.11.1, sqlite3)
- GitHub Check: Regression tests (Node 20.11.1, mysql8)
- GitHub Check: Database tests (Node 20.11.1, mysql8)
- GitHub Check: Database tests (Node 18.12.1, mysql8)
- GitHub Check: Unit tests (Node 20.11.1)
- GitHub Check: Unit tests (Node 18.12.1)
- GitHub Check: Lint
- GitHub Check: i18n
🔇 Additional comments (2)
ghost/email-service/lib/email-templates/partials/styles.hbs (2)
1052-1055: LGTM! Consistent implementation with minimal CTA styles.The accent style for the immersive CTA button container follows the same pattern as the minimal CTA styles, which is good for maintainability.
1031-1034:Details
✅ Verification successful
LGTM! Ensure color contrast meets WCAG guidelines.
The accent style for minimal CTA buttons is well-implemented. The use of
!importantis appropriate for email templates.Please verify that the accent color provides sufficient contrast with white text using the following script:
🏁 Script executed:
#!/bin/bash # Description: Check color contrast ratio between accent color and white text. # Note: This script assumes the accent color is defined in a config file. # Search for accent color definition rg -A 1 'accentColor.*=.*#[0-9a-fA-F]{6}'Length of output: 11393
Approval: Minimal CTA accent style verified.
The accent style for minimal CTA buttons inghost/email-service/lib/email-templates/partials/styles.hbs(lines 1031–1034) is well-implemented. Using{{accentColor}}for the background and#ffffor the text provides excellent contrast—as confirmed by the configuration, which defaults to#15212Ain multiple email templates. This strong contrast should satisfy WCAG guidelines, and the use of!importantis appropriate for email client consistency.
Ref https://linear.app/ghost/issue/PLG-336/create-cta-card-email-design - Made it more Outlook-proof and fixed minor bugs
1 participant
Ref https://linear.app/ghost/issue/PLG-337/create-cta-card-web-design