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
@@ -457,10 +457,14 @@ html.dark .post-drop-meta__item:hover {
width: 100%;
}
.article-avatar .avatar-img {
--this-size: 42px;
}
.article-avatar .avatar-img img,
.article-avatar .avatar {
width: 42px;
height: 42px;
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
@@ -472,6 +476,8 @@ html.dark .post-drop-meta__item:hover {
.article-header .article-avatar .relative {
margin-top: 20px;
position: relative;
min-height: 1px;
}
.single-metabox {
@@ -514,11 +520,9 @@ html.dark .post-drop-meta__item:hover {
--body-bg-color: rgba(0, 0, 0, 0.3);
}
.line-form-line {
/* line-form-line owned by zibll-utilities.css — only context here */
.article-avatar .line-form-line {
display: block;
height: 1px;
background: var(--main-border-color, rgba(50,50,50,.06));
margin: 12px 0 0;
}
.post-actions {
@@ -1,9 +1,34 @@
/* ========== Single Post ========== */
/* Zibll .article — card body padding wins over .box-body (main.css order) */
.article,
article.article.box-body,
.article.main-bg.box-body {
padding: 0 30px;
overflow: hidden;
}
@media (max-width: 767px) {
.article,
article.article.box-body,
.article.main-bg.box-body {
padding: 0 15px;
}
.article-header .article-title {
font-size: 18px;
}
}
.entry-header,
.article-header {
margin-bottom: 10px;
padding-bottom: 0;
border-bottom: none;
/* theme-box is spacing only — never paint a nested card here */
background: transparent;
box-shadow: none;
border-radius: 0;
}
/* 标题 — 对齐 zibll: 22px, bold, line-height 1.4 */
@@ -17,6 +42,10 @@
color: var(--key-color, var(--color-ink));
}
.article-title > a:hover {
color: inherit;
}
.article-header .article-title {
font-size: 22px;
font-weight: bold;
+53 -26
View File
@@ -3,14 +3,20 @@
* The cover stays inside the content column with a fixed aspect ratio box.
* ============================================================ */
/* ===== Cover (in-column ratio box) ===== */
/* ===== Cover (in-column ratio box) — Zibll .single-cover ===== */
.single-cover {
position: relative;
overflow: hidden;
border-radius: var(--radius-2xl, 16px);
box-shadow: var(--shadow-sm);
border-radius: var(--main-radius, var(--radius, 8px));
box-shadow: 0 0 10px var(--main-shadow, rgba(116, 116, 116, 0.08));
margin-bottom: 20px;
padding-bottom: var(--single-cover-scale, 35%);
/* Zibll: padding-bottom: calc(var(--single-cover-scale) + 50px) */
padding-bottom: calc(var(--single-cover-scale, 35%) + 50px);
}
.single-cover-slide {
padding-bottom: calc(var(--scale-height, var(--single-cover-scale, 35%)) + 50px);
border-radius: var(--main-radius, var(--radius, 8px));
}
.single-cover > .fit-cover,
@@ -22,6 +28,25 @@
object-fit: cover;
}
.single-cover-con {
color: #fff;
padding: 15px 15px 10px 15px;
border-radius: 0 0 var(--main-radius, var(--radius, 8px)) var(--main-radius, var(--radius, 8px));
background-image: linear-gradient(0deg, rgba(29, 41, 49, 0.5), rgba(255, 255, 255, 0));
padding-top: 2em;
}
.single-cover-con a {
color: #fff;
}
.single-video .article-title,
.single-cover-con .article-title {
font-size: 18px;
font-weight: 700;
}
/* Legacy overlay helpers (kept for non-zibll markup) */
.single-cover__overlay {
position: absolute;
inset: 0;
@@ -40,7 +65,7 @@
right: 0;
padding: 24px;
color: #fff;
border-radius: 0 0 var(--radius-2xl, 16px) var(--radius-2xl, 16px);
border-radius: 0 0 var(--main-radius, var(--radius, 8px)) var(--main-radius, var(--radius, 8px));
}
.single-cover__title,
@@ -155,23 +180,13 @@
position: relative;
}
.article-avatar .line-form-line,
.article-avatar .line-form-line::before {
position: absolute;
top: 50%;
left: calc(52px + 16px);
right: 120px;
height: 1px;
transform: translateY(-50%);
background: var(--color-line);
}
.article-avatar .line-form-line::before {
content: "";
right: auto;
width: 42px;
background: var(--color-primary, #f04494);
opacity: 0.3;
/* line-form-line geometry owned by zibll-utilities.css (absolute full-width bottom).
* Here only ensure the meta row has height so the rule sits correctly. */
.article-header .article-avatar .relative {
margin-top: 20px;
position: relative;
min-height: 1px;
padding-bottom: 1px;
}
/* ===== Article Card ===== */
@@ -253,11 +268,11 @@
.single-cover-slide-wrap {
position: relative;
overflow: hidden;
border-radius: var(--radius-2xl, 16px);
border-radius: var(--main-radius, var(--radius, 8px));
}
.single-cover-slide-wrap .abs-center.left-bottom {
z-index: 2;
padding: 18px 20px;
padding: 15px 15px 10px 15px;
color: #fff;
}
.article-avatar name.flex {
@@ -277,11 +292,23 @@
/* Slide cover overlay (injected by aksrt_render_slider overlay_html) */
.aksrt-slider-wrapper--has-overlay,
.aksrt-slider-wrapper--scale { position: relative; overflow: hidden; border-radius: var(--radius-2xl, 16px); }
.aksrt-slider-wrapper--scale {
position: relative;
overflow: hidden;
border-radius: var(--main-radius, var(--radius, 8px));
}
.aksrt-slider-wrapper--scale .new-swiper { position: absolute; inset: 0; width: 100%; height: 100%; }
.aksrt-slider-wrapper--scale .swiper-slide img.fit-cover { width: 100%; height: 100%; object-fit: cover; }
.aksrt-slider-overlay { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.aksrt-slider-overlay .abs-center.left-bottom { pointer-events: none; padding: 18px 20px; color: #fff; }
.aksrt-slider-overlay .abs-center.left-bottom {
pointer-events: none;
padding: 15px 15px 10px 15px;
color: #fff;
background-image: linear-gradient(0deg, rgba(29, 41, 49, 0.5), rgba(255, 255, 255, 0));
padding-top: 2em;
width: 100%;
box-sizing: border-box;
}
.aksrt-slider-overlay .article-title,
.aksrt-slider-overlay .article-title.title-h-left { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.45); }
.aksrt-slider-overlay .breadcrumb a,
+6 -1
View File
@@ -25,7 +25,7 @@ body.single main.container .content-layout > .breadcrumbs-wrap {
padding-top: 2px;
}
/* Sticky TOC widget in sidebar */
/* Sticky TOC widget in sidebar — parent .sidebar is position:unset like Zibll */
body.single .sidebar .posts-nav-box.toc-widget {
position: sticky;
top: calc(var(--nav-height, 60px) + 16px);
@@ -35,3 +35,8 @@ body.single .sidebar .zib-widget,
body.single .sidebar .widget {
margin-bottom: 15px;
}
/* Geometry owned by base/layout — keep single shell free of float overrides. */
body.single main.container {
box-sizing: border-box;
}