Merge pull request 'fix(frontend): stop single sidebar float overlap under fixed nav' (#138) from worktree-fix-single-page-layout into main

Reviewed-on: CYL/wordpress-theme-aksrt#138

assets/css/frontend/nav/base.css

@@ -21,6 +21,16 @@ body.nav-fixed .header:not(.show-slide) .navbar.navbar-top {
   top: auto;
 }
 
+/*
+ * Non-home pages have no hero under the fixed header. Keep the first content
+ * (breadcrumb / article) clearly below the bar even if a fluid widget zone is
+ * empty or a child uses negative margin.
+ */
+body.nav-fixed:not(:has(.header.show-slide)) .fluid-widget-wrap:first-of-type:empty + main.container,
+body.nav-fixed:not(:has(.header.show-slide)) main.container:first-of-type {
+  scroll-margin-top: calc(var(--nav-height, 60px) + 8px);
+}
+
 /* Hero sits under transparent fixed/absolute header (zibll slide-header) */
 body.nav-fixed .header-slider-container,
 body.nav-fixed .header-components-container,

assets/css/frontend/single-post/shell.css

@@ -1,27 +1,44 @@
-/* Single page shell — Zibll float dual-column (scoped to body.single) */
+/* Single page shell — dual column + fixed-nav safe top spacing */
-
-body.single .container {
-  position: relative;
-}
-
-body.single .content-wrap {
-  float: left;
-  width: 100%;
-}
 
 /*
  * Global layout.css turns .content-layout into a 2-col grid that expects
  * .content-layout__primary + .content-layout__aside children.
  * Single posts put breadcrumb / article / author / related / comments as
- * direct children and float the sidebar outside — so the grid must be
+ * direct children of .content-layout, and render .sidebar as a sibling of
- * disabled here or those sections tile left/right and look "broken".
+ * .content-wrap under main.container. Force a page-owned layout here.
  */
+body.single main.container {
+  position: relative;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 20px;
+  align-items: start;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+/* Extra breathing room under fixed header (body.nav-fixed already reserves
+ * --nav-height; this keeps breadcrumb from sitting flush under the bar). */
+body.single.nav-fixed main.container {
+  padding-top: 12px;
+}
+
+body.single main.container > .content-wrap {
+  float: none;
+  width: auto;
+  min-width: 0;
+  max-width: 100%;
+  grid-column: 1;
+  grid-row: 1;
+}
+
 body.single main.container .content-layout {
   display: block;
   grid-template-columns: none;
   gap: 0;
   width: 100%;
   min-width: 0;
+  margin-right: 0 !important; /* kill residual float-layout reservation */
 }
 
 body.single main.container .content-layout > * {
@@ -29,31 +46,47 @@ body.single main.container .content-layout > * {
   max-width: 100%;
 }
 
-/* Clear floats after main dual-column shell */
+/* Breadcrumb must stay in the content flow and under the fixed header. */
-body.single main.container::after {
+body.single main.container .content-layout > .breadcrumb,
-  content: "";
+body.single main.container .content-layout > ul.breadcrumb,
-  display: table;
+body.single main.container .content-layout > .breadcrumb-nav,
-  clear: both;
+body.single main.container .content-layout > .breadcrumbs-wrap {
+  position: relative;
+  z-index: 1;
+  margin-top: 0;
+  margin-bottom: 12px;
+  padding-top: 2px;
 }
 
-/* Default: no sidebar full width */
+/* Sidebar is a direct child of main.container (not inside .content-layout). */
-body.single.container--no-sidebar .content-layout,
+body.single main.container > .sidebar {
-body.single .container--no-sidebar .content-layout,
+  float: none;
-body.single main.container--no-sidebar .content-layout {
+  position: relative;
-  margin-right: 0;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  margin-left: 0;
+  grid-column: 1;
 }
 
-/* Zibll site-layout-2: content left, sidebar right (311px) */
+/* Desktop: content | sidebar in one row (no negative-margin float hack). */
 @media (min-width: 992px) {
-  body.single:not(.no-sidebar) main.container:not(.container--no-sidebar) .content-layout {
+  body.single main.container:not(.container--no-sidebar) {
-    margin-right: calc(var(--sidebar-width, 311px) + 15px);
+    grid-template-columns: minmax(0, 1fr) var(--sidebar-width, 300px);
+    column-gap: 20px;
   }
 
-  body.single:not(.no-sidebar) main.container:not(.container--no-sidebar) > .sidebar {
+  body.single main.container:not(.container--no-sidebar) > .content-wrap {
-    float: left;
+    grid-column: 1;
-    width: var(--sidebar-width, 311px);
+    grid-row: 1;
-    margin-left: calc(0px - var(--sidebar-width, 311px));
+  }
-    position: relative;
+
+  body.single main.container:not(.container--no-sidebar) > .sidebar {
+    grid-column: 2;
+    grid-row: 1;
+    width: 100%;
+    margin-left: 0;
+    align-self: start;
   }
 }
 
@@ -61,10 +94,6 @@ body.single main.container--no-sidebar .content-layout {
   body.single main.container > .sidebar {
     display: none;
   }
-
-  body.single main.container .content-layout {
-    margin-right: 0 !important;
-  }
 }
 
 /* Sidebar widgets spacing */
@@ -77,3 +106,10 @@ body.single .sidebar .posts-nav-box.toc-widget {
   position: sticky;
   top: calc(var(--nav-height, 60px) + 16px);
 }
+
+/* Override generic sidebar.css absolute widths (280/311) so the grid cell owns sizing */
+@media (min-width: 992px) {
+  body.single main.container > .sidebar {
+    width: 100%;
+  }
+}

inc/helpers/aksrt-single.php

@@ -948,7 +948,7 @@ if (!function_exists('aksrt_single_render_aside')) :
 			return;
 		}
 		?>
-		<div class="sidebar" role="complementary" aria-label="<?php esc_attr_e('侧栏', 'aksrt'); ?>">
+		<aside class="sidebar content-layout__aside" role="complementary" aria-label="<?php esc_attr_e('侧栏', 'aksrt'); ?>">
 			<?php if (!empty($ctx['has_download'])) : ?>
 				<?php get_template_part('templates/parts/resource-meta-box'); ?>
 			<?php endif; ?>
@@ -971,7 +971,7 @@ if (!function_exists('aksrt_single_render_aside')) :
 			<?php if (is_active_sidebar('all_sidebar_bottom')) : ?>
 				<?php dynamic_sidebar('all_sidebar_bottom'); ?>
 			<?php endif; ?>
-		</div>
+		</aside>
 		<?php
 	}
 endif;