Merge pull request #28 from 42devops/fix/toc-right-floating-no-squeeze

fix: position TOC in right margin floating panel without squeezing post content

Author: iasonliu

_layouts/post.html

@@ -41,20 +41,18 @@ <h1 class="post-title">{{ page.title }}</h1>
     </div>
   </header>
 
-  <div class="post-layout">
-    <aside class="post-sidebar" id="post-sidebar">
-      <div class="toc-wrapper" id="toc-wrapper" style="display: none;">
-        <div class="toc-header">
-          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="21" x2="3" y1="6" y2="6"/><line x1="15" x2="3" y1="12" y2="12"/><line x1="17" x2="3" y1="18" y2="18"/></svg>
-          <span>Contents</span>
-        </div>
-        <ul class="toc-list" id="toc-list"></ul>
+  <aside class="post-sidebar" id="post-sidebar">
+    <div class="toc-wrapper" id="toc-wrapper" style="display: none;">
+      <div class="toc-header">
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="21" x2="3" y1="6" y2="6"/><line x1="15" x2="3" y1="12" y2="12"/><line x1="17" x2="3" y1="18" y2="18"/></svg>
+        <span>Contents</span>
       </div>
-    </aside>
-
-    <div class="post-content" id="post-content">
-      {{ content }}
+      <ul class="toc-list" id="toc-list"></ul>
     </div>
+  </aside>
+
+  <div class="post-content" id="post-content">
+    {{ content }}
   </div>
 </article>
 

css/screen.css

@@ -466,6 +466,7 @@ body {
 
 /* Post Detail Styling */
 article.post-detail {
+  position: relative;
   background: var(--bg-card);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-lg);
@@ -647,30 +648,21 @@ pre code {
   color: inherit;
 }
 
-/* Post Article Layout & Sticky TOC */
-.post-layout {
-  display: grid;
-  grid-template-columns: 220px 1fr;
-  gap: 2.5rem;
-  align-items: start;
+/* Post Article Sticky Floating TOC on Right Margin */
+.post-sidebar {
+  position: absolute;
+  top: 2.75rem;
+  left: calc(100% + 1.5rem);
+  width: 230px;
+  z-index: 80;
 }
 
-@media (max-width: 992px) {
-  .post-layout {
-    grid-template-columns: 1fr;
-  }
+@media (max-width: 1280px) {
   .post-sidebar {
-    display: none;
+    display: none !important;
   }
 }
 
-.post-sidebar {
-  position: sticky;
-  top: 90px;
-  max-height: calc(100vh - 120px);
-  overflow-y: auto;
-}
-
 .toc-wrapper {
   background: var(--bg-card);
   border: 1px solid var(--border-color);