WIP: Update

Signed-off-by: Khusika Dhamar Gusti <[email protected]>

Author: khusika

assets/css/_page/_single.scss

@@ -1,11 +1,11 @@
 @import "../_partial/_single/toc";
+@import '../_variables'; // Import theme variables to resolve the error.
 
 /* Add styles for the new Related Posts panel, matching the TOC */
 .related {
   position: absolute;
   padding: .5rem .5rem .5rem 1rem;
-  width: 240px;
-  visibility: hidden;
+  width: clamp(180px, 15vw, 280px);
   border-left: 3px solid $global-link-color;
 
   [theme=dark] & {
@@ -58,6 +58,24 @@
   }
 }
 
+.page-aside-left {
+  // Hide by default on all screens
+  display: none;
+}
+
+// This new media query controls the layout for screens 1200px and wider.
+@media (min-width: 1200px) {
+  .page-aside-left {
+    // Show the panel on wide screens
+    display: block;
+    position: absolute;
+    // Symmetrically position the panel to the left of the main content.
+    // This calculation is robust and uses the globally available CSS variable.
+    left: calc((100vw - var(--single-max-width)) / 2 - 280px - 1rem);
+    width: 280px;
+  }
+}
+
 /* Style for the inline "details" version to match the inline TOC */
 .details.related {
   .details-summary {

assets/js/theme.js

@@ -394,46 +394,42 @@ class Theme {
     }
 
     initRelated() {
-        const $relatedStatic = document.getElementById('related-static');
-        if (!$relatedStatic) return;
-
-        if (this.util.isTocStatic() || $relatedStatic.getAttribute('data-kept') === 'true') {
-            if (this._relatedOnScroll) this.scrollEventSet.delete(this._relatedOnScroll);
-            return;
-        }
-
         const $relatedAuto = document.getElementById('related-auto');
-        const $relatedContent = document.getElementById('related-content-static');
-        
-        if ($relatedContent && $relatedAuto) {
-            $relatedAuto.querySelector('.related-content').appendChild($relatedContent);
-        } else {
-            return;
+        if (!$relatedAuto) return;
+
+        const $relatedContentStatic = document.getElementById('related-content-static');
+        if ($relatedContentStatic) {
+            $relatedAuto.querySelector('.related-content').appendChild($relatedContentStatic);
         }
 
         const $toc = document.getElementById('toc-auto');
-        
-        if ($toc && getComputedStyle($toc).visibility !== 'hidden' && getComputedStyle($toc).display !== 'none') {
-            // Sychronize position with the TOC
-            const tocRect = $toc.getBoundingClientRect();
-            $relatedAuto.style.top = `${window.scrollY + tocRect.top}px`;
-            $relatedAuto.style.left = `20px`;
-            $relatedAuto.style.visibility = 'visible';
-        } else {
-            $relatedAuto.style.visibility = 'hidden';
-            return;
-        }
-        
-        const headerIsFixed = document.body.getAttribute('data-header-desktop') !== 'normal';
-        const headerHeight = document.getElementById('header-desktop').offsetHeight;
-        const TOP_SPACING = 20 + (headerIsFixed ? headerHeight : 0);
-        const minRelatedTop = $relatedAuto.offsetTop;
-        const minScrollTop = minRelatedTop - TOP_SPACING + (headerIsFixed ? 0 : headerHeight);
+        if (!$toc) return;
 
+        // This function ONLY handles vertical scrolling adjustments.
         this._relatedOnScroll = this._relatedOnScroll || (() => {
+            // If the panel's container is hidden by CSS, do nothing.
+            if (getComputedStyle($relatedAuto.parentElement).display === 'none') {
+                return;
+            }
+
+            const headerIsFixed = document.body.getAttribute('data-header-desktop') !== 'normal';
+            const headerHeight = document.getElementById('header-desktop').offsetHeight;
+            const TOP_SPACING = 20 + (headerIsFixed ? headerHeight : 0);
+            
+            // Use the TOC's position as the reliable source of truth for vertical alignment.
+            const minRelatedTop = $toc.offsetTop;
+            const minScrollTop = minRelatedTop - TOP_SPACING;
+            
             const footerTop = document.getElementById('post-footer').offsetTop;
             const maxRelatedTop = footerTop - $relatedAuto.getBoundingClientRect().height;
-            const maxScrollTop = maxRelatedTop - TOP_SPACING + (headerIsFixed ? 0 : headerHeight);
+            const maxScrollTop = maxRelatedTop - TOP_SPACING;
+
+            // Set initial position before scrolling begins
+            if ($relatedAuto.style.position !== 'fixed') {
+                $relatedAuto.style.position = 'absolute';
+                $relatedAuto.style.top = `${minRelatedTop}px`;
+            }
+
             if (this.newScrollTop < minScrollTop) {
                 $relatedAuto.style.position = 'absolute';
                 $relatedAuto.style.top = `${minRelatedTop}px`;
@@ -445,8 +441,12 @@ class Theme {
                 $relatedAuto.style.top = `${TOP_SPACING}px`;
             }
         });
+
+        // Run once on load and add to the scroll listener.
         this._relatedOnScroll();
         this.scrollEventSet.add(this._relatedOnScroll);
+        // Also run on resize to catch layout shifts.
+        this.resizeEventSet.add(this._relatedOnScroll);
     }
 
     initToc() {

layouts/posts/single.html

@@ -21,9 +21,11 @@
 
     {{- /* Auto Related (Left Panel) - Only show if related pages exist */ -}}
     {{- if and (ne $related.enable false) (gt (len $relatedPages) 0) -}}
-        <div class="related" id="related-auto">
-            <h2 class="related-title">{{ T "related" | default "Related" }}</h2>
-            <div class="related-content{{ if eq $related.auto false }} always-active{{ end }}" id="related-content-auto"></div>
+        <div class="page-aside-left">
+            <div class="related" id="related-auto">
+                <h2 class="related-title">{{ T "related" | default "Related" }}</h2>
+                <div class="related-content{{ if eq $related.auto false }} always-active{{ end }}" id="related-content-auto"></div>
+            </div>
         </div>
     {{- end -}}