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

fix(layout): restore Zibll float dual-column so content no longer overlaps sidebar

Browse Source 
Align main shells to main.container > .content-wrap + .sidebar siblings, drop
content-shell padding on dual-column hosts, and remove route flex overrides that
disabled the negative-margin sidebar math.
This commit is contained in:
kate522
2026-07-22 21:05:12 +08:00
parent 79bc4159f5
commit 7d33097209
15 changed files with 156 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/frontend/layout.css
+41 -9
View File
@@ -51,10 +51,14 @@
}
/* ============================================================
* Site shell — Zibll site-layout-1/2/3 float dual-column
* Site shell — Zibll site-layout-1/2/3 float dual-column (main.css 1:1)
* 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.
* ============================================================ */
main.container,
@@ -63,6 +67,18 @@ main.content-shell,
position: relative;
}
/* content-shell is a padding shell for non-dual pages; when it also hosts
* the float dual-column, kill horizontal padding so negative-margin math matches Zibll. */
main.container.content-shell,
main.content-shell.container,
.site-main.container.content-shell {
padding-left: 0;
padding-right: 0;
max-width: var(--container, var(--mian-max-width, 1200px));
width: 100%;
box-sizing: border-box;
}
main.container::after,
main.content-shell::after,
.site-main.container::after {
@@ -71,10 +87,14 @@ main.content-shell::after,
clear: both;
}
/* Zibll: .content-wrap { float:left; width:100%; } — display:block restores float
* if a route stylesheet accidentally set flex/grid on the wrap. */
.content-wrap {
float: left;
width: 100%;
min-width: 0;
display: block;
box-sizing: border-box;
}
.content-layout {
@@ -83,6 +103,7 @@ main.content-shell::after,
min-width: 0;
margin-right: 0;
margin-left: 0;
box-sizing: border-box;
}
.content-layout__primary {
@@ -97,6 +118,7 @@ main.content-shell::after,
min-width: 0;
position: relative;
box-sizing: border-box;
display: block;
}
.content-layout__aside {
@@ -104,12 +126,14 @@ main.content-shell::after,
}
/* No sidebar */
body.site-layout-1 .sidebar {
body.site-layout-1 .sidebar,
.site-layout-1 .sidebar {
display: none;
}
body.site-layout-1 .content-layout,
body.site-layout-1 .content-layout--no-sidebar {
body.site-layout-1 .content-layout--no-sidebar,
.site-layout-1 .content-layout {
margin-left: 0;
margin-right: 0;
}
@@ -120,13 +144,15 @@ body.site-layout-1 .content-layout--no-sidebar {
margin-right: 0 !important;
}
/* Sidebar RIGHT (layout 2) — hard 311px like Zibll main.css (runtime var must match) */
body.site-layout-2 .content-layout {
/* Sidebar RIGHT (layout 2) — Zibll uses hard 311px; runtime --sidebar-width must match */
body.site-layout-2 .content-layout,
.site-layout-2 .content-layout {
margin-right: calc(var(--sidebar-width, 311px) + 15px);
margin-left: 0;
}
body.site-layout-2 .sidebar {
body.site-layout-2 .sidebar,
.site-layout-2 .sidebar {
float: left;
width: var(--sidebar-width, 311px);
margin-left: calc(0px - var(--sidebar-width, 311px));
@@ -134,12 +160,14 @@ body.site-layout-2 .sidebar {
}
/* Sidebar LEFT (layout 3) */
body.site-layout-3 .content-layout {
body.site-layout-3 .content-layout,
.site-layout-3 .content-layout {
margin-left: calc(var(--sidebar-width, 311px) + 15px);
margin-right: unset;
}
body.site-layout-3 .sidebar {
body.site-layout-3 .sidebar,
.site-layout-3 .sidebar {
float: left;
width: var(--sidebar-width, 311px);
margin-left: -100%;
@@ -165,13 +193,17 @@ body.site-layout-3 .sidebar {
/* Mobile collapse (Zibll max-width: 991px) */
@media (max-width: 991.98px) {
body.site-layout-2 .content-layout,
body.site-layout-3 .content-layout {
body.site-layout-3 .content-layout,
.site-layout-2 .content-layout,
.site-layout-3 .content-layout {
margin-left: auto;
margin-right: auto;
}
body.site-layout-2 .sidebar,
body.site-layout-3 .sidebar,
.site-layout-2 .sidebar,
.site-layout-3 .sidebar,
.sidebar {
display: none;
}
assets/css/routes/archives.css
+1 -20
View File
@@ -4,21 +4,7 @@
* @package AKSRT
*/
.page-template-archives .content-wrap {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.page-template-archives .content-layout {
flex: 1 1 0;
min-width: 0;
}
.page-template-archives .sidebar {
flex: 0 0 300px;
max-width: 100%;
}
/* Dual-column geometry owned by layout.css site-layout float rules (Zibll). */
.archives-month-list {
list-style: none;
@@ -76,8 +62,3 @@
margin-left: 6px;
}
@media (max-width: 991px) {
.page-template-archives .sidebar {
flex: 1 1 100%;
}
}
assets/css/routes/posts-navs.css
+1 -27
View File
@@ -5,22 +5,7 @@
*/
/* header card */
.page-template-posts-navs .content-wrap,
main.page-template-posts-navs {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
main.page-template-posts-navs .content-wrap {
flex: 1 1 0;
min-width: 0;
}
main.page-template-posts-navs .sidebar {
flex: 0 0 260px;
max-width: 100%;
}
/* Dual-column geometry owned by layout.css site-layout float rules (Zibll). */
.posts-navs .title-theme h2 {
margin: 0;
@@ -247,15 +232,4 @@ main.page-template-posts-navs .sidebar {
outline: 2px dashed var(--focus-color, #f04494);
}
@media (max-width: 991px) {
main.page-template-posts-navs .sidebar {
flex: 1 1 100%;
order: -1;
}
#post-navs-sz .col-xs-6,
#post-navs-sz .col-sm-6 {
width: 100%;
margin-bottom: 12px;
}
}
assets/css/routes/user-auth.css
+1 -10
View File
@@ -77,13 +77,4 @@
color: #e74c3c;
}
.page-template-user-auth .content-wrap {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.page-template-user-auth .content-layout {
flex: 1 1 0;
min-width: 0;
}
/* Dual-column geometry owned by layout.css site-layout float rules (Zibll). */