feat(frontend): align single post page 1:1 with Zibll

Restore Zibll float dual-column shell, fix single settings DTO key mapping,
reorder article footer/actions, and match author bar, prev/next, title/body
typography, and limit-height expand UX.
This commit is contained in:
kate522 committed 2026-07-13 08:26:36 +08:00
1 parent a651bd6d2d
commit 5ae1a9ad93
12 files changed
+626 -218

No files matched your search

+63 -12
View File
@@ -1,20 +1,31 @@
/* ========== Single Post ========== */
.entry-header,
.article-header {
margin-bottom: 28px;
padding-bottom: 18px;
border-bottom: 1px solid var(--color-line-soft);
margin-bottom: 10px;
padding-bottom: 0;
border-bottom: none;
}
/* 标题 — 对齐 zibll: 22px, bold, line-height 1.4 */
.entry-title,
.article-title {
font-size: 28px;
font-weight: 700;
margin: 0 0 18px;
line-height: 1.35;
letter-spacing: -0.01em;
color: var(--color-ink);
font-size: 22px;
font-weight: bold;
margin: 0;
line-height: 1.4;
letter-spacing: 0;
color: var(--key-color, var(--color-ink));
}
.article-header .article-title {
font-size: 22px;
font-weight: bold;
color: var(--key-color, var(--color-ink));
margin-top: 15px;
}
.article-header .article-avatar {
margin-top: 15px;
}
.entry-meta {
@@ -40,15 +51,55 @@
}
/* 内容区 — 对齐 zibll: 16px, line-height 2 */
.entry-content {
.entry-content,
.wp-posts-content {
font-size: 16px;
line-height: 1.95;
color: var(--color-ink);
line-height: 2;
color: var(--main-color, var(--color-ink));
overflow-wrap: break-word;
word-wrap: break-word;
min-height: 90px;
}
/* Zibll content heading bars */
.wp-posts-content > h1:not([class]),
.wp-posts-content > h2:not([class]),
.wp-posts-content > h3:not([class]),
.wp-posts-content > h4:not([class]),
.wp-posts-content > h1.wp-block-heading,
.wp-posts-content > h2.wp-block-heading,
.wp-posts-content > h3.wp-block-heading,
.wp-posts-content > h4.wp-block-heading {
position: relative;
padding-bottom: 8px;
}
.wp-posts-content > h1:not([class]):before,
.wp-posts-content > h2:not([class]):before,
.wp-posts-content > h3:not([class]):before,
.wp-posts-content > h4:not([class]):before,
.wp-posts-content > h1.wp-block-heading:before,
.wp-posts-content > h2.wp-block-heading:before,
.wp-posts-content > h3.wp-block-heading:before,
.wp-posts-content > h4.wp-block-heading:before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 40px;
height: 3px;
background: var(--theme-color, var(--focus-color, #f04494));
border-radius: 5px;
}
.wp-posts-content > h3:not([class]):before,
.wp-posts-content > h4:not([class]):before,
.wp-posts-content > h3.wp-block-heading:before,
.wp-posts-content > h4.wp-block-heading:before {
width: 28px;
height: 2px;
}
.entry-content > *:first-child {
margin-top: 0;
}