kate522
4d2dba47f9
Replace the fragile content-wrap float + negative-margin sidebar with a main.container grid, add fixed-nav top breathing room so the breadcrumb stays below the header, and mark the aside as content-layout__aside.
116 lines
3.0 KiB
CSS
116 lines
3.0 KiB
CSS
/* 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 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 > * {
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* Desktop: content | sidebar in one row (no negative-margin float hack). */
|
|
@media (min-width: 992px) {
|
|
body.single main.container:not(.container--no-sidebar) {
|
|
grid-template-columns: minmax(0, 1fr) var(--sidebar-width, 300px);
|
|
column-gap: 20px;
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 991.98px) {
|
|
body.single main.container > .sidebar {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Sidebar widgets spacing */
|
|
body.single .sidebar .zib-widget,
|
|
body.single .sidebar .widget {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
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%;
|
|
}
|
|
}
|