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
+47 -34
View File
@@ -1,12 +1,17 @@
/* ========== 面包屑导航 — 对齐 zibll breadcrumb ========== */
.breadcrumb-nav,
/* ========== 面包屑导航 — 对齐 zibll .breadcrumb (main.css) ========== */
/* Single source for breadcrumb chrome. Do not re-define in layout.css. */
.breadcrumb,
ul.breadcrumb,
.breadcrumb-nav,
.breadcrumbs-wrap {
background: transparent;
font-size: 13px;
padding: 0 8px;
margin-bottom: 12px;
margin: 0 0 12px;
opacity: 0.6;
line-height: 1.8;
list-style: none;
}
.breadcrumb-nav ol,
@@ -16,90 +21,98 @@ ul.breadcrumb,
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0;
display: block;
}
.breadcrumb-nav li,
/* Zibll uses flat li + li:before separators (not flex-gap nodes) */
.breadcrumb > li,
ul.breadcrumb > li,
.breadcrumb-nav li,
.breadcrumbs.breadcrumb > li {
display: inline-flex;
align-items: center;
display: inline;
}
/* Zibll flat ul.breadcrumb inserts parents with " </li><li> " — separators via content */
.breadcrumb-nav li + li::before,
ul.breadcrumb > li + li::before {
content: '/';
padding: 0 6px 0 6px;
.breadcrumb > li + li:before,
ul.breadcrumb > li + li:before,
.breadcrumb-nav li + li:before {
content: "/";
padding: 0 0 0 6px;
opacity: 0.6;
}
/* Archive/nav variant may still stamp sep nodes — keep neutral */
.breadcrumbs.breadcrumb .breadcrumbs__sep {
padding: 0 6px;
opacity: 0.6;
}
.breadcrumb-nav a,
.breadcrumb a,
ul.breadcrumb a,
.breadcrumb-nav a,
.breadcrumbs a {
color: var(--color-ink-4, #999);
color: var(--muted-2-color, var(--color-ink-4, #999));
text-decoration: none;
transition: color 0.2s;
}
.breadcrumb-nav a:hover,
.breadcrumb a:hover,
ul.breadcrumb a:hover,
.breadcrumb-nav a:hover,
.breadcrumbs a:hover {
color: var(--color-primary, #f04494);
color: var(--focus-color, var(--color-primary, #f04494));
}
.breadcrumb-nav .current,
.breadcrumb > li:last-child,
ul.breadcrumb > li:last-child,
.breadcrumb-nav .current,
.breadcrumbs__item.is-current {
color: var(--color-ink-2, #4e5358);
font-weight: 500;
color: var(--main-color, var(--color-ink-2, #4e5358));
}
.single-cover-con .breadcrumb-nav,
/* Cover / video footer breadcrumb — Zibll single-cover-con / single-video */
.single-cover-con .breadcrumb,
.single-cover-con ul.breadcrumb,
.post-breadcrumbs .breadcrumb {
.single-cover-con .breadcrumb-nav,
.post-breadcrumbs .breadcrumb,
.single-video .breadcrumb {
font-size: 13px;
margin: 5px 0 0 -6px;
opacity: unset;
padding: 0;
background: transparent;
}
/* 封面内面包屑 */
.single-cover-con .breadcrumb-nav,
.single-video .breadcrumb {
padding: 0;
}
.single-cover-con .breadcrumb,
.single-cover-con ul.breadcrumb,
.single-cover-con .breadcrumb {
.single-cover-con .breadcrumb-nav {
color: rgba(255, 255, 255, 0.85);
}
.single-cover-con .breadcrumb-nav a,
.single-cover-con .breadcrumb a,
.single-cover-con ul.breadcrumb a,
.single-cover-con .breadcrumb a {
.single-cover-con .breadcrumb-nav a {
color: rgba(255, 255, 255, 0.85);
}
.single-cover-con .breadcrumb-nav a:hover,
.single-cover-con ul.breadcrumb a:hover {
.single-cover-con .breadcrumb a:hover,
.single-cover-con ul.breadcrumb a:hover,
.single-cover-con .breadcrumb-nav a:hover {
color: #fff;
}
.single-cover-con .breadcrumb-nav .current,
.single-cover-con .breadcrumb > li:last-child,
.single-cover-con ul.breadcrumb > li:last-child {
color: #fff;
}
/* 移动端 */
@media (max-width: 767px) {
.breadcrumb-nav,
.breadcrumb,
ul.breadcrumb,
.breadcrumb-nav,
.breadcrumbs-wrap {
font-size: 12px;
}