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:
@@ -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;
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user