feat(frontend): adopt zibll site-layout-1/2/3 float dual-column system
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:
@@ -112,14 +112,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Dual-column geometry is owned by body.site-layout-* float rules in layout.css. */
|
||||
.aksrt-homepage__content-layout {
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.aksrt-homepage__content-layout {
|
||||
grid-template-columns: minmax(0, 1fr) var(--sidebar-width, 311px);
|
||||
}
|
||||
display: block;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
|
||||
@@ -109,62 +109,122 @@
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.content-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 20px;
|
||||
align-items: start;
|
||||
/* ============================================================
|
||||
* Site shell — Zibll site-layout-1/2/3 float dual-column
|
||||
* body.site-layout-1 = no sidebar
|
||||
* body.site-layout-2 = sidebar right
|
||||
* body.site-layout-3 = sidebar left
|
||||
* ============================================================ */
|
||||
|
||||
main.container,
|
||||
main.content-shell,
|
||||
.site-main.container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.content-layout {
|
||||
grid-template-columns: minmax(0, 1fr) var(--sidebar-width, 311px);
|
||||
gap: 20px;
|
||||
}
|
||||
main.container::after,
|
||||
main.content-shell::after,
|
||||
.site-main.container::after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.content-wrap {
|
||||
float: left;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.content-layout {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.content-layout__primary {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.content-layout__aside {
|
||||
.content-layout__aside,
|
||||
.sidebar {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* No sidebar */
|
||||
body.site-layout-1 .sidebar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.site-layout-1 .content-layout,
|
||||
body.site-layout-1 .content-layout--no-sidebar {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* Compat: templates may still stamp content-layout--no-sidebar */
|
||||
.content-layout--no-sidebar {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
/* Sidebar RIGHT (layout 2) — Zibll default */
|
||||
body.site-layout-2 .content-layout {
|
||||
margin-right: calc(var(--sidebar-width, 311px) + 15px);
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
body.site-layout-2 .sidebar {
|
||||
float: left;
|
||||
width: var(--sidebar-width, 311px);
|
||||
margin-left: calc(0px - var(--sidebar-width, 311px));
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Sidebar LEFT (layout 3) */
|
||||
body.site-layout-3 .content-layout {
|
||||
margin-left: calc(var(--sidebar-width, 311px) + 15px);
|
||||
margin-right: unset;
|
||||
}
|
||||
|
||||
body.site-layout-3 .sidebar {
|
||||
float: left;
|
||||
width: var(--sidebar-width, 311px);
|
||||
margin-left: -100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Sticky widgets inside sidebar */
|
||||
@media (min-width: 992px) {
|
||||
body.site-layout-2 .sidebar .posts-nav-box,
|
||||
body.site-layout-3 .sidebar .posts-nav-box,
|
||||
.sidebar .content-layout__aside,
|
||||
.content-layout__aside {
|
||||
position: sticky;
|
||||
top: calc(var(--nav-height, 60px) + 16px);
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
/* WordPress Admin Bar 已全局禁用，无需偏移规则 */
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.has-static-nav .sidebar .posts-nav-box,
|
||||
.has-static-nav .content-layout__aside {
|
||||
top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.content-layout--no-sidebar {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.content-layout--no-sidebar .content-layout__primary {
|
||||
width: 100%;
|
||||
max-width: var(--content-no-sidebar-max, 1080px);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* 三栏布局变体：侧边栏在左侧 */
|
||||
@media (min-width: 992px) {
|
||||
.content-layout--sidebar-left {
|
||||
grid-template-columns: var(--sidebar-width, 311px) minmax(0, 1fr);
|
||||
/* Mobile collapse (Zibll max-width: 991px) */
|
||||
@media (max-width: 991.98px) {
|
||||
body.site-layout-2 .content-layout,
|
||||
body.site-layout-3 .content-layout {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.content-layout--sidebar-left .content-layout__aside {
|
||||
order: -1;
|
||||
body.site-layout-2 .sidebar,
|
||||
body.site-layout-3 .sidebar,
|
||||
.sidebar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
/* ========== 侧边栏 — 对齐 zibll sidebar ========== */
|
||||
/* Width/float geometry is owned by body.site-layout-* in layout.css.
|
||||
* Keep only non-layout chrome here. */
|
||||
.sidebar {
|
||||
width: var(--sidebar-width, 311px);
|
||||
flex-shrink: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.sidebar-inner {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user