/*
Theme Name: Tiny
Author: 小明
Description: 极简的黑白灰主题：干净的排版、克制的配色、不打扰阅读。680px 单栏、语义化配色变量、内置深色模式、文章目录、图片灯箱、代码高亮与文末互动。内置公告、轮播、七个独立页模板（归档/友链/留言板/标签/分类/关于/统计），以及蜜罐 + 加密令牌 + 算术题三层评论防护，全部开关集中在后台左侧边栏的「Tiny 主题设置」。
Version: 1.8.5
Requires PHP: 8.0
Requires at least: 6.0
Tested up to: 7.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tiny
Tags: blog, one-column, custom-colors, custom-menu, dark-mode, featured-images, threaded-comments, translation-ready
*/
:root {
color-scheme: light;
--fg-strong: #16181d;
--fg-2: #2c3039;
--fg-3: #4d535e;
--fg-4: #5e646f;
--fg-8: #6b7280;
--fg-body: #31353d;
--bg-page: #f7f9fc;
--bg-card: #ffffff;
--bg-subtle: #f2f5fa;
--bg-hover: #eef2f8;
--bg-inset: #e8edf5;
--code-bg: #eef2f8;
--border: #e6e9ef;
--border-weak: #eef1f6;
--border-strong: #dde2ea;
--border-hover: #b6bec9;
--border-focus: #cfd6e0;
--btn-bg: #1b2333;
--btn-bg-hover: #2f3b52;
--btn-fg: #ffffff;
--fg-error: #c0392b;
--tiny-accent: #2f5fd0;
--tiny-accent-rgb: 47, 95, 208;
--dur-fast: 0.15s;
--dur-base: 0.2s;
--r-sm: 4px;
--r-md: 8px;
--r-pill: 999px;
--title-actual: var(--tiny-title-size, 32px);
--tiny-ui: 13.5px;
--tiny-ui-2: 12.5px;
--tiny-ui-3: 12px;
--tiny-mono: "SF Mono", Consolas, Menlo, monospace;
--page-gap-top: 48px;
--hero-gap-top: 32px;
--hero-gap-bottom: 40px;
--tiny-logo-size: 17px;
--tiny-logo-h: 30px;
--tiny-subtitle-size: 13.5px;
--tiny-nav-size: 13.5px;
--tiny-icon-size: 26px;
--tiny-search-w: 140px;
}
* { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scrollbar-gutter: stable;
}
body {
margin: 0;
background: var(--bg-page);
color: var(--fg-strong);
font-family: var(--tiny-font, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif);
font-size: 16px;
line-height: 1.8;
}
::selection {
background: rgba(var(--tiny-accent-rgb), 0.22);
color: var(--fg-strong);
}
.post-title,
.archive-title,
.post-content h1,
.post-content h2,
.post-content h3,
.list-body > a,
.near-title,
.related-title,
.carousel-caption {
text-wrap: balance;
}
.post-content p,
.list-excerpt,
.notice-list p {
text-wrap: pretty;
}
:root {
--frame-w: 680px;
--toc-w: 184px;
}
.wrap {
max-width: var(--frame-w);
margin: 0 auto;
padding: 0 20px;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.skip-link {
position: fixed;
top: 8px;
left: 8px;
z-index: 200;
padding: 8px 14px;
border-radius: var(--r-md);
background: var(--btn-bg);
color: var(--btn-fg);
font-size: var(--tiny-ui);
text-decoration: none;
transform: translateY(-160%);
transition: transform var(--dur-fast) ease;
}
.skip-link:focus {
transform: translateY(0);
color: var(--btn-fg);
text-decoration: none;
}
a { color: var(--fg-strong); text-decoration: none; }
a:hover { color: var(--fg-strong); text-decoration: underline; }
.site-header {
border-bottom: 1px solid var(--border);
margin-bottom: var(--page-gap-top);
}
.site-header:has(+ main.wrap > :is(.notice, .carousel):first-child) {
margin-bottom: var(--hero-gap-top);
}
.header-inner {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 30px;
padding-bottom: 22px;
flex-wrap: wrap;
gap: 12px 24px;
}
.header-right {
display: flex;
align-items: center;
gap: 12px;
}
.header-panel {
display: flex;
align-items: center;
gap: 8px;
}
.nav-toggle {
display: none;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
}
.search-box { position: relative; }
.search-box form {
position: relative;
display: flex;
align-items: center;
}
.search-box input {
width: var(--tiny-icon-size);
height: var(--tiny-icon-size);
border: 1px solid transparent;
border-radius: var(--r-md);
background: transparent;
color: var(--fg-strong);
padding: 0 6px 0 calc(var(--tiny-icon-size) - 8px);
font-size: max(11px, calc(var(--tiny-nav-size) - 1px));
font-family: inherit;
outline: none;
overflow: hidden;
white-space: nowrap;
transition: width var(--dur-base) cubic-bezier(0.4, 0, 0.2, 1),
border-color var(--dur-base), background var(--dur-base),
padding var(--dur-base);
}
.search-box input:focus,
.search-box.expanded input {
width: var(--tiny-search-w);
border-color: var(--border-focus);
background: var(--bg-subtle);
padding: 0 calc(var(--tiny-icon-size) + 4px) 0 10px;
}
.search-box input::placeholder { color: var(--fg-8); }
.search-icon {
position: absolute;
right: 0;
top: 0;
}
.search-box input:focus ~ .search-icon,
.search-box.expanded .search-icon { color: var(--fg-strong); }
.search-icon .tiny-icon,
.theme-toggle .tiny-icon,
.nav-toggle .tiny-icon,
.m-search-toggle svg {
width: calc(var(--tiny-icon-size) * 0.65);
height: calc(var(--tiny-icon-size) * 0.65);
fill: currentColor;
}
.search-box.has-text .search-icon {
color: var(--tiny-accent);
}
.search-box.has-text .search-icon:hover {
color: var(--tiny-accent);
opacity: 0.75;
}
.header-brand {
display: block;
line-height: 1;
min-width: 0;
}
.site-name {
font-size: var(--tiny-logo-size);
font-weight: 600;
letter-spacing: 0.09em;
display: inline-block;
vertical-align: baseline;
}
.site-logo-img {
height: var(--tiny-logo-h);
display: inline-block;
vertical-align: baseline;
}
.site-subtitle {
font-size: var(--tiny-subtitle-size);
color: var(--fg-8);
line-height: 1;
display: inline-block;
vertical-align: baseline;
margin-left: calc(var(--tiny-logo-size) * 0.53);
position: relative;
top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 46vw;
}
.site-name:hover { text-decoration: none; }
.site-nav {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
font-size: var(--tiny-nav-size);
}
.site-nav a {
color: var(--fg-3);
font-size: var(--tiny-nav-size);
letter-spacing: 0.05em;
padding: 0.45em 0.8em;
position: relative;
transition: color var(--dur-fast);
}
.site-nav a:hover { color: var(--tiny-accent); text-decoration: none; }
.site-nav a.active {
color: var(--fg-strong);
font-weight: 600;
}
.site-nav a.active::after {
content: '';
position: absolute;
left: 0.8em;
right: 0.8em;
bottom: 0.37em;
height: 2px;
border-radius: 1px;
background: var(--tiny-accent);
}
.nav-item {
position: relative;
display: flex;
align-items: center;
}
.nav-cats-link, .nav-pages-link { cursor: pointer; }
.nav-dropdown {
display: none;
position: absolute;
top: 100%;
left: 0;
transform: none;
min-width: 128px;
padding: 5px 0 0;
z-index: 100;
background: none;
border: none;
box-shadow: none;
}
.nav-dropdown::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 5px;
bottom: 0;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-md);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
.nav-dropdown > a { position: relative; }
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown { display: block; }
.site-nav > .nav-item:last-child .nav-dropdown { left: auto; right: 0; }
.nav-dropdown a {
display: block;
margin: 0 5px;
padding: 7px 12px;
border-radius: var(--r-md);
font-size: var(--tiny-nav-size);
color: var(--fg-3);
white-space: nowrap;
}
.nav-dropdown a:first-of-type { margin-top: 4px; }
.nav-dropdown a:last-of-type { margin-bottom: 4px; }
.nav-dropdown a:hover { background: var(--bg-hover); color: var(--fg-strong); text-decoration: none; }
.nav-dropdown a.current { color: var(--fg-strong); font-weight: 600; }
.nav-dropdown .nav-child { padding-left: 26px; font-size: max(11px, calc(var(--tiny-nav-size) - 1px)); color: var(--fg-3); }
.archive-title {
font-size: var(--title-actual, 32px);
font-weight: 700;
margin: 0 0 32px;
}
.post-list {
list-style: none;
margin: 0;
padding: 0;
}
.post-list li {
display: flex;
align-items: baseline;
gap: 16px;
padding: 12px 0;
border-bottom: 1px solid var(--border-weak);
}
.post-list li:last-child { border-bottom: none; }
.post-list time {
color: var(--fg-8);
font-size: var(--tiny-ui-2);
letter-spacing: 0.07em;
padding-top: 1px;
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
.post-list a {
font-size: 16px;
letter-spacing: 0.01em;
color: var(--fg-strong);
}
.post-list a:hover { color: var(--tiny-accent); text-decoration: none; }
.post-list .list-body { flex: 1; min-width: 0; }
.post-list li.has-thumb { align-items: center; }
.post-list .list-thumb {
flex: 0 0 72px;
width: 72px;
height: 48px;
overflow: hidden;
border-radius: var(--r-sm);
border: 1px solid var(--border);
background: var(--bg-subtle);
}
.post-list .list-thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.list-excerpt {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
margin: 4px 0 0;
font-size: var(--tiny-ui);
line-height: 1.6;
color: var(--fg-8);
}
.empty { color: var(--fg-8); }
.empty-block { padding: 40px 0; text-align: center; }
.pagination {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 4px;
width: fit-content;
margin: 40px auto 0;
padding: 0;
list-style: none;
font-size: var(--tiny-ui);
color: var(--fg-8);
}
.pagination a,
.pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 30px;
height: 30px;
padding: 0 9px;
border-radius: var(--r-sm);
color: var(--fg-8);
transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.pagination a:hover {
background: var(--bg-hover);
color: var(--fg-strong);
text-decoration: none;
}
.pagination .current { color: var(--fg-strong); font-weight: 600; }
.pagination .current a,
.pagination .current span { color: var(--fg-strong); }
.pagination .dots { color: var(--fg-8); }
.post { margin-bottom: 48px; }
.post-content h2,
.post-content h3,
.comment-item {
scroll-margin-top: 40px;
}
.admin-bar .post-content h2,
.admin-bar .post-content h3,
.admin-bar .comment-item {
scroll-margin-top: 76px;
}
.post-title {
font-size: var(--title-actual, 32px);
font-weight: 600;
letter-spacing: -0.018em;
line-height: 1.32;
margin: 0 0 10px;
}
.post-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 2px 14px;
color: var(--fg-8);
font-size: var(--tiny-ui);
letter-spacing: 0.03em;
margin-bottom: 48px;
}
.post-meta .meta-item { white-space: nowrap; }
.post-meta .meta-cats { white-space: normal; }
.post-meta time { color: var(--fg-4); }
.post-meta a { color: var(--fg-8); }
.post-meta a:hover { color: var(--fg-strong); }
.post-meta .meta-read,
.post-meta .meta-chars,
.post-meta .meta-views { font-variant-numeric: tabular-nums; }
.post-thumb {
margin: 0;
}
.post-thumb img {
display: block;
width: 100%;
height: auto;
border-radius: var(--r-sm);
border: 1px solid var(--border);
background: var(--bg-subtle);
}
.post-title + .post-thumb { margin-top: 16px; }
.post-thumb + .post-meta { margin-top: 16px; }
.post-password-form p {
margin: 0;
font-size: var(--tiny-ui);
line-height: 2;
color: var(--fg-4);
}
.post-password-form label { color: var(--fg-3); }
.post-password-form input[type="password"] {
width: 180px;
margin: 0 6px;
padding: 7px 11px;
border: 1px solid var(--border-strong);
border-radius: var(--r-md);
background: var(--bg-card);
font-size: var(--tiny-ui);
font-family: inherit;
color: var(--fg-strong);
transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.post-password-form input[type="password"]:focus {
outline: none;
border-color: var(--tiny-accent);
box-shadow: 0 0 0 3px rgba(var(--tiny-accent-rgb), .07);
}
.post-password-form input[type="submit"] {
padding: 7px 20px;
border: 1px solid var(--btn-bg);
border-radius: var(--r-pill);
background: var(--btn-bg);
color: var(--btn-fg);
font-size: var(--tiny-ui);
font-family: inherit;
cursor: pointer;
transition: opacity var(--dur-fast), background var(--dur-fast);
}
.post-password-form input[type="submit"]:hover { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); }
.post-content {
font-size: var(--tiny-content-size, 17px);
line-height: 1.75;
letter-spacing: 0.008em;
overflow-wrap: break-word;
text-autospace: normal;
}
.post-content h1 {
font-size: min(1.7em, calc(var(--title-actual) * .86));
font-weight: 700;
margin: 2em 0 0.6em;
}
.post-content h2 {
font-size: min(1.5em, calc(var(--title-actual) * .8));
font-weight: 700;
margin: 2em 0 0.6em;
}
.post-content h3 {
font-size: min(1.2em, calc(var(--title-actual) * .66));
font-weight: 700;
margin: 1.8em 0 0.6em;
}
.post-content h4 { font-size: 1em; font-weight: 700; }
.post-content p { margin: 1.15em 0; }
.post-content p + p { margin-top: 1.5em; }
.post-content a {
color: var(--tiny-accent);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
text-decoration-color: rgba(var(--tiny-accent-rgb), 0.28);
}
.post-content a:hover {
text-decoration-color: var(--tiny-accent);
opacity: 1;
}
.post-content img {
max-width: 100%;
height: auto;
display: block;
margin: 1.6em auto;
border-radius: var(--r-sm);
border: 1px solid var(--border);
background: var(--bg-subtle);
}
.post-content img.is-portrait {
max-width: 50%;
}
.post-content img.is-portrait.is-slim {
max-width: 38%;
}
.post-content img.img-preload {
opacity: 0;
transition: opacity var(--dur-base) ease;
}
.post-content img[width="100%"],
.post-content img.u-wide {
display: block;
}
.post-content figure {
margin: 1.6em 0;
text-align: center;
}
.post-content figure img {
margin: 0 auto;
}
.post-content figcaption {
margin-top: 8px;
font-size: var(--tiny-ui-2);
line-height: 1.6;
color: var(--fg-8);
text-align: center;
}
.post-content figcaption::before {
content: '';
display: block;
width: 28px;
height: 1px;
background: var(--bg-inset);
margin: 0 auto 8px;
}
.post-content .img-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 10px;
margin: 1.6em 0;
}
.post-content .img-row img {
margin: 0;
width: 100%;
max-width: none;
}
.post-content .img-row img.is-portrait,
.post-content .img-row img.is-slim {
max-width: none;
}
.post-content img.inline-icon {
display: inline-block;
vertical-align: middle;
margin: 0 0.2em;
border: none;
background: none;
border-radius: var(--r-sm);
max-width: none;
}
.post-content ul, .post-content ol { padding-left: 1.6em; }
.post-content blockquote {
margin: 1.2em 0;
padding: 0.6em 1em;
border-left: 2px solid rgba(var(--tiny-accent-rgb), 0.35);
background: rgba(var(--tiny-accent-rgb), 0.025);
color: var(--fg-4);
}
.post-content hr { border: none; border-top: 1px solid var(--border); margin: 2em 0; }
.post-content table { display: block; width: max-content; min-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 1.2em 0; }
.post-content th, .post-content td { border-bottom: 1px solid var(--border); padding: 8px 10px; text-align: left; }
.post-content th { font-size: .875em; font-weight: 600; }
.post-content td { font-size: .9375em; }
.post-content pre {
background: var(--code-bg);
border: 1px solid var(--border);
padding: 16px;
overflow-x: auto;
font-family: var(--tiny-mono, "SF Mono", Consolas, Menlo, monospace);
font-size: 0.875em;
line-height: 1.6;
border-radius: var(--r-md);
}
.post-content code {
font-family: var(--tiny-mono, "SF Mono", Consolas, Menlo, monospace);
background: var(--bg-hover);
padding: 2px 5px;
font-size: 0.9em;
}
.post-content pre code.hljs {
padding: 0;
background: transparent;
}
.post-content pre code { padding: 0; background: none; }
.code-block { position: relative; }
.code-copy {
position: absolute;
top: 8px;
right: 8px;
z-index: 2;
padding: 2px 8px;
border: 1px solid rgba(127, 127, 127, 0.24);
border-radius: var(--r-sm);
background: rgba(127, 127, 127, 0.13);
color: var(--fg-3);
font-family: inherit;
font-size: var(--tiny-ui-2);
line-height: 1.6;
cursor: pointer;
opacity: 0;
transition: opacity var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.code-block:hover .code-copy,
.code-copy:focus-visible { opacity: 1; }
.code-copy:hover { color: var(--fg-strong); border-color: var(--border-hover); }
.code-copy.is-done { opacity: 1; color: var(--tiny-accent); border-color: var(--tiny-accent); }
@media (hover: none) {
.code-copy { opacity: 0.75; }
}
.lightbox-mask {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(0, 0, 0, 0.85);
display: flex;
align-items: center;
justify-content: center;
cursor: zoom-out;
user-select: none;
touch-action: none;
overscroll-behavior: none;
}
.lightbox-mask img {
max-width: 92vw;
max-height: 92vh;
box-shadow: 0 4px 40px rgba(0, 0, 0, 0.5);
border-radius: 0;
cursor: zoom-in;
transition: transform var(--dur-fast) ease;
will-change: transform;
}
.post-tags {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 12px;
margin-top: 48px;
font-size: var(--tiny-ui);
color: var(--fg-8);
}
.post-tags a { color: var(--fg-8); white-space: nowrap; }
.post-tags a::before {
content: "#";
color: var(--fg-8);
margin-right: 1px;
}
.post-tags a:hover {
color: var(--tiny-accent);
text-decoration: none;
}
.post-updated {
margin-left: auto;
color: var(--fg-8);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.post-copyright {
margin-top: 48px;
font-size: var(--tiny-ui);
line-height: 1.7;
color: var(--fg-8);
}
.post-tags + .post-copyright { margin-top: 16px; }
.post-copyright a {
color: var(--fg-8);
text-decoration: underline;
text-decoration-color: var(--border-hover);
text-underline-offset: 3px;
}
.post-copyright a:hover { color: var(--fg-strong); text-decoration: none; }
.post-actions {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 48px;
padding-top: 14px;
border-top: 1px solid var(--border);
}
.pa-group {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.pa-btn {
display: inline-flex;
align-items: center;
gap: 7px;
margin: 0;
padding: 9px 16px;
border: 0;
border-radius: var(--r-pill);
background: none;
font: inherit;
font-size: var(--tiny-ui);
line-height: 1;
color: var(--fg-3);
cursor: pointer;
transition: color var(--dur-fast) ease, background-color var(--dur-fast) ease;
-webkit-tap-highlight-color: transparent;
}
.pa-btn:hover { color: var(--fg-strong); background: var(--bg-hover); }
.pa-btn:focus-visible {
outline: 2px solid var(--tiny-accent);
outline-offset: 2px;
}
.pa-ico { display: inline-flex; }
.pa-ico svg { width: 17px; height: 17px; fill: currentColor; }
.pa-count {
color: var(--fg-8);
font-variant-numeric: tabular-nums;
transition: color var(--dur-fast) ease;
}
.pa-count.is-zero { display: none; }
.pa-btn:hover .pa-count { color: var(--fg-3); }
.pa-btn.is-liked,
.pa-btn.is-liked .pa-count { color: var(--tiny-accent); }
.pa-btn.is-liked .pa-ico { animation: pa-pop 0.36s ease; }
@keyframes pa-pop {
0% { transform: scale(1); }
45% { transform: scale(1.24); }
100% { transform: scale(1); }
}
.post-qr {
flex-basis: 100%;
display: none;
justify-content: center;
padding-top: 10px;
}
.post-qr.is-open {
display: flex;
animation: qr-in var(--dur-base) ease;
}
@keyframes qr-in {
from { opacity: 0; transform: translateY(-5px); }
to { opacity: 1; transform: none; }
}
.post-qr-card {
padding: 12px 12px 10px;
border: 1px solid var(--border);
border-radius: var(--r-md);
background: var(--bg-card);
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.14);
text-align: center;
}
html[data-theme="dark"] .post-qr-card {
background: var(--bg-hover);
border-color: var(--border-hover);
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}
.post-qr-code {
display: flex;
align-items: center;
justify-content: center;
width: 160px;
height: 160px;
padding: 0;
border-radius: var(--r-md);
background: #fff;
overflow: hidden;
}
.post-qr-code img,
.post-qr-code canvas,
.post-qr-code table { display: block; }
.post-qr-code img,
.post-qr-code canvas {
width: 160px;
height: 160px;
}
.post-qr-tip {
margin: 8px 0 0;
font-size: var(--tiny-ui-2);
color: var(--fg-8);
}
.pa-tip {
position: absolute;
z-index: 60;
padding: 8px 13px;
border-radius: var(--r-md);
background: var(--btn-bg);
color: var(--btn-fg);
font-size: var(--tiny-ui);
line-height: 1;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transform: translate(-50%, -100%) translateY(-2px);
transition: opacity var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.pa-tip.is-open {
opacity: 1;
transform: translate(-50%, -100%) translateY(-9px);
}
.pa-tip.is-below {
transform: translate(-50%, 0) translateY(2px);
}
.pa-tip.is-below.is-open {
transform: translate(-50%, 0) translateY(9px);
}
.pa-tip::after {
content: "";
position: absolute;
left: 50%;
top: 100%;
width: 7px;
height: 7px;
margin: -4px 0 0 -3.5px;
background: var(--btn-bg);
transform: rotate(45deg);
}
.pa-tip.is-below::after {
top: auto;
bottom: 100%;
margin: 0 0 -3.5px -3.5px;
}
.post-near {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin: 0 0 40px;
padding: 0;
list-style: none;
}
.post-near.is-last { margin-bottom: 48px; }
.near-card {
display: flex;
flex-direction: column;
gap: 5px;
min-width: 0;
padding: 14px 16px;
border: 1px solid var(--border);
border-radius: var(--r-md);
background: transparent;
text-decoration: none;
transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
a.near-card:hover {
border-color: var(--border-hover);
background: var(--bg-hover);
}
.near-dir {
font-size: var(--tiny-ui-2);
line-height: 1;
color: var(--fg-8);
}
.near-title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
font-size: var(--tiny-ui);
line-height: 1.55;
color: var(--fg-4);
transition: color var(--dur-fast) ease;
}
a.near-card:hover .near-title { color: var(--fg-strong); }
.near-next {
align-items: flex-end;
text-align: right;
}
.near-card.is-empty {
border-style: dashed;
background: transparent;
}
.near-card.is-empty .near-title {
font-size: var(--tiny-ui);
color: var(--fg-8);
}
.related {
margin: 0 0 48px;
padding: 16px 20px 10px;
border: 1px solid var(--border);
border-radius: var(--r-md);
background: var(--bg-card);
}
.related-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
column-gap: 24px;
margin: 0;
padding: 0;
list-style: none;
}
.related-grid a {
display: block;
padding: 8px 0;
font-size: var(--tiny-ui);
line-height: 1.55;
color: var(--fg-4);
transition: color var(--dur-fast) ease;
}
.related-grid a:hover { color: var(--fg-strong); }
.related-title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.related-date {
margin-right: 8px;
font-size: var(--tiny-ui-3);
color: var(--fg-8);
letter-spacing: 0.02em;
font-variant-numeric: tabular-nums;
}
.notfound-desc {
margin: 0 0 28px;
color: var(--fg-4);
font-size: 16px;
}
.notfound-search {
display: flex;
gap: 10px;
margin: 0 0 40px;
}
.notfound-search input {
flex: 1;
min-width: 0;
height: 38px;
padding: 0 12px;
border: 1px solid var(--border-strong);
border-radius: var(--r-md);
background: var(--bg-card);
color: var(--fg-strong);
font-family: inherit;
font-size: var(--tiny-ui);
}
.notfound-search input:focus {
outline: none;
border-color: var(--border-hover);
}
.notfound-search button {
flex-shrink: 0;
height: 38px;
padding: 0 18px;
border: 1px solid var(--btn-bg);
border-radius: var(--r-md);
background: var(--btn-bg);
color: var(--btn-fg);
font-family: inherit;
font-size: var(--tiny-ui);
cursor: pointer;
transition: background var(--dur-fast) ease;
}
.notfound-search button:hover { background: var(--btn-bg-hover); }
.notfound-recent { margin: 0 0 32px; }
.notfound-home { margin: 0; font-size: var(--tiny-ui); color: var(--fg-8); }
.toc-head,
.related-head,
.comments-title,
.respond h3 {
font-size: var(--tiny-ui);
font-weight: 500;
letter-spacing: .04em;
color: var(--fg-8);
margin: 0 0 16px;
}
.comment-list { list-style: none; margin: 0 0 24px; padding: 0; }
.comment-item { padding: 16px 0; border-top: 1px solid var(--border-weak); }
.comment-item:first-child { padding-top: 0; border-top: none; }
.comment-body {
display: flex;
gap: 11px;
align-items: flex-start;
}
.comment-avatar { flex-shrink: 0; }
.comment-avatar img,
.comment-avatar-letter {
width: 32px;
height: 32px;
border-radius: 50%;
}
.comment-avatar img {
object-fit: cover;
display: block;
}
.comment-avatar-letter {
background: var(--bg-inset);
color: var(--fg-4);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--tiny-ui);
font-weight: 500;
}
.comment-main { flex: 1; min-width: 0; }
.comment-head {
display: flex;
align-items: baseline;
gap: 7px;
flex-wrap: wrap;
margin-bottom: 3px;
line-height: 1.5;
}
.comment-author { font-size: var(--tiny-ui); font-weight: 600; }
.comment-author a { color: var(--fg-strong); }
.comment-author a:hover { color: var(--tiny-accent); text-decoration: none; }
.comment-badge {
font-size: var(--tiny-ui-3);
font-weight: 500;
color: var(--tiny-accent);
}
.comment-badge::before { content: '· '; }
.comment-time {
margin-left: auto;
font-size: var(--tiny-ui-2);
color: var(--fg-8);
font-variant-numeric: tabular-nums;
}
.comment-content {
font-size: var(--tiny-ui);
line-height: 1.75;
color: var(--fg-body);
word-break: break-word;
}
.comment-reply {
display: inline-block;
flex: none;
font-size: var(--tiny-ui-2);
font-weight: 500;
color: var(--fg-3);
cursor: pointer;
padding: 0;
border: none;
background: none;
text-decoration: none;
transition: color var(--dur-fast);
}
.comment-reply:hover { color: var(--tiny-accent); text-decoration: underline; }
.comment-children {
list-style: none;
margin: 6px 0 0;
padding-left: 14px;
border-left: 1px solid var(--border-weak);
}
.comment-children .comment-item { padding: 11px 0; border-top: none; }
.comment-children .comment-item:last-child { padding-bottom: 0; }
.respond {
margin-bottom: 40px;
padding-top: 22px;
border-top: 1px solid var(--border-weak);
}
.comment-login { font-size: var(--tiny-ui); color: var(--fg-8); margin: 0 0 10px; }
.comment-fields { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.comment-fields input,
.respond textarea {
width: 100%;
padding: 8px 11px;
border: 1px solid var(--border-strong);
border-radius: var(--r-md);
background: var(--bg-card);
font-size: var(--tiny-ui);
font-family: inherit;
color: var(--fg-strong);
transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.comment-fields input {
flex: 1;
min-width: 140px;
}
.comment-fields input:focus,
.respond textarea:focus {
outline: none;
border-color: var(--tiny-accent);
box-shadow: 0 0 0 3px rgba(var(--tiny-accent-rgb), 0.07);
}
.respond input::placeholder,
.respond textarea::placeholder { color: var(--fg-8); }
.respond textarea {
min-height: 96px;
resize: vertical;
}
.comment-submit-row {
display: flex;
align-items: center;
gap: 10px;
margin-top: 10px;
flex-wrap: wrap;
}
.comment-submit-row > button {
padding: 7px 22px;
border: 1px solid var(--btn-bg);
border-radius: var(--r-pill);
background: var(--btn-bg);
color: var(--btn-fg);
font-size: var(--tiny-ui);
font-family: inherit;
cursor: pointer;
transition: opacity var(--dur-fast), background var(--dur-fast);
}
.comment-submit-row > button:hover { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); }
.comment-submit-row > button:disabled { opacity: 0.5; cursor: wait; }
.comment-hint { margin-left: auto; font-size: var(--tiny-ui-3); color: var(--fg-8); }
.tg-hp {
position: absolute !important;
left: -9999px !important;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
margin: 0;
}
.tg-verify {
display: flex;
align-items: center;
gap: 8px;
margin: 10px 0 0;
font-size: var(--tiny-ui);
color: var(--fg-4);
}
.tg-verify label { display: flex; align-items: center; gap: 6px; }
.tg-verify b {
font-weight: 500;
color: var(--fg-strong);
font-variant-numeric: tabular-nums;
}
.tg-verify input {
width: 64px;
padding: 6px 9px;
border: 1px solid var(--border-strong);
border-radius: var(--r-md);
background: var(--bg-card);
font-size: var(--tiny-ui);
font-family: inherit;
color: var(--fg-strong);
text-align: center;
transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.tg-verify input:focus {
outline: none;
border-color: var(--tiny-accent);
box-shadow: 0 0 0 3px rgba(var(--tiny-accent-rgb), 0.07);
}
.tg-verify .tg-tip { display: none; font-size: var(--tiny-ui-3); color: var(--fg-error); }
.tg-verify.is-error input { border-color: var(--fg-error); }
.tg-verify.is-error .tg-tip { display: inline; }
.theme-toggle,
.nav-toggle,
.m-search-toggle,
.search-icon {
width: var(--tiny-icon-size);
height: var(--tiny-icon-size);
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid transparent;
border-radius: var(--r-sm);
background: transparent;
color: var(--fg-8);
cursor: pointer;
transition: color var(--dur-base), background var(--dur-base), border-color var(--dur-base);
}
.theme-toggle,
.search-icon { display: inline-flex; }
.theme-toggle:hover,
.nav-toggle:hover,
.m-search-toggle:hover,
.search-icon:hover {
color: var(--fg-strong);
background: var(--bg-inset);
}
.theme-toggle:focus-visible,
.nav-toggle:focus-visible,
.m-search-toggle:focus-visible,
.search-icon:focus-visible {
outline: 2px solid var(--tiny-accent);
outline-offset: 1px;
}
.m-search-toggle { display: none; }
.nav-toggle[aria-expanded="true"] {
color: var(--fg-strong);
background: var(--bg-inset);
}
.tiny-float {
position: fixed;
left: calc(50% + var(--frame-w) / 2 + 40px);
bottom: 40px;
z-index: 6;
display: flex;
flex-direction: column;
gap: 12px;
}
.tiny-btn {
-webkit-appearance: none;
appearance: none;
width: 44px;
height: 44px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border);
border-radius: 50%;
background: var(--bg-card);
color: var(--fg-3);
font-family: inherit;
cursor: pointer;
box-shadow: 0 4px 16px -6px rgba(16, 24, 40, 0.24);
transition: color var(--dur-base), border-color var(--dur-base), box-shadow var(--dur-base);
}
.tiny-btn:hover {
border-color: var(--tiny-accent);
color: var(--tiny-accent);
}
.tiny-btn .tiny-icon {
display: block;
width: 20px;
height: 20px;
fill: currentColor;
}
.tiny-top {
opacity: 0;
pointer-events: none;
transform: translateY(6px);
transition: opacity var(--dur-base), transform var(--dur-base), color var(--dur-base), border-color var(--dur-base), box-shadow var(--dur-base);
}
.tiny-top.is-show {
opacity: 1;
pointer-events: auto;
transform: none;
}
.tiny-ico { display: flex; }
.tiny-ico-night { display: none; }
html[data-theme="dark"] .tiny-ico-day { display: none; }
html[data-theme="dark"] .tiny-ico-night { display: flex; }
@media (max-width: 880px) {
.tiny-float {
left: auto;
right: 16px;
bottom: 24px;
}
}
.toc {
position: fixed;
top: 136px;
right: calc(50% - var(--frame-w) / 2 - 36px - var(--toc-w));
width: var(--toc-w);
max-height: min(66vh, calc(100vh - 210px));
overflow-y: auto;
overscroll-behavior: contain;
font-size: var(--tiny-ui);
line-height: 1.55;
scrollbar-width: thin;
scrollbar-color: var(--border-strong) transparent;
padding-top: 2px;
}
.toc::-webkit-scrollbar { width: 3px; }
.toc::-webkit-scrollbar-track { background: transparent; }
.toc::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }
.toc-head {
padding-left: 12px;
}
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc li {
border-left: 2px solid var(--border);
border-radius: 0 var(--r-sm) var(--r-sm) 0;
padding: 3px 0 3px 12px;
}
.toc a { display: block; color: var(--fg-3); }
.toc a:hover { color: var(--fg-strong); text-decoration: none; }
.toc li.active { border-left-color: var(--tiny-accent); }
.toc li.active a { color: var(--fg-strong); }
.toc .toc-h3 { padding-left: 24px; }
.toc .toc-h3 a { font-size: var(--tiny-ui-3); }
.toc-m { display: none; }
.toc-m summary {
display: flex;
align-items: center;
justify-content: space-between;
padding: 11px 0;
border-top: 1px solid var(--border-weak);
font-size: var(--tiny-ui);
color: var(--fg-3);
cursor: pointer;
list-style: none;
}
.toc-m summary::-webkit-details-marker { display: none; }
.toc-m summary::after {
content: '展开';
font-size: var(--tiny-ui-2);
color: var(--fg-8);
}
.toc-m details[open] summary::after { content: '收起'; }
.toc-m details[open] {
padding-bottom: 10px;
border-bottom: 1px solid var(--border-weak);
}
.toc-m ul {
list-style: none;
margin: 0;
padding: 2px 0 4px;
font-size: var(--tiny-ui);
line-height: 1.7;
}
.toc-m li { padding: 4px 0 4px 12px; border-left: 2px solid var(--border); }
.toc-m li.active { border-left-color: var(--tiny-accent); }
.toc-m a { color: var(--fg-3); }
.toc-m a:hover { color: var(--fg-strong); text-decoration: none; }
.toc-m li.active a { color: var(--fg-strong); font-weight: 600; }
.toc-m .toc-h3 { padding-left: 26px; }
@media (max-width: 1200px) {
.toc { display: none; }
.toc-m { display: block; margin-bottom: 48px; }
}
.notice {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 18px;
padding: 13px 16px;
border-radius: var(--r-md);
background: var(--bg-subtle);
font-size: var(--tiny-ui);
line-height: 1.7;
color: var(--fg-3);
}
.notice-ico {
flex-shrink: 0;
width: 16px;
height: 16px;
margin-top: 3.5px;
color: var(--tiny-accent);
}
.notice-ico svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.notice-list { flex: 1; min-width: 0; }
.notice-list p { margin: 0; }
.notice-list p + p { margin-top: 5px; }
.notice-list a { color: var(--tiny-accent); }
.notice-list a:hover { text-decoration: underline; }
.notice-tag {
display: none;
font-size: var(--tiny-ui-2);
color: var(--fg-8);
white-space: nowrap;
align-self: center;
}
.notice-fold {
flex-shrink: 0;
margin-left: auto;
align-self: center;
width: 22px;
height: 22px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: var(--r-sm);
background: transparent;
color: var(--fg-3);
cursor: pointer;
-webkit-appearance: none;
appearance: none;
transition: color var(--dur-fast), background var(--dur-fast);
}
.notice-fold:hover { background: var(--bg-hover); color: var(--fg-strong); }
.notice-fold-ico {
width: 6px;
height: 6px;
border-left: 1.5px solid currentColor;
border-top: 1.5px solid currentColor;
transform: translateY(2px) rotate(45deg);
transition: transform var(--dur-fast);
}
.notice.is-folded .notice-fold-ico { transform: translateY(-2px) rotate(225deg); }
.notice.is-folded { padding-top: 8px; padding-bottom: 8px; }
.notice.is-folded .notice-list { display: none; }
.notice.is-folded .notice-tag { display: inline; }
.notice.is-folded .notice-ico { margin-top: 0; align-self: center; }
.carousel {
position: relative;
overflow: hidden;
margin-bottom: var(--hero-gap-bottom);
border: 1px solid var(--border);
background: var(--bg-subtle);
}
.carousel-track {
display: flex;
transition: transform 0.5s ease;
}
.carousel-slide {
position: relative;
flex-shrink: 0;
width: 100%;
display: block;
}
.carousel-slide img {
display: block;
width: 100%;
aspect-ratio: 5 / 2;
object-fit: cover;
}
.carousel-caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 30px 24px 14px;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
color: #fff;
font-size: var(--tiny-ui);
}
.carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 34px;
height: 34px;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.85);
color: #2c3039;
font-size: 20px;
line-height: 1;
cursor: pointer;
opacity: 0;
transition: opacity var(--dur-base);
z-index: 10;
}
.carousel:hover .carousel-arrow,
.carousel-arrow:focus-visible { opacity: 1; }
.carousel-prev { left: 14px; }
.carousel-next { right: 14px; }
.carousel-arrow:hover { background: #fff; color: #16181d; }
@media (hover: none) {
.carousel-arrow { opacity: 1; }
}
.carousel-dots {
position: absolute;
left: 0;
right: 0;
bottom: 10px;
display: flex;
justify-content: center;
gap: 7px;
z-index: 10;
}
.carousel-dots .dot {
position: relative;
width: 7px;
height: 7px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.6);
cursor: pointer;
transition: background var(--dur-base);
}
.carousel-dots .dot.active { background: #fff; }
.site-footer {
margin-top: 64px;
padding: 32px 0 40px;
border-top: 1px solid var(--border);
font-size: var(--tiny-ui-2);
letter-spacing: 0.03em;
color: var(--fg-8);
}
.footer-inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.site-footer a { color: var(--fg-8); }
.site-footer a:hover { color: var(--fg-strong); }
.footer-left { display: flex; flex-direction: column; gap: 6px; }
.footer-custom { font-size: var(--tiny-ui); color: var(--fg-8); line-height: 1.8; }
.footer-custom a { color: var(--fg-8); }
.footer-custom a:hover { color: var(--fg-strong); }
.footer-right {
display: flex;
max-width: 50%;
}
.footer-bio { color: var(--fg-8); line-height: 1.6; }
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: 12px;
margin: 32px 0 40px;
}
.stat-card {
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 22px 12px;
text-align: center;
transition: border-color var(--dur-base);
}
.stat-card:hover { border-color: var(--border-hover); }
.stat-num {
font-size: 30px;
font-weight: 700;
line-height: 1.2;
font-variant-numeric: tabular-nums;
}
.stat-label {
font-size: var(--tiny-ui-2);
color: var(--fg-8);
margin-top: 6px;
}
.tags-total,
.cats-total {
font-size: var(--tiny-ui-2);
color: var(--fg-8);
margin: 20px 0 14px;
}
.tag-cloud {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 10px 20px;
margin: 0 0 40px;
}
.tag-item {
display: inline-flex;
align-items: baseline;
gap: 4px;
padding: 2px 0;
font-size: var(--tiny-ui);
color: var(--fg-3);
line-height: 1.6;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color var(--dur-fast), border-color var(--dur-fast);
}
.tag-item:hover {
color: var(--tiny-accent);
border-bottom-color: var(--tiny-accent);
}
.tag-num {
font-size: var(--tiny-ui-3);
color: var(--fg-8);
font-variant-numeric: tabular-nums;
}
.cat-list {
list-style: none;
margin: 0 0 40px;
padding: 0;
border-top: 1px solid var(--border);
}
.cat-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 11px 2px;
border-bottom: 1px solid var(--border);
}
.cat-item.lv1 { padding-left: 18px; }
.cat-item.lv2 { padding-left: 34px; }
.cat-item.lv3,
.cat-item.lv4,
.cat-item.lv5,
.cat-item.lv6,
.cat-item.lv7,
.cat-item.lv8 { padding-left: 50px; }
.cat-item a {
color: var(--fg-2);
text-decoration: none;
transition: color var(--dur-base);
}
.cat-item:hover a { color: var(--fg-strong); }
.cat-item.lv1 a,
.cat-item.lv2 a,
.cat-item.lv3 a,
.cat-item.lv4 a,
.cat-item.lv5 a,
.cat-item.lv6 a,
.cat-item.lv7 a,
.cat-item.lv8 a { font-size: var(--tiny-ui); color: var(--fg-4); }
.cat-num {
flex: none;
font-size: var(--tiny-ui-2);
color: var(--fg-8);
font-variant-numeric: tabular-nums;
}
.friend-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 12px;
margin: 32px 0 40px;
}
.friend-card {
display: flex;
align-items: center;
gap: 12px;
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 16px 18px;
color: var(--fg-strong);
text-decoration: none;
transition: border-color var(--dur-base), background var(--dur-base);
}
.friend-card:hover {
border-color: var(--border-hover);
background: var(--bg-subtle);
text-decoration: none;
}
.fc-avatar { flex-shrink: 0; }
.fc-avatar img {
width: 42px;
height: 42px;
border-radius: 50%;
object-fit: cover;
display: block;
}
.fc-avatar-letter {
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--bg-inset);
color: var(--fg-4);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 600;
}
.fc-info { display: flex; flex-direction: column; min-width: 0; }
.fc-name { font-size: 16px; font-weight: 600; }
.fc-desc {
font-size: var(--tiny-ui-2);
color: var(--fg-8);
margin-top: 3px;
line-height: 1.5;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.about-card {
display: flex;
align-items: center;
gap: 18px;
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 28px 32px;
margin: 32px 0 8px;
}
.about-info { display: flex; flex-direction: column; min-width: 0; }
.about-name { font-size: 16px; font-weight: 700; }
.about-desc {
font-size: var(--tiny-ui);
color: var(--fg-8);
margin-top: 5px;
line-height: 1.6;
}
.about-desc a { color: inherit; }
.about-desc a:hover { color: var(--tiny-accent); }
.page-about .post-title,
.page-stats .post-title,
.page-friends .post-title,
.page-message .post-title,
.page-guestbook .post-title {
margin-bottom: 8px;
}
@media (max-width: 560px) {
:root {
--page-gap-top: 36px;
--hero-gap-top: 24px;
--hero-gap-bottom: 30px;
--title-actual: min(26px, var(--tiny-title-size, 32px));
}
.post-content img.is-portrait { max-width: 78%; }
.post-content img.is-portrait.is-slim { max-width: 58%; }
.post-content img { margin: 1.2em auto; }
.post-actions { padding-top: 12px; }
.near-card { padding: 11px 12px 12px; }
.near-title { font-size: var(--tiny-ui); }
.related { padding: 14px 16px 8px; }
.related-grid { grid-template-columns: 1fr; column-gap: 0; }
.post-list li { display: block; padding: 12px 0; }
.post-list time { display: block; margin-bottom: 3px; }
.post-list .list-thumb { display: none; }
.carousel-slide img { aspect-ratio: 16 / 9; }
.stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
.nav-toggle { display: inline-flex; }
.m-search-toggle { display: inline-flex; }
.header-panel {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 100;
max-height: calc(100vh - 90px);
max-height: calc(100dvh - 90px);
overflow-y: auto;
overscroll-behavior: contain;
flex-direction: column;
align-items: stretch;
gap: 18px;
padding: 18px 24px 24px;
background: var(--bg-card);
border-bottom: 1px solid var(--border);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}
.header-panel.open { display: flex; }
.site-header { position: relative; }
.site-nav {
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 0;
}
.site-nav .nav-item {
align-self: stretch;
align-items: stretch;
flex-direction: column;
}
.site-nav .nav-item > a {
width: 100%;
align-self: stretch;
}
.site-nav > a,
.site-nav .nav-item > a {
display: flex;
align-items: center;
min-height: 46px;
padding: 0 12px;
font-size: calc(var(--tiny-nav-size) + 2.5px);
font-weight: 500;
color: var(--fg-2);
border-bottom: none;
border-radius: var(--r-md);
transition: background var(--dur-fast), color var(--dur-fast);
}
.site-nav > a:hover,
.site-nav .nav-item > a:hover {
background: var(--bg-hover);
text-decoration: none;
}
.site-nav a.active {
color: var(--fg-strong);
background: var(--bg-hover);
}
.site-nav a.active::after {
left: 0;
right: auto;
top: 10px;
bottom: 10px;
width: 2px;
height: auto;
border-radius: 1px;
}
.nav-dropdown {
position: static;
transform: none;
display: block;
width: auto;
background: none;
border: none;
box-shadow: none;
padding: 2px 0 6px 12px;
margin: 0 0 0 12px;
border-left: 1px solid var(--border-weak);
}
.nav-dropdown::before { content: none; }
.nav-dropdown a {
display: flex;
align-items: center;
min-height: 40px;
width: 100%;
padding: 0 12px;
border-radius: var(--r-md);
font-size: var(--tiny-nav-size);
font-weight: 400;
color: var(--fg-3);
transition: background var(--dur-fast), color var(--dur-fast);
}
.nav-dropdown a:hover {
background: var(--bg-hover);
color: var(--fg-2);
}
.nav-dropdown a.current {
color: var(--fg-strong);
font-weight: 500;
background: var(--bg-hover);
}
.nav-dropdown .nav-child {
padding-left: 12px;
font-size: max(11px, calc(var(--tiny-nav-size) - 1px));
color: var(--fg-3);
}
.search-box { width: 100%; order: -1; }
.search-box input {
width: 100%;
height: 38px;
padding: 0 40px 0 12px;
border-color: var(--border-hover);
background: var(--bg-subtle);
}
.search-box.expanded input {
border-color: var(--border-hover);
background: var(--bg-subtle);
}
.search-box .search-icon {
top: 4px;
right: 6px;
width: 30px;
height: 30px;
}
.search-box input,
.comment-fields input,
.respond textarea { font-size: 16px; }
.emoji-panel {
position: fixed;
left: 12px;
right: 12px;
bottom: 12px;
width: auto;
max-width: none;
max-height: 40vh;
}
.search-box input:focus,
.search-box.expanded input {
width: 100%;
padding: 0 40px 0 12px;
}
.search-box input:focus {
border-color: var(--tiny-accent);
box-shadow: 0 0 0 3px rgba(var(--tiny-accent-rgb), 0.07);
}
.comment-time { margin-left: 0; }
}
.emoji-wrap { position: relative; }
.emoji-toggle {
padding: 6px 13px;
border: 1px solid var(--border-strong);
border-radius: var(--r-pill);
background: var(--bg-card);
color: var(--fg-3);
font-size: var(--tiny-ui-2);
font-family: inherit;
cursor: pointer;
transition: border-color var(--dur-fast), color var(--dur-fast);
}
.emoji-toggle:hover { border-color: var(--tiny-accent); color: var(--tiny-accent); }
.emoji-panel {
position: absolute;
bottom: calc(100% + 8px);
left: 0;
z-index: 50;
display: flex;
flex-wrap: wrap;
gap: 2px;
width: 296px;
max-width: calc(100vw - 48px);
max-height: 200px;
overflow-y: auto;
padding: 10px;
background: var(--bg-card);
border: 1px solid var(--border-weak);
border-radius: var(--r-md);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.07);
}
.emoji-btn {
border: none;
background: transparent;
font-size: 18px;
line-height: 1;
padding: 4px 6px;
cursor: pointer;
border-radius: var(--r-sm);
transition: background var(--dur-fast);
}
.emoji-btn:hover { background: var(--bg-inset); }
.archives-total { margin: 2px 0 32px; font-size: var(--tiny-ui); color: var(--fg-8); }
.arch-year { margin-bottom: 40px; }
.arch-year-head {
display: flex;
align-items: baseline;
gap: 6px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border);
}
.arch-year-num { font-size: 24px; font-weight: 600; color: var(--fg-strong); }
.arch-year-unit { font-size: var(--tiny-ui); color: var(--fg-3); }
.arch-year-count { margin-left: auto; font-size: var(--tiny-ui-2); color: var(--fg-8); }
.arch-month { margin-top: 20px; }
.arch-month-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.arch-month-num { font-size: var(--tiny-ui); font-weight: 600; color: var(--fg-3); }
.arch-month-count { font-size: var(--tiny-ui-2); color: var(--fg-8); }
.arch-list { list-style: none; margin: 0; padding: 0; }
.arch-item a {
display: flex;
align-items: baseline;
gap: 10px;
padding: 8px 0;
border-bottom: 1px dashed var(--border-weak);
color: var(--fg-3);
text-decoration: none;
transition: color var(--dur-fast);
}
.arch-item a:hover { color: var(--tiny-accent); }
.arch-day { flex: none; font-size: var(--tiny-ui); color: var(--fg-8); font-variant-numeric: tabular-nums; }
.arch-title {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.arch-comments { flex: none; font-size: var(--tiny-ui-2); color: var(--fg-8); }
html[data-theme="dark"] {
color-scheme: dark;
--fg-strong: #e6e6e6;
--fg-2: #ddd;
--fg-3: #b6b6b6;
--fg-4: #9e9e9e;
--fg-8: #8a9099;
--fg-body: #c2c2c2;
--bg-page: #141414;
--bg-card: #1c1c1c;
--bg-subtle: #1a1a1a;
--bg-hover: #242424;
--bg-inset: #1c1c1c;
--code-bg: #1a1a1a;
--border: #2a2a2a;
--border-weak: #242424;
--border-strong: #2e2e2e;
--border-hover: #555;
--border-focus: #3a3a3a;
--btn-bg: #e6e6e6;
--btn-bg-hover: #fff;
--btn-fg: #141414;
--fg-error: #e37d6d;
--tiny-accent: #7aa2f0;
--tiny-accent-rgb: 122, 162, 240;
background: var(--bg-page);
}
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .nav-toggle,
html[data-theme="dark"] .search-icon,
html[data-theme="dark"] .search-box input {
background: transparent;
border-color: transparent;
}
html[data-theme="dark"] .search-box input:focus,
html[data-theme="dark"] .search-box.expanded input {
background: var(--bg-card);
border-color: var(--border-focus);
}
html[data-theme="dark"] .comment-fields input,
html[data-theme="dark"] .respond textarea {
background: var(--bg-page);
border-color: var(--border-strong);
}
html[data-theme="dark"] .comment-author a { color: #ddd; }
html[data-theme="dark"] .nav-dropdown::before { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); }
html[data-theme="dark"] .tiny-btn { box-shadow: 0 4px 16px -6px rgba(0, 0, 0, 0.5); }
@media (max-width: 900px) {
html[data-theme="dark"] .header-panel { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
html[data-theme="dark"] .search-box input,
html[data-theme="dark"] .search-box.expanded input {
background: var(--bg-subtle);
border-color: var(--border-hover);
}
html[data-theme="dark"] .search-box input:focus {
background: var(--bg-subtle);
border-color: var(--tiny-accent);
}
html[data-theme="dark"] .site-nav a.active,
html[data-theme="dark"] .site-nav > a:hover,
html[data-theme="dark"] .site-nav .nav-item > a:hover,
html[data-theme="dark"] .nav-dropdown a:hover,
html[data-theme="dark"] .nav-dropdown a.current {
background: #1e1e1e;
color: var(--fg-strong);
}
}
html[data-code="dark"]:not([data-theme="dark"]) {
--code-bg: #282c34;
}
html[data-theme="dark"] .post-content pre code.hljs {
color: #abb2bf;
}
html[data-theme="dark"] .post-content pre .hljs-comment,
html[data-theme="dark"] .post-content pre .hljs-quote { color: #5c6370; }
html[data-theme="dark"] .post-content pre .hljs-doctag,
html[data-theme="dark"] .post-content pre .hljs-formula,
html[data-theme="dark"] .post-content pre .hljs-keyword { color: #c678dd; }
html[data-theme="dark"] .post-content pre .hljs-deletion,
html[data-theme="dark"] .post-content pre .hljs-name,
html[data-theme="dark"] .post-content pre .hljs-section,
html[data-theme="dark"] .post-content pre .hljs-selector-tag,
html[data-theme="dark"] .post-content pre .hljs-subst { color: #e06c75; }
html[data-theme="dark"] .post-content pre .hljs-literal { color: #56b6c2; }
html[data-theme="dark"] .post-content pre .hljs-addition,
html[data-theme="dark"] .post-content pre .hljs-attribute,
html[data-theme="dark"] .post-content pre .hljs-meta .hljs-string,
html[data-theme="dark"] .post-content pre .hljs-regexp,
html[data-theme="dark"] .post-content pre .hljs-string { color: #98c379; }
html[data-theme="dark"] .post-content pre .hljs-attr,
html[data-theme="dark"] .post-content pre .hljs-number,
html[data-theme="dark"] .post-content pre .hljs-selector-attr,
html[data-theme="dark"] .post-content pre .hljs-selector-class,
html[data-theme="dark"] .post-content pre .hljs-selector-pseudo,
html[data-theme="dark"] .post-content pre .hljs-template-variable,
html[data-theme="dark"] .post-content pre .hljs-type,
html[data-theme="dark"] .post-content pre .hljs-variable { color: #d19a66; }
html[data-theme="dark"] .post-content pre .hljs-bullet,
html[data-theme="dark"] .post-content pre .hljs-link,
html[data-theme="dark"] .post-content pre .hljs-meta,
html[data-theme="dark"] .post-content pre .hljs-selector-id,
html[data-theme="dark"] .post-content pre .hljs-symbol,
html[data-theme="dark"] .post-content pre .hljs-title { color: #61aeee; }
html[data-theme="dark"] .post-content pre .hljs-built_in,
html[data-theme="dark"] .post-content pre .hljs-class .hljs-title,
html[data-theme="dark"] .post-content pre .hljs-title.class_ { color: #e5c07b; }
html[data-theme="dark"] .post-content pre .hljs-addition,
html[data-theme="dark"] .post-content pre .hljs-deletion { background-color: transparent; }
.post-title,
.archive-title,
.post-list a,
.post-near a,
.cat-item a {
min-width: 0;
overflow-wrap: anywhere;
}
@media (hover: none) {
.carousel-dots .dot::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 32px;
height: 32px;
transform: translate(-50%, -50%);
}
}
@media (hover: none) and (max-width: 900px) {
.theme-toggle,
.nav-toggle,
.m-search-toggle { width: 40px; height: 40px; }
.pagination a,
.pagination span { min-width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
@media print {
html[data-theme="dark"] body,
html[data-theme="dark"] a,
html[data-theme="dark"] .post-content,
html[data-theme="dark"] .post-title {
background: #fff !important;
color: #000 !important;
}
.site-header,
.site-footer,
.tiny-float,
.toc,
.carousel-arrow,
.carousel-dots,
.carousel-caption,
.respond,
.comment-reply,
.comment-cancel,
.emoji-wrap,
.pagination,
.post-near,
.theme-toggle,
.nav-toggle,
.search-box { display: none !important; }
.post-content a[href^="http"]::after {
content: " (" attr(href) ")";
font-size: 11px;
color: #555;
}
.wrap { max-width: none; padding: 0; }
.post-content pre { border: 1px solid #ccc; }
}