fix(frontend): align layouts posts and widgets with zibll
This commit is contained in:
kate522 committed
1 parent
526364b438
commit
5d45eb053b
27 files changed
+3222
-2777
No files matched your search
@@ -57,9 +57,8 @@
|
||||
* body.site-layout-2 = sidebar right
|
||||
* body.site-layout-3 = sidebar left
|
||||
*
|
||||
* Desktop columns use Grid so the sidebar is always a real second column.
|
||||
* The float rules below remain as a narrow-screen compatibility fallback;
|
||||
* below 768px the sidebar is intentionally hidden.
|
||||
* This intentionally uses Zibll's float/negative-margin ownership model.
|
||||
* Below 992px the sidebar is hidden and the content margins collapse.
|
||||
* ============================================================ */
|
||||
|
||||
main.container,
|
||||
@@ -130,14 +129,6 @@ main.content-shell::after,
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Single posts use a theme-specific class. It avoids collisions with legacy
|
||||
* scripts that treat a generic .sidebar node as disposable page chrome. */
|
||||
.aksrt-article-sidebar {
|
||||
display: none;
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.content-layout__aside {
|
||||
min-width: 0;
|
||||
}
|
||||
@@ -198,100 +189,6 @@ body.site-layout-3 .sidebar,
|
||||
position: unset;
|
||||
}
|
||||
|
||||
/* Desktop dual-column geometry.
|
||||
*
|
||||
* A full-width floated .content-wrap plus a negatively-margined sidebar can
|
||||
* leave the sidebar outside the visible painting area when a parent clips
|
||||
* horizontal overflow. Put the two direct children in explicit grid columns
|
||||
* instead, so widgets cannot be positioned off-canvas. */
|
||||
@media (min-width: 768px) {
|
||||
body.site-layout-2 main.container,
|
||||
body.site-layout-2 main.content-shell,
|
||||
body.site-layout-2 .site-main.container {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) var(--sidebar-width, 311px);
|
||||
column-gap: 15px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
body.site-layout-3 main.container,
|
||||
body.site-layout-3 main.content-shell,
|
||||
body.site-layout-3 .site-main.container {
|
||||
display: grid;
|
||||
grid-template-columns: var(--sidebar-width, 311px) minmax(0, 1fr);
|
||||
column-gap: 15px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
body.site-layout-2 main.container::after,
|
||||
body.site-layout-2 main.content-shell::after,
|
||||
body.site-layout-2 .site-main.container::after,
|
||||
body.site-layout-3 main.container::after,
|
||||
body.site-layout-3 main.content-shell::after,
|
||||
body.site-layout-3 .site-main.container::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
body.site-layout-2 main.container > .content-wrap,
|
||||
body.site-layout-2 main.content-shell > .content-wrap,
|
||||
body.site-layout-2 .site-main.container > .content-wrap {
|
||||
float: none;
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
body.site-layout-3 main.container > .content-wrap,
|
||||
body.site-layout-3 main.content-shell > .content-wrap,
|
||||
body.site-layout-3 .site-main.container > .content-wrap {
|
||||
float: none;
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
body.site-layout-2 main.container > .content-wrap > .content-layout,
|
||||
body.site-layout-2 main.content-shell > .content-wrap > .content-layout,
|
||||
body.site-layout-2 .site-main.container > .content-wrap > .content-layout,
|
||||
body.site-layout-3 main.container > .content-wrap > .content-layout,
|
||||
body.site-layout-3 main.content-shell > .content-wrap > .content-layout,
|
||||
body.site-layout-3 .site-main.container > .content-wrap > .content-layout {
|
||||
width: auto;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
body.site-layout-2 main.container > .sidebar,
|
||||
body.site-layout-2 main.content-shell > .sidebar,
|
||||
body.site-layout-2 .site-main.container > .sidebar,
|
||||
body.site-layout-2 main.container > .aksrt-article-sidebar,
|
||||
body.site-layout-2 main.content-shell > .aksrt-article-sidebar,
|
||||
body.site-layout-2 .site-main.container > .aksrt-article-sidebar {
|
||||
display: block;
|
||||
float: none;
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
width: var(--sidebar-width, 311px);
|
||||
margin-left: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
body.site-layout-3 main.container > .sidebar,
|
||||
body.site-layout-3 main.content-shell > .sidebar,
|
||||
body.site-layout-3 .site-main.container > .sidebar,
|
||||
body.site-layout-3 main.container > .aksrt-article-sidebar,
|
||||
body.site-layout-3 main.content-shell > .aksrt-article-sidebar,
|
||||
body.site-layout-3 .site-main.container > .aksrt-article-sidebar {
|
||||
display: block;
|
||||
float: none;
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
width: var(--sidebar-width, 311px);
|
||||
margin-left: 0;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
/* Sticky widgets inside sidebar */
|
||||
@media (min-width: 992px) {
|
||||
body.site-layout-2 .sidebar .posts-nav-box,
|
||||
|
||||
@@ -43,14 +43,13 @@ article.posts-item,
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Custom element <posts> is inline by default — force block layout here only,
|
||||
scoped so it never overrides .posts-item.card inline-block grid (Phase 1 fix). */
|
||||
/* Custom element <posts> is inline by default. */
|
||||
posts.posts-item {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.posts-item.list {
|
||||
display: block;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
font-size: 1rem;
|
||||
}
|
||||
@@ -97,6 +96,40 @@ body.dark-theme .posts-item:hover {
|
||||
margin: 5px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.posts-item:not(.card) .item-thumbnail {
|
||||
width: 138px;
|
||||
}
|
||||
|
||||
.posts-mini .item-thumbnail,
|
||||
.posts-item.list.style2 .item-thumbnail {
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.posts-item .post-graphic:not(.order1) {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.posts-item .order1.post-graphic {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.posts-item .item-heading {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.posts-item:not(.no-thumb) .item-excerpt {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.posts-item.mult-thumb .thumb-items > span {
|
||||
width: calc(33.333% - 6px);
|
||||
padding-bottom: calc(var(--posts-list-scale, 70%) / 3);
|
||||
}
|
||||
|
||||
.posts-item.mult-thumb .thumb-items > span:nth-child(4) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
@@ -113,10 +146,17 @@ body.dark-theme .posts-item:hover {
|
||||
width: 190px;
|
||||
height: 0;
|
||||
padding-bottom: var(--posts-list-scale, 70%);
|
||||
float: left;
|
||||
}
|
||||
|
||||
.posts-item .post-graphic:not(.order1) {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.posts-item .order1.post-graphic {
|
||||
margin-right: 0;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
/* 卡片模式缩略图 */
|
||||
.posts-item.card .item-thumbnail {
|
||||
width: 100%;
|
||||
@@ -334,12 +374,6 @@ body.dark-theme .posts-item:hover {
|
||||
/* ============================================================
|
||||
* 列表模式 clearfix — 对齐 zibll float 布局
|
||||
* ============================================================ */
|
||||
.posts-item:not(.card)::after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* Mini 文章列表 — 对齐 zibll .posts-mini line 7903
|
||||
* ============================================================ */
|
||||
|
||||
Reference in new issue
Block a user