From 07eb7daa4646b0183c06a246b4956526123a5468 Mon Sep 17 00:00:00 2001 From: "pranikatyagi35@gmail.com" Date: Thu, 21 May 2026 17:17:29 +0530 Subject: [PATCH 1/2] fix: improve blog typography (Issue #1594) --- src/css/custom.css | 146 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 146 insertions(+) diff --git a/src/css/custom.css b/src/css/custom.css index 1cfc23a9..c672cdf6 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -2026,3 +2026,149 @@ html[data-theme="dark"] { scrollbar-width: thin !important; scrollbar-color: #334155 transparent !important; } +/* ===== BLOG TYPOGRAPHY FIX (Issue #1594) ===== */ + +/* Main container */ +.theme-blog-post .markdown { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; + font-size: 18px; + line-height: 1.75; + color: #1f2937; + max-width: 750px; + margin: 0 auto; + padding: 0 1rem; +} + +/* Paragraphs */ +.theme-blog-post .markdown p { + font-size: 18px; + line-height: 1.75; + margin-bottom: 1.5rem; +} + +/* Headings */ +.theme-blog-post .markdown h1 { + font-size: 2.2rem; + font-weight: 700; + margin-bottom: 1rem; + line-height: 1.3; +} + +.theme-blog-post .markdown h2 { + font-size: 1.6rem; + font-weight: 600; + margin-top: 2.5rem; + margin-bottom: 1rem; + line-height: 1.4; +} + +.theme-blog-post .markdown h3 { + font-size: 1.3rem; + font-weight: 600; + margin-top: 2rem; + margin-bottom: 0.75rem; + line-height: 1.4; +} + +/* Lists */ +.theme-blog-post .markdown ul, +.theme-blog-post .markdown ol { + padding-left: 1.5rem; + margin-bottom: 1.5rem; +} + +.theme-blog-post .markdown li { + margin-bottom: 0.5rem; + line-height: 1.7; +} + +/* Links */ +.theme-blog-post .markdown a { + color: #2563eb; + text-decoration: none; +} + +.theme-blog-post .markdown a:hover { + text-decoration: underline; +} + +/* Blockquotes */ +.theme-blog-post .markdown blockquote { + border-left: 4px solid #e5e7eb; + padding-left: 1rem; + color: #4b5563; + margin: 1.5rem 0; + font-style: italic; +} + +/* Code blocks */ +.theme-blog-post .markdown pre { + border-radius: 8px; + padding: 1rem; + font-size: 14px; + overflow-x: auto; + margin: 1.5rem 0; +} + +.theme-blog-post .markdown code { + font-size: 14px; + background-color: rgba(0, 0, 0, 0.05); + padding: 2px 6px; + border-radius: 4px; +} + +/* Images */ +.theme-blog-post .markdown img { + border-radius: 10px; + margin: 1.5rem 0; + max-width: 100%; +} + +/* Tables */ +.theme-blog-post .markdown table { + width: 100%; + border-collapse: collapse; + margin: 1.5rem 0; +} + +.theme-blog-post .markdown th, +.theme-blog-post .markdown td { + border: 1px solid #e5e7eb; + padding: 0.75rem; + text-align: left; +} + +.theme-blog-post .markdown th { + background-color: #f9fafb; + font-weight: 600; +} + +/* Horizontal rule */ +.theme-blog-post .markdown hr { + border: none; + border-top: 1px solid #e5e7eb; + margin: 2rem 0; +} + +/* Dark mode */ +[data-theme="dark"] .theme-blog-post .markdown { + color: #e5e7eb; +} + +[data-theme="dark"] .theme-blog-post .markdown blockquote { + border-left: 4px solid #374151; + color: #9ca3af; +} + +[data-theme="dark"] .theme-blog-post .markdown code { + background-color: rgba(255, 255, 255, 0.1); +} + +[data-theme="dark"] .theme-blog-post .markdown th { + background-color: #1f2937; +} + +[data-theme="dark"] .theme-blog-post .markdown td, +[data-theme="dark"] .theme-blog-post .markdown th { + border-color: #374151; +} From 1cca2af229c8074f8c2ace44b844446f4b184956 Mon Sep 17 00:00:00 2001 From: "pranikatyagi35@gmail.com" Date: Thu, 21 May 2026 18:40:14 +0530 Subject: [PATCH 2/2] update blog typography --- src/css/custom.css | 146 ---------------------------------- src/pages/blogs/blogs-new.css | 7 +- src/pages/blogs/blogs.css | 28 ++++--- 3 files changed, 22 insertions(+), 159 deletions(-) diff --git a/src/css/custom.css b/src/css/custom.css index c672cdf6..1cfc23a9 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -2026,149 +2026,3 @@ html[data-theme="dark"] { scrollbar-width: thin !important; scrollbar-color: #334155 transparent !important; } -/* ===== BLOG TYPOGRAPHY FIX (Issue #1594) ===== */ - -/* Main container */ -.theme-blog-post .markdown { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; - font-size: 18px; - line-height: 1.75; - color: #1f2937; - max-width: 750px; - margin: 0 auto; - padding: 0 1rem; -} - -/* Paragraphs */ -.theme-blog-post .markdown p { - font-size: 18px; - line-height: 1.75; - margin-bottom: 1.5rem; -} - -/* Headings */ -.theme-blog-post .markdown h1 { - font-size: 2.2rem; - font-weight: 700; - margin-bottom: 1rem; - line-height: 1.3; -} - -.theme-blog-post .markdown h2 { - font-size: 1.6rem; - font-weight: 600; - margin-top: 2.5rem; - margin-bottom: 1rem; - line-height: 1.4; -} - -.theme-blog-post .markdown h3 { - font-size: 1.3rem; - font-weight: 600; - margin-top: 2rem; - margin-bottom: 0.75rem; - line-height: 1.4; -} - -/* Lists */ -.theme-blog-post .markdown ul, -.theme-blog-post .markdown ol { - padding-left: 1.5rem; - margin-bottom: 1.5rem; -} - -.theme-blog-post .markdown li { - margin-bottom: 0.5rem; - line-height: 1.7; -} - -/* Links */ -.theme-blog-post .markdown a { - color: #2563eb; - text-decoration: none; -} - -.theme-blog-post .markdown a:hover { - text-decoration: underline; -} - -/* Blockquotes */ -.theme-blog-post .markdown blockquote { - border-left: 4px solid #e5e7eb; - padding-left: 1rem; - color: #4b5563; - margin: 1.5rem 0; - font-style: italic; -} - -/* Code blocks */ -.theme-blog-post .markdown pre { - border-radius: 8px; - padding: 1rem; - font-size: 14px; - overflow-x: auto; - margin: 1.5rem 0; -} - -.theme-blog-post .markdown code { - font-size: 14px; - background-color: rgba(0, 0, 0, 0.05); - padding: 2px 6px; - border-radius: 4px; -} - -/* Images */ -.theme-blog-post .markdown img { - border-radius: 10px; - margin: 1.5rem 0; - max-width: 100%; -} - -/* Tables */ -.theme-blog-post .markdown table { - width: 100%; - border-collapse: collapse; - margin: 1.5rem 0; -} - -.theme-blog-post .markdown th, -.theme-blog-post .markdown td { - border: 1px solid #e5e7eb; - padding: 0.75rem; - text-align: left; -} - -.theme-blog-post .markdown th { - background-color: #f9fafb; - font-weight: 600; -} - -/* Horizontal rule */ -.theme-blog-post .markdown hr { - border: none; - border-top: 1px solid #e5e7eb; - margin: 2rem 0; -} - -/* Dark mode */ -[data-theme="dark"] .theme-blog-post .markdown { - color: #e5e7eb; -} - -[data-theme="dark"] .theme-blog-post .markdown blockquote { - border-left: 4px solid #374151; - color: #9ca3af; -} - -[data-theme="dark"] .theme-blog-post .markdown code { - background-color: rgba(255, 255, 255, 0.1); -} - -[data-theme="dark"] .theme-blog-post .markdown th { - background-color: #1f2937; -} - -[data-theme="dark"] .theme-blog-post .markdown td, -[data-theme="dark"] .theme-blog-post .markdown th { - border-color: #374151; -} diff --git a/src/pages/blogs/blogs-new.css b/src/pages/blogs/blogs-new.css index 2867b571..b2a1c158 100644 --- a/src/pages/blogs/blogs-new.css +++ b/src/pages/blogs/blogs-new.css @@ -790,6 +790,7 @@ background-image: linear-gradient(rgba(36, 37, 38, 0.95), rgba(36, 37, 38, 0.95)), linear-gradient(135deg, #6366f1, #a855f7, #ec4899); + border: 2px solid rgba(99,102,241,0.3); } @keyframes searchFloat { @@ -1464,6 +1465,7 @@ @media (min-width: 1200px) { .articles-grid { grid-template-columns: repeat(3, 1fr); + padding: 0; gap: 40px; max-width: 1400px; } @@ -2405,8 +2407,9 @@ /* Tablet and below - Stack sidebar on top */ @media (max-width: 991px) { .articles-container-wrapper { - flex-direction: column; - gap: 32px; + display: grid; + grid-template-columns: 280px 1fr; + gap: 40px; } .blog-sidebar { diff --git a/src/pages/blogs/blogs.css b/src/pages/blogs/blogs.css index 4aa0aebd..76ad521e 100644 --- a/src/pages/blogs/blogs.css +++ b/src/pages/blogs/blogs.css @@ -43,17 +43,19 @@ /* Dark Mode Variables - Using standardized colors */ [data-theme="dark"] { - --blog-text-primary: var(--dark-text-primary); - --blog-text-secondary: var(--dark-text-secondary); - --blog-text-muted: var(--dark-text-muted); - --blog-bg-primary: var(--dark-bg-primary); - --blog-bg-secondary: var(--dark-bg-secondary); - --blog-bg-card: var(--dark-card-bg); - --blog-border: var(--dark-border); - --blog-shadow: var(--dark-shadow); - --blog-shadow-lg: var(--dark-shadow-lg); + --blog-text-primary: var(--dark-text-primary, #f7fafc); + --blog-text-secondary: var(--dark-text-secondary, #cbd5e0); + --blog-text-muted: var(--dark-text-muted, #a0aec0); + + --blog-bg-primary: var(--dark-bg-primary, #0f172a); + --blog-bg-secondary: var(--dark-bg-secondary, #111827); + --blog-bg-card: var(--dark-card-bg, #1f2937); + + --blog-border: var(--dark-border, #2d3748); + + --blog-shadow: var(--dark-shadow, 0 4px 6px rgba(0,0,0,0.4)); + --blog-shadow-lg: var(--dark-shadow-lg, 0 20px 25px rgba(0,0,0,0.5)); --blog-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5); -} /* Global Styles */ * { @@ -605,13 +607,15 @@ body { } .blog-card-inner { + display: flex; + flex-direction: column; height: 100%; border-radius: var(--blog-radius-xl); overflow: hidden; background: var(--blog-bg-card); border: 1px solid var(--blog-border); transition: var(--blog-transition); - position: relative; + } .blog-card:hover .blog-card-inner { @@ -631,6 +635,7 @@ body { position: relative; height: 240px; overflow: hidden; + flex-shrink: 0; } .blog-card-image { @@ -695,6 +700,7 @@ body { height: calc(100% - 240px); display: flex; flex-direction: column; + flex: 1; } .blog-card-category {