:root { --paper: #faf5e6; --ink: #4d341a; --heading: #4b321f; --muted: #897153; --gold: #c58e04; --gold-hover: #e5aa14; --line: rgba(152,129,97,.7); --gh-font-heading: "SF Pro SC", "PingFang SC", -apple-system, "Hiragino Sans GB", STXihei, "Microsoft YaHei", Heiti, sans-serif; --gh-font-body: "SF Pro SC", "PingFang SC", -apple-system, "Hiragino Sans GB", STXihei, "Microsoft YaHei", Heiti, sans-serif; }
* { box-sizing: border-box; }
html { width: 100%; font-size: 62.5%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { width: 100%; margin: 0; background: #e8dfcb; color: var(--ink); font-family: var(--gh-font-body); font-size: 1.7rem; line-height: 1.7; text-rendering: optimizeLegibility; }
a { color: var(--gold); text-decoration: none; } a:hover { color: var(--gold-hover); } a:focus-visible { border-radius: .2rem; outline: .2rem solid var(--gold); outline-offset: .2rem; }
::selection { background: #e6e6d5; }
h1, h2, h3, h4, h5, h6 { margin: 3rem 0 1rem; color: var(--heading); line-height: 1.35; } h1 { font-size: 3.3rem; } h2 { font-size: 2.9rem; } h3 { font-size: 2.4rem; } h4 { font-size: 2.1rem; } h5 { font-size: 1.7rem; } h6 { font-size: 1.5rem; }
.simple-shell { width: 858px; max-width: calc(100% - 30px); margin: 22px auto 0; padding: 5rem 5.5rem; background: var(--paper); min-height: calc(100vh - 22px); box-shadow: 0 .5rem 1rem .4rem rgba(0, 0, 0, .13); }
.site-header { padding-bottom: 0; } .site-title { margin: 3rem 0 1rem; color: var(--heading); font-size: 3.3rem; line-height: 1.35; } .site-title a { color: var(--heading); }
.site-description { flex: 0 1 auto; color: var(--ink); font-size: 1.5rem; } .site-nav { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: .5rem; font-size: 1.5rem; } .primary-nav { min-width: 0; } .site-nav ul, .post-nav ul { display: flex; flex-wrap: wrap; justify-content: flex-end; margin: 0; padding: 0; list-style: none; } .site-nav li, .post-nav li { display: inline-flex; align-items: center; } .site-nav a { margin-left: .4rem; color: var(--ink); } .primary-nav li:not(:last-child)::after, .post-nav li:not(:last-child)::after { content: "|"; color: var(--muted); margin: 0 .35rem; } .divider { color: var(--muted); margin: 0 .35rem; }
.simple-container { position: relative; } .article-list { margin-top: 2rem; } .article-list ul { margin: 0; padding-left: 1.8rem; } .article-list-item { margin-top: .8rem; padding-left: .2rem; } .article-list-item a { color: var(--ink); } .article-list-item time { float: right; color: var(--muted); font-size: 1.5rem; } .article-list-more { font-weight: 700; } .article-list-more a { color: var(--ink); }
.pagination { display: flex; justify-content: space-between; margin: 2rem 0; font-size: 1.5rem; } .pagination a { color: var(--ink); }
.home-banner { margin: 3.2rem 0; } .home-banner img { display: block; width: 100%; aspect-ratio: 2.885; height: auto; object-fit: cover; border-radius: .5rem; }
.category-nav { color: var(--gold); font-size: 1.6rem; margin-bottom: .5rem; } .category-nav ul { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; } .category-nav li { display: inline-flex; align-items: center; } .category-nav li:not(:last-child)::after { content: "|"; color: var(--muted); } .category-nav a { color: var(--gold); margin: 0 .8rem; } .category-nav li:first-child a { margin-left: 0; } .category-nav .nav-current a { font-weight: 700; }
.post-content { padding-top: 0; } .post-topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; min-height: 2.65rem; padding-bottom: .3rem; border-bottom: 1px solid var(--line); } .back-home { flex: 0 1 auto; color: var(--gold); font-size: 1.5rem; } .post-nav { flex: 1 1 auto; min-width: 0; font-size: 1.5rem; } .post-nav a { margin-left: .4rem; color: var(--gold); } .post-header { padding-bottom: 0; } .post-header h1 { margin: 3rem 0 2.5rem; color: var(--heading); font-size: 3.3rem; line-height: 1.35; } .post-meta { margin-bottom: 2.8rem; color: var(--ink); font-size: 1.5rem; } .post-meta a { color: var(--gold); }
.feature-image { margin: 2.5rem 0; } .feature-image img { display: block; max-width: 100%; height: auto; border-radius: .5rem; }
.kg-width-wide { width:  min(100% + 8rem, 900px); max-width: none; margin-left: -4rem; margin-right: -4rem; }
.kg-width-full { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.article-body { margin-top: 0; } .article-body p { margin: 1.5rem 0; letter-spacing: .05rem; } .article-body > p:first-child { margin-top: 0; } .article-body h2, .article-body h3, .article-body h4, .article-body h5, .article-body h6 { color: var(--ink); line-height: 1.35; margin: 3rem 0 1rem; } .article-body h2 { font-size: 2.9rem; } .article-body h3 { font-size: 2.4rem; } .article-body h4 { font-size: 2.1rem; } .article-body h5 { font-size: 1.7rem; } .article-body h6 { font-size: 1.5rem; } .article-body img { display: block; max-width: 100%; height: auto; border-radius: .5rem; } .article-body figcaption { margin: 1.5rem auto; color: #897153; text-align: center; font-size: 1.3rem; } .article-body blockquote { border-left: .4rem solid #f4d03f; margin: 2.5rem 0; padding: 0 1.6rem; color: var(--muted); } .article-body pre { overflow: auto; margin: 2.5rem 0; padding: 1.6rem; border-radius: .6rem; background: #f1ead1; font-size: 1.4rem; } .article-body code { border-radius: .6rem; background: #f1ead1; padding: .2rem .4rem; } .article-body pre code { padding: 0; background: transparent; }
.article-body table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; } .article-body th, .article-body td { border: 1px solid rgba(154,128,92,.3); padding: .6rem 1.3rem; text-align: left; } .article-body hr { height: .4rem; border: 0; border-bottom: 1px solid var(--line); }
.article-body iframe, .article-body video { max-width: 100%; }
.kg-card { margin: 3rem auto; } .kg-image-card img, .kg-gallery-image img { width: 100%; } .kg-gallery-container { display: flex; flex-direction: column; gap: .8rem; } .kg-gallery-row { display: flex; gap: .8rem; } .kg-gallery-image { flex: 1; } .kg-bookmark-card a { display: flex; overflow: hidden; border: 1px solid rgba(154,128,92,.3); border-radius: .5rem; color: var(--ink); } .kg-bookmark-content { flex: 1; min-width: 0; padding: 1.5rem; } .kg-bookmark-title { font-weight: 700; } .kg-bookmark-description { color: var(--muted); font-size: 1.4rem; } .kg-bookmark-thumbnail { width: 30%; } .kg-bookmark-thumbnail img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; } .kg-callout-card { border-radius: .5rem; } .kg-toggle-card, .kg-file-card, .kg-product-card { border-color: rgba(154,128,92,.3); box-shadow: none; }
.simple-toc { position: fixed; z-index: 10; left: auto; top: 22px; width: 20.8rem; max-height: calc(100vh - 44px); overflow-y: auto; overflow-x: hidden; padding: 0 1.2rem 1rem; border: 1px solid rgba(152,129,97,.4); background: var(--paper); box-shadow: 0 .5rem 1rem rgba(80,50,20,.1); font-size: 1.4rem; }
.simple-toc-head { position: sticky; top: 0; display: flex; justify-content: space-between; padding: .4rem 0; border-bottom: 1px solid rgba(152,129,97,.7); background: var(--paper); }
.simple-toc-head strong { display: block; }
.simple-toc-head a { color: var(--gold); font-size: 1.3rem; }
.simple-toc ul { list-style: none; margin: .5rem 0 0; padding: 0; }
.simple-toc li { line-height: 1.5; margin: .35rem 0; }
.simple-toc li a { color: var(--gold); } .simple-toc li.h3 { padding-left: 1.2rem; } .simple-toc li.h4 { padding-left: 2.4rem; } .simple-toc li.h5 { padding-left: 3.6rem; } .simple-toc li.h6 { padding-left: 4.8rem; } .simple-toc li.is-active { background: #e7e1c8; }
.post-sign { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 1.5rem; margin-top: 4rem; padding-top: 1.5rem; } .post-tags { text-align: right; } .comments { margin-top: 3rem; }
.archive-list { margin-top: 3rem; } .archive-total { margin: 1.5rem 0; } .archive-collections p { margin: 1.5rem 0; } .archive-collections p::before { content: "→"; margin-right: .8rem; color: var(--ink); } .archive-collections a { color: var(--gold); } .posts-list h5 { margin: 3rem 0 1rem; color: var(--heading); font-size: 1.7rem; line-height: 1.35; } .posts-list ul { margin: 1.5rem 0; padding-left: 3rem; list-style: disc; } .posts-list li { margin-top: .8rem; } .posts-list a { color: var(--ink); } .posts-list a:hover { color: var(--gold-hover); } .archive-load-more { display: block; margin: 2rem auto 0; padding: .4rem 1.2rem; border: 0; background: transparent; color: var(--gold); font: inherit; cursor: pointer; } .archive-load-more:hover { color: var(--gold-hover); } .archive-load-more:disabled { cursor: wait; opacity: .7; }
.category-list ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 2rem; margin: 0; padding: 0; list-style: none; } .category-list li { display: flex; justify-content: space-between; border-bottom: 1px solid rgba(152,129,97,.35); padding: .65rem 0; } .category-list li a { color: var(--ink); } .category-list li span { color: var(--muted); font-size: 1.4rem; }
.categories-content { margin-top: 3rem; } .categories-content h2 { margin: 3rem 0 1rem; color: var(--heading); font-size: 2.4rem; } .categories-content h3 { margin: 3rem 0 1rem; color: var(--heading); font-size: 1.7rem; } .categories-content ul { margin: 1.5rem 0; padding-left: 3rem; list-style: disc; } .categories-content li { margin-top: .8rem; } .categories-content a { color: var(--ink); } .categories-content a:hover { color: var(--gold-hover); } .categories-content u { text-underline-offset: .2rem; }
.moments-feed { margin-top: 0; } .moment-item { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); column-gap: 1.4rem; padding: 0 0 2.4rem; margin: 0 0 2.4rem; border-bottom: 1px solid rgba(152,129,97,.22); } .moment-avatar-link { display: block; width: 4.2rem; height: 4.2rem; } .moment-avatar { display: block; width: 4.2rem; height: 4.2rem; border-radius: .5rem; object-fit: cover; } .moment-main { min-width: 0; } .moment-author { color: var(--gold); font-weight: 600; } .moment-body { margin-top: .4rem; overflow-wrap: anywhere; } .moment-body > :first-child { margin-top: 0; } .moment-body > :last-child { margin-bottom: 0; } .moment-body p { margin: .6rem 0; letter-spacing: .05rem; } .moment-body img { display: block; max-width: 100%; height: auto; border-radius: .4rem; } .moment-body .kg-card { margin: 1rem 0; } .moment-image-link { display: block; width: fit-content; max-width: 100%; cursor: zoom-in; } .moment-feature, .moment-post-feature { display: block; width: fit-content; max-width: 100%; margin: 1rem 0 0; } .moment-feature img, .moment-post-feature img { display: block; width: auto; max-width: min(28rem, 100%); max-height: 28rem; border-radius: .4rem; object-fit: contain; } .moment-body .kg-image-card, .post-template.tag-shuoshuo .article-body .kg-image-card { width: fit-content; max-width: min(28rem, 100%); margin: 1rem 0; } .moment-body .kg-image-card img, .post-template.tag-shuoshuo .article-body .kg-image-card img { width: auto; max-width: min(28rem, 100%); max-height: 28rem; object-fit: contain; } .moment-body .kg-gallery-card, .post-template.tag-shuoshuo .article-body .kg-gallery-card { width: min(45rem, 100%); max-width: 100%; margin: 1rem 0; } .moment-body .kg-gallery-container, .post-template.tag-shuoshuo .article-body .kg-gallery-container { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; } .moment-body .kg-gallery-row, .post-template.tag-shuoshuo .article-body .kg-gallery-row { display: contents; } .moment-body .kg-gallery-image, .post-template.tag-shuoshuo .article-body .kg-gallery-image { min-width: 0; aspect-ratio: 1; } .moment-body .kg-gallery-image img, .post-template.tag-shuoshuo .article-body .kg-gallery-image img { width: 100%; height: 100%; border-radius: .3rem; object-fit: cover; } .moment-body .moment-gallery-count-2 .kg-gallery-container, .post-template.tag-shuoshuo .article-body .moment-gallery-count-2 .kg-gallery-container { grid-template-columns: repeat(2, minmax(0, 1fr)); } .moment-meta { margin-top: .8rem; color: var(--muted); font-size: 1.3rem; } .moments-empty { margin: 0 0 3rem 5.6rem; } .moments-load-more { display: block; margin: 0 auto 3rem; padding: .4rem 1.2rem; border: 0; background: transparent; color: var(--gold); font: inherit; cursor: pointer; } .moments-load-more:hover { color: var(--gold-hover); } .tag-redirect-notice { margin: 0 0 3rem; } .tag-redirect-notice a { margin-left: .4rem; }
.moment-item[hidden], .moments-load-more[hidden], .archive-load-more[hidden] { display: none !important; }
.moments-feed .moment-item:last-of-type { border-bottom: 0; }
.moment-body .kg-gallery-row, .moment-body .kg-gallery-image, .post-template.tag-shuoshuo .article-body .kg-gallery-row, .post-template.tag-shuoshuo .article-body .kg-gallery-image { margin: 0 !important; }
.moment-body .kg-gallery-image .moment-image-link, .post-template.tag-shuoshuo .article-body .kg-gallery-image .moment-image-link { width: 100%; height: 100%; }
.moment-auto-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; width: min(45rem, 100%); margin: 1rem 0; }
.moment-auto-gallery.moment-gallery-count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.moment-body .moment-auto-gallery .kg-image-card, .post-template.tag-shuoshuo .article-body .moment-auto-gallery .kg-image-card { width: 100%; max-width: none; margin: 0 !important; aspect-ratio: 1; overflow: hidden; }
.moment-body .moment-auto-gallery .kg-image-card .moment-image-link, .post-template.tag-shuoshuo .article-body .moment-auto-gallery .kg-image-card .moment-image-link { width: 100%; height: 100%; }
.moment-body .moment-auto-gallery .kg-image-card img, .post-template.tag-shuoshuo .article-body .moment-auto-gallery .kg-image-card img { width: 100%; max-width: none; height: 100%; max-height: none; border-radius: .3rem; object-fit: cover; }
.moment-lightbox[hidden] { display: none; } body.moment-lightbox-open { overflow: hidden; } .moment-lightbox { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 2rem; background: rgba(25,18,10,.88); } .moment-lightbox-image { display: block; width: auto; max-width: calc(100vw - 4rem); height: auto; max-height: calc(100vh - 4rem); border-radius: .3rem; object-fit: contain; } .moment-lightbox-close { position: fixed; top: 1.2rem; right: 1.5rem; width: 4.2rem; height: 4.2rem; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: #3d2816; font: 3.2rem/1 sans-serif; cursor: pointer; } .moment-lightbox-close:hover, .moment-lightbox-close:focus-visible { background: #fff; outline: 2px solid var(--gold); outline-offset: 2px; }
.about-footer { border-top: 1px solid rgba(152,129,97,.2); margin-top: 1.6rem; margin-bottom: -3.2rem; padding-top: 1.4rem; font-size: 1.5rem; } .about-saying { float: left; } .about-avatar { display: inline; width: 2.3rem; height: 2.3rem; margin-right: 1rem; vertical-align: middle; } .about-nav { float: right; } .about-nav a { color: var(--ink); } .clear { clear: both; }
.site-footer { color: var(--muted); font-size: 1.3rem; line-height: 1.3; padding: 3.6rem 0 2.5rem; text-align: center; } .site-footer a { color: var(--muted); } .site-footer a:hover { color: var(--gold-hover); }
@media (min-width: 701px) { .site-header { margin-bottom: 3rem; } }
@media (min-width: 1921px) { .simple-shell { width: 1134px; } }
@media only screen and (max-width: 1281px) and (min-device-width: 1281px) { .simple-shell { width: 778px; } }
@media only screen and (max-width: 1195px) and (min-device-width: 1281px) { .simple-shell { width: 670px; } }
@media only screen and (max-width: 1100px) and (min-device-width: 1281px) { .simple-shell { width: 670px; min-width: 610px; } }
@media (max-width: 1100px) { .simple-toc { display: none; } }
@media (max-width: 700px) { body { font-size: 1.8rem; } .simple-shell { width: 100%; max-width: none; min-width: 0; margin-top: 0; min-height: 100vh; padding: 1.5rem; box-shadow: none; } .site-title { margin-top: 1.5rem; } .site-nav { display: block; line-height: 2.2; } .site-description { display: block; } .primary-nav { display: block; text-align: left; } .site-nav ul, .post-nav ul { justify-content: flex-start; } .site-nav a:first-child { margin-left: 0; } .post-topbar { display: block; min-height: 0; padding-bottom: .6rem; } .post-topbar .back-home { display: block; max-width: none; } .post-nav { display: block; text-align: left; } .post-nav a:first-child { margin-left: 0; } .article-list-item time { display: none; } .post-header h1 { font-size: 2.8rem; } .post-sign { display: block; } .post-tags { display: block; margin-top: .5rem; text-align: left; } .category-list ul { grid-template-columns: 1fr; } .moment-item { grid-template-columns: 3.6rem minmax(0, 1fr); column-gap: 1rem; padding-bottom: 2rem; margin-bottom: 2rem; } .moment-avatar-link, .moment-avatar { width: 3.6rem; height: 3.6rem; } .moment-feature img, .moment-post-feature img, .moment-body .kg-image-card img, .post-template.tag-shuoshuo .article-body .kg-image-card img { max-width: min(68vw, 28rem); max-height: 28rem; } .moment-body .kg-gallery-card, .post-template.tag-shuoshuo .article-body .kg-gallery-card { width: min(78vw, 45rem); } .about-footer { display: none; } .about-nav { float: none; margin-top: .5rem; } .kg-bookmark-card a { display: block; } .kg-bookmark-thumbnail { width: 100%; max-height: 20rem; } }
.section-index:not(.has-header-banner) .site-header { margin-bottom: 0; padding-bottom: 1.4rem; border-bottom: 1px solid rgba(152,129,97,.25); }
.section-index:not(.has-header-banner) .simple-container { display: flow-root; padding-top: 1.8rem; }
.section-index .archive-list, .section-index .archive-total, .section-index .links-page { margin-top: 0; }
.section-index .article-body > :first-child,
.section-index .home-intro > :first-child,
.section-index .post-header:first-child > :first-child { margin-top: 0; }
.section-index .categories-intro:empty { display: none; }
.section-index .categories-intro:empty + .categories-content,
.section-index .categories-intro:empty + .categories-content > :first-child > :first-child { margin-top: 0; }
@media (max-width: 700px) {
    .section-index:not(.has-header-banner) .site-header { padding-bottom: 1.2rem; }
    .section-index:not(.has-header-banner) .simple-container { padding-top: 1.6rem; }
}
@media print { body { background: #fff; } .simple-shell { width: 100%; max-width: none; margin: 0; padding: 0; box-shadow: none; } .site-header, .site-footer, .post-topbar, .comments, .simple-toc { display: none; } pre, code { white-space: pre-wrap; overflow-wrap: anywhere; } }