feat: deepen single post experience
This commit is contained in:
1 parent
a00db4538f
commit
2086f938ed
8 files changed
+265
-81
No files matched your search
@@ -1,4 +1,4 @@
|
||||
/* ========== 浠g爜鍧?GitHub 椋庢牸 ========== */
|
||||
/* ========== 代码块:GitHub 风格 ========== */
|
||||
.code-block {
|
||||
border-radius: var(--radius-code);
|
||||
border: 1px solid var(--color-line);
|
||||
@@ -52,8 +52,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
.entry-content pre.wp-block-code,
|
||||
.entry-content pre:not(.wp-block-preformatted) {
|
||||
:is(.entry-content, .wp-posts-content) pre.wp-block-code,
|
||||
:is(.entry-content, .wp-posts-content) pre:not(.wp-block-preformatted) {
|
||||
border-radius: var(--radius-code);
|
||||
border: 1px solid var(--color-line);
|
||||
background: var(--surface-3);
|
||||
@@ -61,7 +61,7 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.entry-content pre code {
|
||||
:is(.entry-content, .wp-posts-content) pre code {
|
||||
display: block;
|
||||
padding: 16px 20px;
|
||||
overflow-x: auto;
|
||||
|
||||
@@ -129,27 +129,33 @@ article.article.box-body,
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.entry-content > *:first-child {
|
||||
:is(.entry-content, .wp-posts-content) > *:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.entry-content p {
|
||||
:is(.entry-content, .wp-posts-content) p {
|
||||
margin: 0 0 1.5em;
|
||||
}
|
||||
|
||||
.entry-content h2 {
|
||||
:is(.entry-content, .wp-posts-content) h2 {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
margin: 20px 0 10px;
|
||||
margin: 28px 0 14px;
|
||||
}
|
||||
|
||||
.entry-content h3 {
|
||||
:is(.entry-content, .wp-posts-content) h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
margin: 20px 0 10px;
|
||||
margin: 24px 0 12px;
|
||||
}
|
||||
|
||||
.entry-content blockquote {
|
||||
:is(.entry-content, .wp-posts-content) h4 {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
margin: 22px 0 10px;
|
||||
}
|
||||
|
||||
:is(.entry-content, .wp-posts-content) blockquote {
|
||||
margin: 0 0 24px;
|
||||
padding: 18px 20px;
|
||||
border-left: 4px solid var(--color-primary);
|
||||
@@ -158,11 +164,29 @@ article.article.box-body,
|
||||
color: var(--color-ink-3);
|
||||
}
|
||||
|
||||
.entry-content img {
|
||||
:is(.entry-content, .wp-posts-content) img {
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: min(8px, var(--main-radius, 8px));
|
||||
}
|
||||
|
||||
:is(.entry-content, .wp-posts-content) figure {
|
||||
max-width: 100%;
|
||||
margin: 1.5em auto;
|
||||
}
|
||||
|
||||
:is(.entry-content, .wp-posts-content) figcaption {
|
||||
margin-top: 8px;
|
||||
color: var(--muted-color, #777);
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:is(.entry-content, .wp-posts-content) .aksrt-lightbox-target {
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
/* ===== 图片灯箱 ===== */
|
||||
@@ -226,14 +250,14 @@ article.article.box-body,
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.entry-content iframe,
|
||||
.entry-content .wp-block-embed iframe,
|
||||
.entry-content video {
|
||||
:is(.entry-content, .wp-posts-content) iframe,
|
||||
:is(.entry-content, .wp-posts-content) .wp-block-embed iframe,
|
||||
:is(.entry-content, .wp-posts-content) video {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.entry-content .wp-block-embed {
|
||||
:is(.entry-content, .wp-posts-content) .wp-block-embed {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
@@ -242,7 +266,7 @@ article.article.box-body,
|
||||
}
|
||||
|
||||
/* 行内代码 — 对齐 zibll: 粉色文字 + 粉色背景 */
|
||||
.entry-content code {
|
||||
:is(.entry-content, .wp-posts-content) code {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.9em;
|
||||
color: #ff3c98;
|
||||
@@ -251,13 +275,13 @@ article.article.box-body,
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.entry-content ul,
|
||||
.entry-content ol {
|
||||
:is(.entry-content, .wp-posts-content) ul,
|
||||
:is(.entry-content, .wp-posts-content) ol {
|
||||
padding-left: 1.5em;
|
||||
margin: 0 0 1.5em;
|
||||
}
|
||||
|
||||
.entry-content ul li::marker {
|
||||
:is(.entry-content, .wp-posts-content) ul li::marker {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
|
||||
@@ -40,3 +40,72 @@ body.single .sidebar .widget {
|
||||
body.single main.container {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Reading facts below the author row. */
|
||||
.article-reading-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px 14px;
|
||||
margin: 12px 0 2px;
|
||||
color: var(--muted-color, #777);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.article-reading-meta span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
/* Useful fallback for sites that enable the column before adding widgets. */
|
||||
.single-overview-widget {
|
||||
padding: 18px;
|
||||
border-radius: var(--main-radius, 8px);
|
||||
background: var(--main-bg-color, #fff);
|
||||
box-shadow: 0 0 10px var(--main-shadow, rgba(116, 116, 116, 0.08));
|
||||
}
|
||||
|
||||
.single-overview-widget__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin: 0 0 12px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.single-overview-widget__title i {
|
||||
color: var(--focus-color, #f04494);
|
||||
}
|
||||
|
||||
.single-overview-widget__list {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.single-overview-widget__list > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px dashed var(--main-border-color, rgba(50, 50, 50, 0.08));
|
||||
}
|
||||
|
||||
.single-overview-widget__list > div:last-child {
|
||||
padding-bottom: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.single-overview-widget__list dt,
|
||||
.single-overview-widget__list dd {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.single-overview-widget__list dt {
|
||||
color: var(--muted-color, #777);
|
||||
}
|
||||
|
||||
.single-overview-widget__list dd {
|
||||
color: var(--key-color, #333);
|
||||
text-align: right;
|
||||
}
|
||||
Reference in new issue
Block a user