Merge pull request #1621 from Adez017/patch-1

An Experimental fix for the blog layout structure

Author: sanjay-kv

src/css/custom.css

@@ -2040,3 +2040,144 @@ html[data-theme="dark"] {
   scrollbar-width: thin !important;
   scrollbar-color: #334155 transparent !important;
 }
+
+/* =====================================================
+   SECTION 15: BLOG POST PAGE — CENTER + TOC FIX
+   
+   SAFE: Only targets .blog-wrapper (individual post page)
+   Remove any previous SECTION 15 block before adding this.
+   ===================================================== */
+
+/* Full width container — no artificial max-width cutting space */
+.blog-wrapper .container {
+  max-width: 100% !important;
+  width: 100% !important;
+  padding-left: 1rem !important;
+  padding-right: 1rem !important;
+}
+
+/* Row: full width flex, no gaps, sidebars hug the edges */
+.blog-wrapper .container>.row {
+  display: flex !important;
+  flex-wrap: nowrap !important;
+  align-items: flex-start !important;
+  width: 100% !important;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+/* LEFT sidebar — Recent Posts, fixed width, left edge */
+.blog-wrapper .container>.row>.col.col--3 {
+  flex: 0 0 240px !important;
+  width: 240px !important;
+  max-width: 240px !important;
+  padding-left: 0.5rem !important;
+  padding-right: 1.5rem !important;
+}
+
+/* CENTER content — takes all remaining space between sidebars */
+.blog-wrapper .container>.row>.col:not(.col--2):not(.col--3) {
+  flex: 1 1 auto !important;
+  min-width: 0 !important;
+  max-width: 100% !important;
+  /* Center the text content within this column */
+  padding-left: 3rem !important;
+  padding-right: 3rem !important;
+}
+
+/* RIGHT sidebar — TOC, wider so text is readable, right edge */
+.blog-wrapper .container>.row>.col.col--2 {
+  flex: 0 0 280px !important;
+  /* ← expanded from ~220px to 280px */
+  width: 280px !important;
+  max-width: 280px !important;
+  padding-left: 1rem !important;
+  padding-right: 0.5rem !important;
+}
+
+/* TOC links: allow text to wrap properly instead of squishing */
+.blog-wrapper .table-of-contents__link {
+  white-space: normal !important;
+  word-break: break-word !important;
+  line-height: 1.4 !important;
+  display: block !important;
+  padding: 2px 0 !important;
+  font-size: 0.85rem !important;
+}
+
+/* TOC heading items — slightly bolder for hierarchy */
+.blog-wrapper .table-of-contents li>.table-of-contents__link {
+  font-size: 0.875rem !important;
+}
+
+/* Comfortable reading styles */
+.blog-post-page .markdown {
+  max-width: 100% !important;
+  line-height: 1.8 !important;
+}
+
+/* ── Large desktop (≥1400px) ── */
+@media (min-width: 1400px) {
+  .blog-wrapper .container>.row>.col.col--3 {
+    flex: 0 0 260px !important;
+    width: 260px !important;
+    max-width: 260px !important;
+  }
+
+  .blog-wrapper .container>.row>.col.col--2 {
+    flex: 0 0 300px !important;
+    width: 300px !important;
+    max-width: 300px !important;
+  }
+
+  .blog-wrapper .container>.row>.col:not(.col--2):not(.col--3) {
+    padding-left: 4rem !important;
+    padding-right: 4rem !important;
+  }
+}
+
+/* ── Tablet (997px–1199px) ── */
+@media (max-width: 1199px) and (min-width: 997px) {
+  .blog-wrapper .container>.row>.col.col--3 {
+    flex: 0 0 200px !important;
+    width: 200px !important;
+    max-width: 200px !important;
+  }
+
+  .blog-wrapper .container>.row>.col.col--2 {
+    flex: 0 0 220px !important;
+    width: 220px !important;
+    max-width: 220px !important;
+  }
+
+  .blog-wrapper .container>.row>.col:not(.col--2):not(.col--3) {
+    padding-left: 2rem !important;
+    padding-right: 2rem !important;
+  }
+}
+
+/* ── Mobile (≤996px): stack columns naturally ── */
+@media (max-width: 996px) {
+  .blog-wrapper .container {
+    padding-left: 1rem !important;
+    padding-right: 1rem !important;
+  }
+
+  .blog-wrapper .container>.row {
+    flex-direction: column !important;
+  }
+
+  .blog-wrapper .container>.row>.col.col--3,
+  .blog-wrapper .container>.row>.col.col--2,
+  .blog-wrapper .container>.row>.col:not(.col--2):not(.col--3) {
+    flex: 1 1 auto !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+}
+
+/* =====================================================
+   END SECTION 15
+   ===================================================== */