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:
1 parent
442242d612
commit
6c354fb086
15 files changed
+1189
-975
No files matched your search
@@ -49,6 +49,132 @@
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
/* Zibll abs-center position variants (main.css) */
|
||||
.abs-center.left-bottom,
|
||||
.abs-center.right-bottom,
|
||||
.abs-center.conter-bottom {
|
||||
top: auto;
|
||||
transform: unset;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.abs-center.left-bottom {
|
||||
left: 0;
|
||||
right: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.abs-center.right-bottom,
|
||||
.abs-center.right-conter {
|
||||
left: auto;
|
||||
right: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Graphic ratio box (cover / related thumbs) — Zibll .graphic */
|
||||
.graphic,
|
||||
.page-cover {
|
||||
text-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
|
||||
--main-color: #fff;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0 10px var(--main-shadow, rgba(116, 116, 116, 0.08));
|
||||
padding: 0;
|
||||
padding-bottom: 70%;
|
||||
border-radius: var(--main-radius, var(--radius, 8px));
|
||||
}
|
||||
|
||||
.graphic > .fit-cover,
|
||||
.graphic > img.fit-cover {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.fit-cover {
|
||||
object-fit: cover;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* title-h-left underline bar (Zibll) */
|
||||
.title-h-left {
|
||||
position: relative;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.title-h-left:before {
|
||||
transition: 0.4s;
|
||||
transform-origin: left;
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 40px;
|
||||
height: 3px;
|
||||
background: var(--theme-color, var(--focus-color, #f04494));
|
||||
left: 0;
|
||||
bottom: 3px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 1px 1px 3px -1px var(--theme-color, var(--focus-color, #f04494));
|
||||
}
|
||||
|
||||
/* line-form-line — Zibll absolute bottom rule (author meta separator) */
|
||||
.line-form-line,
|
||||
.line-form-line:before {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
transition: 0.8s;
|
||||
background: var(--main-border-color, rgba(50, 50, 50, 0.06));
|
||||
}
|
||||
|
||||
.line-form-line:before {
|
||||
content: "";
|
||||
width: 0;
|
||||
background: var(--focus-color, #f04494);
|
||||
}
|
||||
|
||||
/* Avatar size primitive */
|
||||
.avatar-img {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
flex-shrink: 0;
|
||||
--this-size: 38px;
|
||||
width: var(--this-size);
|
||||
height: var(--this-size);
|
||||
}
|
||||
|
||||
.avatar-img .avatar,
|
||||
.avatar-img img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.avatar-lg {
|
||||
--this-size: 80px;
|
||||
}
|
||||
|
||||
.avatar-md {
|
||||
--this-size: 55px;
|
||||
}
|
||||
|
||||
.avatar-mini {
|
||||
--this-size: 20px;
|
||||
}
|
||||
|
||||
.shrink0 {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.opacity8 {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Typography / color helpers */
|
||||
.muted-color { color: var(--muted-color, var(--color-ink-3)); }
|
||||
.muted-2-color { color: var(--muted-2-color, var(--color-ink-4)); }
|
||||
|
||||
Reference in new issue
Block a user