kate522/wordpress-theme-aksrt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): adopt zibll site-layout-1/2/3 float dual-column system

Browse Source 
Wire settings-driven sidebar visibility and body site-layout classes,
replace content-layout CSS grid with Zibll float geometry, move sidebar
DOM to content-wrap sibling across single/archive/page/home, and add
post meta show_layout overrides.
This commit is contained in:
kate522
2026-07-15 00:30:26 +08:00
parent 232b6eb752
commit 12673fb819
15 changed files with 354 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/frontend/single-post/shell.css
+9 -87
View File
@@ -1,44 +1,11 @@
/* 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;
}
/* Single page shell — relies on body.site-layout-1/2/3 float dual-column
* defined in layout.css (Zibll 1:1). Page-owned overrides stay minimal. */
/* Single article stack lives inside .content-layout as direct children;
* do not re-enable the legacy primary/aside grid here. */
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 > * {
@@ -46,7 +13,7 @@ body.single main.container .content-layout > * {
max-width: 100%;
}
/* Breadcrumb must stay in the content flow and under the fixed header. */
/* Breadcrumb sits under fixed header (body.nav-fixed already pads top). */
body.single main.container .content-layout > .breadcrumb,
body.single main.container .content-layout > ul.breadcrumb,
body.single main.container .content-layout > .breadcrumb-nav,
@@ -58,58 +25,13 @@ body.single main.container .content-layout > .breadcrumbs-wrap {
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;
}
/* Sticky TOC widget in sidebar */
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%;
}
body.single .sidebar .zib-widget,
body.single .sidebar .widget {
margin-bottom: 15px;
}