From bf2237469a2fca4c2f7a57c6805694ece0d7af40 Mon Sep 17 00:00:00 2001
From: alabulei1 <vivian.xiage@gmail.com>
Date: Tue, 14 Jul 2026 02:02:45 +0800
Subject: [PATCH] fix(blog): scope top-nav styles so the article TOC isn't a
 flex row

The global `nav { display:flex; height:72px; ... }` rule targeted every
<nav>, including the right-sidebar table of contents (<nav class="toc">).
That forced the TOC into a 72px flex row, collapsing its heading links
into 1-character-wide columns. Scope the rule to `body > nav` (the top
bar) so `.toc` stays a normal block and its links stack vertically.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/layouts/WritingLayout.astro | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/layouts/WritingLayout.astro b/src/layouts/WritingLayout.astro
index f3ded66..1c62020 100644
--- a/src/layouts/WritingLayout.astro
+++ b/src/layouts/WritingLayout.astro
@@ -70,7 +70,7 @@ const dateText = new Intl.DateTimeFormat(lang === 'zh' ? 'zh-CN' : lang === 'ja'
     html, body { max-width: 100%; overflow-x: clip; }
     body { background:#faf9f5; color:#18181b; font-family: Georgia, serif; margin:0; }
     a { color:#2563EB; overflow-wrap:anywhere; }
-    nav { height:72px; display:flex; align-items:center; justify-content:space-between; max-width:1200px; margin:0 auto; padding:0 24px; font-family:system-ui,sans-serif; }
+    body > nav { height:72px; display:flex; align-items:center; justify-content:space-between; max-width:1200px; margin:0 auto; padding:0 24px; font-family:system-ui,sans-serif; }
     .brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:#18181b; font-weight:700; }
     .nav-actions { display:flex; align-items:center; gap:16px; }
     .page-grid { display:grid; grid-template-columns:200px minmax(0,1fr) 200px; gap:48px; max-width:1200px; margin:0 auto; padding:0 24px; align-items:start; }
@@ -92,7 +92,7 @@ const dateText = new Intl.DateTimeFormat(lang === 'zh' ? 'zh-CN' : lang === 'ja'
     .prose table { display:block; max-width:100%; overflow-x:auto; border-collapse:collapse; }
     footer { max-width:1200px; margin:0 auto; padding:48px 24px; display:flex; justify-content:space-between; gap:24px; font-family:system-ui,sans-serif; color:#71717a; }
     @media (max-width:1024px){ .page-grid{grid-template-columns:1fr; max-width:760px;} .sidebar-left,.sidebar-right{display:none;} }
-    @media (max-width:640px){ nav{padding:0 16px;} .nav-hide-sm{display:none;} .article-header{padding-top:48px;} .prose{font-size:17px;} footer{flex-direction:column;} }
+    @media (max-width:640px){ body > nav{padding:0 16px;} .nav-hide-sm{display:none;} .article-header{padding-top:48px;} .prose{font-size:17px;} footer{flex-direction:column;} }
   </style>
 </head>
 <body>
