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

fix(layout): keep article sidebar in visible column

Browse Source
This commit is contained in:
kate522
2026-08-14 13:08:48 +08:00
parent ae8d89ae60
commit 6b25aff9ff
1 changed files with 91 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/frontend/layout.css
+91 -4
View File
@@ -51,14 +51,15 @@
}
/* ============================================================
* Site shell — Zibll site-layout-1/2/3 float dual-column (main.css 1:1)
* Site shell — site-layout-1/2/3 dual-column
* DOM: main.container > .content-wrap + .sidebar (siblings)
* body.site-layout-1 = no sidebar
* body.site-layout-2 = sidebar right
* body.site-layout-3 = sidebar left
*
* Never put display:flex/grid on .content-wrap for dual-column pages —
* float is ignored under flex/grid and .sidebar negative-margin then overlaps.
* Desktop columns use Grid so the sidebar is always a real second column.
* The float rules below remain as a narrow-screen compatibility fallback;
* below 992px the sidebar is intentionally hidden.
* ============================================================ */
main.container,
@@ -87,7 +88,7 @@ main.content-shell::after,
clear: both;
}
/* Zibll main.css 1:1 dual-column (float + negative-margin).
/* Float/negative-margin compatibility fallback.
*
* Critical: .content-layout must NOT set width:100%. Under box-sizing:border-box
* a 100% width + margin-right gutter keeps the border-box at full container
@@ -189,6 +190,92 @@ body.site-layout-3 .sidebar,
position: unset;
}
/* Desktop dual-column geometry.
*
* A full-width floated .content-wrap plus a negatively-margined sidebar can
* leave the sidebar outside the visible painting area when a parent clips
* horizontal overflow. Put the two direct children in explicit grid columns
* instead, so widgets cannot be positioned off-canvas. */
@media (min-width: 992px) {
body.site-layout-2 main.container,
body.site-layout-2 main.content-shell,
body.site-layout-2 .site-main.container {
display: grid;
grid-template-columns: minmax(0, 1fr) var(--sidebar-width, 311px);
column-gap: 15px;
align-items: start;
}
body.site-layout-3 main.container,
body.site-layout-3 main.content-shell,
body.site-layout-3 .site-main.container {
display: grid;
grid-template-columns: var(--sidebar-width, 311px) minmax(0, 1fr);
column-gap: 15px;
align-items: start;
}
body.site-layout-2 main.container::after,
body.site-layout-2 main.content-shell::after,
body.site-layout-2 .site-main.container::after,
body.site-layout-3 main.container::after,
body.site-layout-3 main.content-shell::after,
body.site-layout-3 .site-main.container::after {
content: none;
}
body.site-layout-2 main.container > .content-wrap,
body.site-layout-2 main.content-shell > .content-wrap,
body.site-layout-2 .site-main.container > .content-wrap {
float: none;
grid-column: 1;
grid-row: 1;
width: auto;
}
body.site-layout-3 main.container > .content-wrap,
body.site-layout-3 main.content-shell > .content-wrap,
body.site-layout-3 .site-main.container > .content-wrap {
float: none;
grid-column: 2;
grid-row: 1;
width: auto;
}
body.site-layout-2 main.container > .content-wrap > .content-layout,
body.site-layout-2 main.content-shell > .content-wrap > .content-layout,
body.site-layout-2 .site-main.container > .content-wrap > .content-layout,
body.site-layout-3 main.container > .content-wrap > .content-layout,
body.site-layout-3 main.content-shell > .content-wrap > .content-layout,
body.site-layout-3 .site-main.container > .content-wrap > .content-layout {
width: auto;
margin-right: 0;
margin-left: 0;
}
body.site-layout-2 main.container > .sidebar,
body.site-layout-2 main.content-shell > .sidebar,
body.site-layout-2 .site-main.container > .sidebar {
float: none;
grid-column: 2;
grid-row: 1;
width: var(--sidebar-width, 311px);
margin-left: 0;
position: relative;
}
body.site-layout-3 main.container > .sidebar,
body.site-layout-3 main.content-shell > .sidebar,
body.site-layout-3 .site-main.container > .sidebar {
float: none;
grid-column: 1;
grid-row: 1;
width: var(--sidebar-width, 311px);
margin-left: 0;
position: relative;
}
}
/* Sticky widgets inside sidebar */
@media (min-width: 992px) {
body.site-layout-2 .sidebar .posts-nav-box,