diff --git a/assets/css/frontend/nav/base.css b/assets/css/frontend/nav/base.css index 69d0e89a..69a1b92f 100644 --- a/assets/css/frontend/nav/base.css +++ b/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, diff --git a/assets/css/frontend/single-post/shell.css b/assets/css/frontend/single-post/shell.css index c5b2499d..7d0cd62f 100644 --- a/assets/css/frontend/single-post/shell.css +++ b/assets/css/frontend/single-post/shell.css @@ -1,27 +1,44 @@ -/* Single page shell — Zibll float dual-column (scoped to body.single) */ - -body.single .container { - position: relative; -} - -body.single .content-wrap { - float: left; - width: 100%; -} +/* Single page shell — dual column + fixed-nav safe top spacing */ /* * 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 - * disabled here or those sections tile left/right and look "broken". + * direct children of .content-layout, and render .sidebar as a sibling of + * .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 */ -body.single main.container::after { - content: ""; - display: table; - clear: both; +/* Breadcrumb must stay in the content flow and under the fixed header. */ +body.single main.container .content-layout > .breadcrumb, +body.single main.container .content-layout > ul.breadcrumb, +body.single main.container .content-layout > .breadcrumb-nav, +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 */ -body.single.container--no-sidebar .content-layout, -body.single .container--no-sidebar .content-layout, -body.single main.container--no-sidebar .content-layout { - margin-right: 0; +/* Sidebar is a direct child of main.container (not inside .content-layout). */ +body.single main.container > .sidebar { + float: none; + position: relative; + 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 { - margin-right: calc(var(--sidebar-width, 311px) + 15px); + body.single main.container:not(.container--no-sidebar) { + 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 { - float: left; - width: var(--sidebar-width, 311px); - margin-left: calc(0px - var(--sidebar-width, 311px)); - position: relative; + body.single main.container:not(.container--no-sidebar) > .content-wrap { + grid-column: 1; + grid-row: 1; + } + + 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%; + } +} diff --git a/inc/helpers/aksrt-single.php b/inc/helpers/aksrt-single.php index 9dce3782..40e3318d 100644 --- a/inc/helpers/aksrt-single.php +++ b/inc/helpers/aksrt-single.php @@ -948,7 +948,7 @@ if (!function_exists('aksrt_single_render_aside')) : return; } ?> - +