Improve Blog Post Page Typography, Spacing and Color to Match Professional Reading Standards#1805
Merged
Merged
Conversation
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Closed
7 tasks
…ional standards - Import Inter font from Google Fonts via stylesheets config - Set blog post body font to Inter, 16px (1rem), line-height 1.75 - Change body text color from near-black to #334155 (slate gray) - Constrain article prose max-width to 720px, centered - Style H1: 2.5rem, font-weight 700, color #0f172a - Style H2: 1.5rem, font-weight 600, color #1e293b, margin-top 2.5rem - Set paragraph spacing to margin-bottom 1.5rem - Style callout blocks with 4px solid #3b82f6 border, #eff6ff background - Unify tag pills to neutral style: #f1f5f9 bg, #475569 color, 9999px radius - Remove rainbow TAG_COLORS and tagColor function from blog post header - Add dark mode support for all new styles
Copilot
AI
changed the title
[WIP] Improve blog post page typography and spacing for better readability
Improve Blog Post Page Typography, Spacing and Color to Match Professional Reading Standards
May 31, 2026
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.
Description
Blog post pages had poor readability due to tight line-height, full-black text on white, unconstrained content width, and visually noisy rainbow tag pills. This PR aligns the blog post reading experience with professional technical blogs (reference: oneuptime.com/blog).
Type of Change
Changes Made
Typography & Color (
src/css/custom.css)#334155#0f172a#1e293b/ margin-top 2.5remContent Width
max-width: 720pxcenteredCallout Blocks
border-left: 4px solid #3b82f6,background: #eff6ffTag Pills (
src/theme/BlogPostItem/Header/)#f1f5f9bg,#475569text,border-radius: 9999px, 0.75remTAG_COLORSarray andtagColor()hash functionFont Loading (
docusaurus.config.ts)stylesheetsconfig withdisplay=swapAll changes include dark mode variants. Only blog post page is affected — navbar, footer, homepage, and blog listing pages are untouched.
Dependencies
Checklist
npm run buildand attached screenshot(s) in this PR.