From 1fe6450c7b5b226ea3e450c3bcaf3ba5ade350af Mon Sep 17 00:00:00 2001 From: jiacai2050 Date: Tue, 13 Jan 2026 16:19:32 +0800 Subject: [PATCH 1/2] feat: move TOC to sticky right sidebar for better readability - Implement side-by-side layout for content and TOC using Flexbox. - Make TOC sticky on large screens (>= 1200px). - Update template inheritance to use id='content' for Zine compatibility. - Increase page max-width on wide screens to accommodate sidebar. --- assets/style.css | 40 +++++++++++++++++++++++++++++++++ layouts/learn.shtml | 34 ++++++++++++++++------------ layouts/monthly.shtml | 4 ++-- layouts/page.shtml | 4 ++-- layouts/post.shtml | 4 ++-- layouts/templates/content.shtml | 34 ++++++++++++++++------------ 6 files changed, 86 insertions(+), 34 deletions(-) diff --git a/assets/style.css b/assets/style.css index 5cbeec4..4cf1f94 100644 --- a/assets/style.css +++ b/assets/style.css @@ -236,3 +236,43 @@ html { h1{ margin-bottom: 0; } + +/* Sidebar Layout */ +.content-wrapper { + display: flex; + flex-direction: column; +} + +@media screen and (min-width: 1200px) { + body { + max-width: 80vw; + } + + .content-wrapper { + flex-direction: row; + align-items: flex-start; + gap: 2rem; + } + + .main-content { + flex: 1; + min-width: 0; + } + + .toc-sidebar { + width: 250px; + flex-shrink: 0; + order: 2; + margin-top: 20px; + border-left: 1px solid var(--border); + padding-left: 1rem; + font-size: 0.9em; + } + + .toc-sticky { + position: sticky; + top: 2rem; + max-height: calc(100vh - 4rem); + overflow-y: auto; + } +} \ No newline at end of file diff --git a/layouts/learn.shtml b/layouts/learn.shtml index 70ae568..5e5789c 100644 --- a/layouts/learn.shtml +++ b/layouts/learn.shtml @@ -3,21 +3,27 @@

-
-

Table of Contents

-
-
-
-
-
- - - +
+
+
+

TOC

+
+
-
- - - +
+
+
+
+ + + +
+
+ + + +
+
diff --git a/layouts/monthly.shtml b/layouts/monthly.shtml index 06a3d9c..981189b 100644 --- a/layouts/monthly.shtml +++ b/layouts/monthly.shtml @@ -1,6 +1,6 @@ - +
- \ No newline at end of file +
\ No newline at end of file diff --git a/layouts/page.shtml b/layouts/page.shtml index 06a3d9c..981189b 100644 --- a/layouts/page.shtml +++ b/layouts/page.shtml @@ -1,6 +1,6 @@ - +
- \ No newline at end of file +
\ No newline at end of file diff --git a/layouts/post.shtml b/layouts/post.shtml index af26f52..2dcd8d5 100644 --- a/layouts/post.shtml +++ b/layouts/post.shtml @@ -14,6 +14,6 @@ - +
- +
diff --git a/layouts/templates/content.shtml b/layouts/templates/content.shtml index 45c2603..7644cae 100644 --- a/layouts/templates/content.shtml +++ b/layouts/templates/content.shtml @@ -19,21 +19,27 @@ -
-

TOC

-
-
- -
-
- - - +
+
+
+

TOC

+
+
-
- - - +
+ +
+
+ + + +
+
+ + + +
+
From 0e87560973d98c7a0c8345fc6b8975a763449b5e Mon Sep 17 00:00:00 2001 From: jiacai2050 Date: Tue, 13 Jan 2026 16:34:33 +0800 Subject: [PATCH 2/2] style: improve TOC vertical centering and sticky behavior - Change content-wrapper align-items to stretch to ensure sidebar height matches content. - Remove top margin from toc-sidebar to improve alignment. - Use top: 50% and transform: translateY(-50%) for precise vertical centering of sticky TOC. --- assets/style.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/assets/style.css b/assets/style.css index 4cf1f94..c5fa064 100644 --- a/assets/style.css +++ b/assets/style.css @@ -250,7 +250,7 @@ h1{ .content-wrapper { flex-direction: row; - align-items: flex-start; + align-items: stretch; gap: 2rem; } @@ -263,7 +263,6 @@ h1{ width: 250px; flex-shrink: 0; order: 2; - margin-top: 20px; border-left: 1px solid var(--border); padding-left: 1rem; font-size: 0.9em; @@ -271,8 +270,9 @@ h1{ .toc-sticky { position: sticky; - top: 2rem; - max-height: calc(100vh - 4rem); + top: 50%; + transform: translateY(-50%); + max-height: 90vh; overflow-y: auto; } } \ No newline at end of file