fix(single): restore Zibll float dual-column and article chrome

Align single-post layout/visuals with Zibll: fix sidebar-over-content
float geometry (position:unset, 311px token, kill Bootstrap/container
padding and the 280px sidebar override), demote theme-box to spacing-
only, unify breadcrumb/cover/graphic utilities, and split aksrt-single
render helpers under the file-size limit.
This commit is contained in:
2026-07-16 12:44:09 +08:00
parent 442242d612
commit 6c354fb086
15 changed files with 1189 additions and 975 deletions
+69 -8
View File
@@ -72,22 +72,83 @@ a[href] {
flex: 1;
}
.container {
/* Zibll dual-column float math expects a padding-free main.container.
* Bootstrap 5 also defines .container (max-width ladder + padding-x).
* Force Zibll geometry after Bootstrap so negative-margin sidebars land correctly. */
.container,
main.container,
.site-main.container {
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding: 0 16px;
max-width: var(--container, var(--mian-max-width, 1200px));
margin-right: auto;
margin-left: auto;
padding-right: 0;
padding-left: 0;
/* Kill Bootstrap 5 --bs-gutter-x padding model on site shells */
--bs-gutter-x: 0;
--bs-gutter-y: 0;
}
@media (min-width: 576px) {
.container,
main.container {
max-width: var(--container, var(--mian-max-width, 1200px));
}
}
@media (min-width: 768px) {
.container {
padding: 0 24px;
.container,
main.container {
max-width: var(--container, var(--mian-max-width, 1200px));
}
}
@media (min-width: 992px) {
.container,
main.container {
max-width: var(--container, var(--mian-max-width, 1200px));
}
}
@media (min-width: 1200px) {
.container {
padding: 0 32px;
.container,
main.container {
max-width: var(--container, var(--mian-max-width, 1200px));
}
}
@media (min-width: 1240px) {
.container,
main.container,
.fluid-widget-wrap .widget-container {
width: auto;
max-width: var(--container, var(--mian-max-width, 1200px));
}
}
@media (min-width: 1400px) {
.container,
main.container {
max-width: var(--container, var(--mian-max-width, 1200px));
}
}
/* Soft pad only when the float dual-column is collapsed */
@media (max-width: 991.98px) {
.container,
main.container {
padding-right: 10px;
padding-left: 10px;
}
}
@media (max-width: 767px) {
.container,
main.container {
width: 100%;
max-width: 100%;
padding-right: 10px;
padding-left: 10px;
}
}