feat: narrow blog reading column and add tracked CTA#989
Merged
Conversation
- Cap blog post content at 680px for more comfortable line length; YouTube embeds now match the content column since they're already 100%-width inside the wrapper. - Render the existing CallToAction block at the end of blog posts (matches the pattern on /for-teams, /pricing, /features) so readers see App Store and Teams trial CTAs. - Add a blog branch to CallToAction's getEventName so blog-sourced clicks fire as "CTA:+Blog+Bottom+-+Download" and "CTA:+Blog+Bottom+-+Trial" in Plausible, distinguishable from existing marketing-page events. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Slightly wider than the 680px body column so the heading keeps visual weight while sharing the same centered axis. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Title wrapper now uses the same 680px max-width as the body column and shares the same left edge when centered in the container, replacing the previously centered hero text. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Bullet and number markers in prose content now match the body text color, reducing visual noise in article lists. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
WordPress oEmbed hardcodes width/height attrs on the iframe (e.g. 500x281), so the wrapper stretches to the column but the iframe stays at its intrinsic size. Target the .wp-embed-aspect-16-9 wrapper to enforce a 16:9 aspect ratio and make the iframe fill it. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
List items were falling back to the default prose size while paragraphs used text-h6-sm with medium weight, creating a noticeable size drop inside articles. Apply the same size and weight to list items for a consistent reading rhythm. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
On the black page background, primary-blue inline code with the default prose backtick decorators reads as visually noisy. Replace with a muted rounded pill (bg-light + subtle border) and off-white text at 90% size, normal weight, no backticks. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The previous change applied the dark pill to every <code> element, which also hit the <code> inside <pre> blocks, giving every line of a code block its own pill background. Replace the prose-code: utilities with a :not(pre) > code selector so the pill targets inline code and leaves rendered code blocks to their own theme. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Zero the prose list-item top/bottom margin so consecutive bullets sit at the same vertical cadence as wrapped lines inside a single bullet, giving lists a consistent reading rhythm instead of a larger between-item gap. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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.
Summary
width: 100%inside the content wrapper.<CallToAction />block at the end of blog posts, matching the pattern already used on/for-teams,/pricing, and/features/*. The site footer (social icons, nav, terms) was already rendering viaBase.astro.CallToAction'sgetEventNameso blog-sourced clicks fire asCTA:+Blog+Bottom+-+DownloadandCTA:+Blog+Bottom+-+Trialin Plausible — distinguishable from existing marketing-page events so blog→App Store / Teams trial conversion is measurable separately.Not in this PR
style="color: …"on every span (currently thenordtheme). Astro-side CSS cannot cleanly override inline styles, so the fix is in WP admin — switch the default theme toone-dark-pro,github-dark-default, ordraculafor stronger token contrast.15-voiceover-navigator-pro-…) — WordPress-backed[slug].astroonly, as requested.Test plan
npm run devand open a post with a<Youtube />embed and fenced code block.CallToActionrenders (dark rounded card with "Download now" + "Start a 14-day Teams Trial"), followed by the usual site footer.plausible-event-name=CTA:+Blog+Bottom+-+Downloadandplausible-event-name=CTA:+Blog+Bottom+-+Trial./for-teamsand/pricing: their existing Plausible event names are unchanged (no regression in thegetEventNameswitch).px-6still applies); no horizontal scroll.npm run lint,npm run format:check,npm run typecheck,npm run buildall green locally.🤖 Generated with Claude Code