Merge pull request #1805 from recodehive/copilot/improve-blog-post-typography

Improve Blog Post Page Typography, Spacing and Color to Match Professional Reading Standards

Author: sanjay-kv

docusaurus.config.ts

@@ -59,6 +59,13 @@ const config: Config = {
     },
   ],
 
+  stylesheets: [
+    {
+      href: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap",
+      type: "text/css",
+    },
+  ],
+
   i18n: {
     defaultLocale: "en",
     locales: ["en"],

src/css/custom.css

@@ -2512,26 +2512,42 @@ html[data-theme="dark"] {
 }
 
 .blog-post-page .markdown {
-  max-width: 100% !important;
-  font-size: 1.125rem !important;
-  line-height: 2rem !important;
-  color: rgb(75, 85, 99) !important;
+  max-width: 720px !important;
+  margin-left: auto !important;
+  margin-right: auto !important;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
+  font-size: 1rem !important;
+  line-height: 1.75 !important;
+  color: #334155 !important;
 }
 
 html[data-theme="dark"] .blog-post-page .markdown {
   color: rgb(209, 213, 219) !important;
 }
 
 .blog-post-page .markdown p {
-  margin-top: 1.25rem !important;
-  margin-bottom: 0.5rem !important;
+  margin-top: 0 !important;
+  margin-bottom: 1.5rem !important;
+}
+
+.blog-post-page .markdown h1 {
+  font-size: 2.5rem !important;
+  font-weight: 700 !important;
+  color: #0f172a !important;
+  margin-top: 2.5rem !important;
+}
+
+.blog-post-page .markdown h2 {
+  font-size: 1.5rem !important;
+  font-weight: 600 !important;
+  color: #1e293b !important;
+  margin-top: 2.5rem !important;
 }
 
-.blog-post-page .markdown h1,
-.blog-post-page .markdown h2,
 .blog-post-page .markdown h3,
 .blog-post-page .markdown h4 {
-  color: #1F2937 !important;
+  color: #1e293b !important;
+  margin-top: 2rem !important;
 }
 
 html[data-theme="dark"] .blog-post-page .markdown h1,
@@ -2541,6 +2557,34 @@ html[data-theme="dark"] .blog-post-page .markdown h4 {
   color: #D1D5DB !important;
 }
 
+/* Callout / Info block styling */
+.blog-post-page .markdown .admonition,
+.blog-post-page .markdown .alert {
+  border-left: 4px solid #3b82f6 !important;
+  background: #eff6ff !important;
+  font-size: inherit !important;
+}
+
+html[data-theme="dark"] .blog-post-page .markdown .admonition,
+html[data-theme="dark"] .blog-post-page .markdown .alert {
+  background: rgba(59, 130, 246, 0.1) !important;
+}
+
+/* Blog post page title (H1 rendered by Docusaurus header, outside .markdown) */
+.blog-post-page article header h1,
+.blog-post-page article header h2[itemprop="headline"] {
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
+  font-size: 2.5rem !important;
+  font-weight: 700 !important;
+  color: #0f172a !important;
+  line-height: 1.3 !important;
+}
+
+html[data-theme="dark"] .blog-post-page article header h1,
+html[data-theme="dark"] .blog-post-page article header h2[itemprop="headline"] {
+  color: #f1f5f9 !important;
+}
+
 /* ── Large desktop (≥1400px) — wider content ── */
 @media (min-width: 1400px) {
   .blog-wrapper .container>.row>.col.col--3 {

src/theme/BlogPostItem/Header/index.tsx

@@ -12,24 +12,6 @@ import styles from "./styles.module.css";
 
 type Props = WrapperProps<typeof BlogPostItemHeaderType>;
 
-const TAG_COLORS = [
-  { dot: "#f59e0b", border: "#fde68a", bg: "#fffbeb", text: "#92400e" },
-  { dot: "#6366f1", border: "#c7d2fe", bg: "#eef2ff", text: "#3730a3" },
-  { dot: "#ec4899", border: "#fbcfe8", bg: "#fdf2f8", text: "#9d174d" },
-  { dot: "#10b981", border: "#a7f3d0", bg: "#ecfdf5", text: "#065f46" },
-  { dot: "#f97316", border: "#fed7aa", bg: "#fff7ed", text: "#9a3412" },
-  { dot: "#8b5cf6", border: "#ddd6fe", bg: "#f5f3ff", text: "#5b21b6" },
-  { dot: "#14b8a6", border: "#99f6e4", bg: "#f0fdfa", text: "#134e4a" },
-  { dot: "#ef4444", border: "#fecaca", bg: "#fef2f2", text: "#991b1b" },
-];
-
-function tagColor(label: string) {
-  let hash = 0;
-  for (let i = 0; i < label.length; i++) {
-    hash = (hash * 31 + label.charCodeAt(i)) & 0xffff;
-  }
-  return TAG_COLORS[hash % TAG_COLORS.length];
-}
 
 function getGitHubHandle(author: { key?: string; url?: string }): string | undefined {
   if (author.url && /github\.com\//i.test(author.url)) {
@@ -180,25 +162,15 @@ export default function BlogPostItemHeaderWrapper(props: Props): JSX.Element {
           </span>
         </div>
 
-        {/* Colored tag pills */}
+        {/* Unified tag pills */}
         {tags.length > 0 && (
           <div className={styles.tagsRow} aria-label="Tags">
             {tags.map((tag) => {
-              const c = tagColor(tag);
               return (
                 <span
                   key={tag}
                   className={styles.tag}
-                  style={
-                    {
-                      "--tag-dot": c.dot,
-                      "--tag-border": c.border,
-                      "--tag-bg": c.bg,
-                      "--tag-text": c.text,
-                    } as React.CSSProperties
-                  }
                 >
-                  <span className={styles.tagDot} aria-hidden="true" />
                   {tag}
                 </span>
               );

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

@@ -120,27 +120,19 @@
 .tag {
   display: inline-flex;
   align-items: center;
-  gap: 0.35rem;
-  padding: 3px 10px 3px 8px;
-  border-radius: 20px;
-  font-size: 0.8rem;
+  padding: 3px 10px;
+  border-radius: 9999px;
+  font-size: 0.75rem;
   font-weight: 500;
-  background: var(--tag-bg);
-  color: var(--tag-text);
-  border: 1px solid var(--tag-border);
+  background: #f1f5f9;
+  color: #475569;
+  border: none;
   white-space: nowrap;
 }
 
-.tagDot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--tag-dot);
-  flex-shrink: 0;
-}
-
 [data-theme="dark"] .tag {
-  opacity: 0.85;
+  background: #334155;
+  color: #cbd5e1;
 }
 
 @media (max-width: 480px) {