Skip to content

Commit 64fc99b

Browse files
CopilotCopilot
authored
Improve blog post page typography, spacing and color to match professional 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
1 parent 082297b commit 64fc99b

4 files changed

Lines changed: 69 additions & 54 deletions

File tree

‎docusaurus.config.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,13 @@ const config: Config = {
5959
},
6060
],
6161

62+
stylesheets: [
63+
{
64+
href: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap",
65+
type: "text/css",
66+
},
67+
],
68+
6269
i18n: {
6370
defaultLocale: "en",
6471
locales: ["en"],

‎src/css/custom.css‎

Lines changed: 53 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2512,26 +2512,42 @@ html[data-theme="dark"] {
25122512
}
25132513

25142514
.blog-post-page .markdown {
2515-
max-width: 100% !important;
2516-
font-size: 1.125rem !important;
2517-
line-height: 2rem !important;
2518-
color: rgb(75, 85, 99) !important;
2515+
max-width: 720px !important;
2516+
margin-left: auto !important;
2517+
margin-right: auto !important;
2518+
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
2519+
font-size: 1rem !important;
2520+
line-height: 1.75 !important;
2521+
color: #334155 !important;
25192522
}
25202523

25212524
html[data-theme="dark"] .blog-post-page .markdown {
25222525
color: rgb(209, 213, 219) !important;
25232526
}
25242527

25252528
.blog-post-page .markdown p {
2526-
margin-top: 1.25rem !important;
2527-
margin-bottom: 0.5rem !important;
2529+
margin-top: 0 !important;
2530+
margin-bottom: 1.5rem !important;
2531+
}
2532+
2533+
.blog-post-page .markdown h1 {
2534+
font-size: 2.5rem !important;
2535+
font-weight: 700 !important;
2536+
color: #0f172a !important;
2537+
margin-top: 2.5rem !important;
2538+
}
2539+
2540+
.blog-post-page .markdown h2 {
2541+
font-size: 1.5rem !important;
2542+
font-weight: 600 !important;
2543+
color: #1e293b !important;
2544+
margin-top: 2.5rem !important;
25282545
}
25292546

2530-
.blog-post-page .markdown h1,
2531-
.blog-post-page .markdown h2,
25322547
.blog-post-page .markdown h3,
25332548
.blog-post-page .markdown h4 {
2534-
color: #1F2937 !important;
2549+
color: #1e293b !important;
2550+
margin-top: 2rem !important;
25352551
}
25362552

25372553
html[data-theme="dark"] .blog-post-page .markdown h1,
@@ -2541,6 +2557,34 @@ html[data-theme="dark"] .blog-post-page .markdown h4 {
25412557
color: #D1D5DB !important;
25422558
}
25432559

2560+
/* Callout / Info block styling */
2561+
.blog-post-page .markdown .admonition,
2562+
.blog-post-page .markdown .alert {
2563+
border-left: 4px solid #3b82f6 !important;
2564+
background: #eff6ff !important;
2565+
font-size: inherit !important;
2566+
}
2567+
2568+
html[data-theme="dark"] .blog-post-page .markdown .admonition,
2569+
html[data-theme="dark"] .blog-post-page .markdown .alert {
2570+
background: rgba(59, 130, 246, 0.1) !important;
2571+
}
2572+
2573+
/* Blog post page title (H1 rendered by Docusaurus header, outside .markdown) */
2574+
.blog-post-page article header h1,
2575+
.blog-post-page article header h2[itemprop="headline"] {
2576+
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
2577+
font-size: 2.5rem !important;
2578+
font-weight: 700 !important;
2579+
color: #0f172a !important;
2580+
line-height: 1.3 !important;
2581+
}
2582+
2583+
html[data-theme="dark"] .blog-post-page article header h1,
2584+
html[data-theme="dark"] .blog-post-page article header h2[itemprop="headline"] {
2585+
color: #f1f5f9 !important;
2586+
}
2587+
25442588
/* ── Large desktop (≥1400px) — wider content ── */
25452589
@media (min-width: 1400px) {
25462590
.blog-wrapper .container>.row>.col.col--3 {

‎src/theme/BlogPostItem/Header/index.tsx‎

Lines changed: 1 addition & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -12,24 +12,6 @@ import styles from "./styles.module.css";
1212

1313
type Props = WrapperProps<typeof BlogPostItemHeaderType>;
1414

15-
const TAG_COLORS = [
16-
{ dot: "#f59e0b", border: "#fde68a", bg: "#fffbeb", text: "#92400e" },
17-
{ dot: "#6366f1", border: "#c7d2fe", bg: "#eef2ff", text: "#3730a3" },
18-
{ dot: "#ec4899", border: "#fbcfe8", bg: "#fdf2f8", text: "#9d174d" },
19-
{ dot: "#10b981", border: "#a7f3d0", bg: "#ecfdf5", text: "#065f46" },
20-
{ dot: "#f97316", border: "#fed7aa", bg: "#fff7ed", text: "#9a3412" },
21-
{ dot: "#8b5cf6", border: "#ddd6fe", bg: "#f5f3ff", text: "#5b21b6" },
22-
{ dot: "#14b8a6", border: "#99f6e4", bg: "#f0fdfa", text: "#134e4a" },
23-
{ dot: "#ef4444", border: "#fecaca", bg: "#fef2f2", text: "#991b1b" },
24-
];
25-
26-
function tagColor(label: string) {
27-
let hash = 0;
28-
for (let i = 0; i < label.length; i++) {
29-
hash = (hash * 31 + label.charCodeAt(i)) & 0xffff;
30-
}
31-
return TAG_COLORS[hash % TAG_COLORS.length];
32-
}
3315

3416
function getGitHubHandle(author: { key?: string; url?: string }): string | undefined {
3517
if (author.url && /github\.com\//i.test(author.url)) {
@@ -180,25 +162,15 @@ export default function BlogPostItemHeaderWrapper(props: Props): JSX.Element {
180162
</span>
181163
</div>
182164

183-
{/* Colored tag pills */}
165+
{/* Unified tag pills */}
184166
{tags.length > 0 && (
185167
<div className={styles.tagsRow} aria-label="Tags">
186168
{tags.map((tag) => {
187-
const c = tagColor(tag);
188169
return (
189170
<span
190171
key={tag}
191172
className={styles.tag}
192-
style={
193-
{
194-
"--tag-dot": c.dot,
195-
"--tag-border": c.border,
196-
"--tag-bg": c.bg,
197-
"--tag-text": c.text,
198-
} as React.CSSProperties
199-
}
200173
>
201-
<span className={styles.tagDot} aria-hidden="true" />
202174
{tag}
203175
</span>
204176
);

‎src/theme/BlogPostItem/Header/styles.module.css‎

Lines changed: 8 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -120,27 +120,19 @@
120120
.tag {
121121
display: inline-flex;
122122
align-items: center;
123-
gap: 0.35rem;
124-
padding: 3px 10px 3px 8px;
125-
border-radius: 20px;
126-
font-size: 0.8rem;
123+
padding: 3px 10px;
124+
border-radius: 9999px;
125+
font-size: 0.75rem;
127126
font-weight: 500;
128-
background: var(--tag-bg);
129-
color: var(--tag-text);
130-
border: 1px solid var(--tag-border);
127+
background: #f1f5f9;
128+
color: #475569;
129+
border: none;
131130
white-space: nowrap;
132131
}
133132

134-
.tagDot {
135-
width: 6px;
136-
height: 6px;
137-
border-radius: 50%;
138-
background: var(--tag-dot);
139-
flex-shrink: 0;
140-
}
141-
142133
[data-theme="dark"] .tag {
143-
opacity: 0.85;
134+
background: #334155;
135+
color: #cbd5e1;
144136
}
145137

146138
@media (max-width: 480px) {

0 commit comments

Comments
 (0)