/* 浅色主题(默认) */ :root { --color-text: #333333; --color-heading: #24292e; --color-muted: #586069; --color-link: #0366d6; --color-border: #e1e4e8; --color-bg: #fafafa; --color-bg-white: #ffffff; --color-code-bg: #f6f8fa; --color-code-text: #d73a49; --color-code-block-bg: #f6f8fa; --color-code-block-border: #e1e4e8; --color-tag-bg: #eaf5ff; --color-blockquote: #6a737d; --color-blockquote-border: #dfe2e5; --syntax-comment: #6a737d; --syntax-string: #032f62; --syntax-constant: #005cc5; --syntax-keyword: #d73a49; --syntax-storage: #d73a49; --syntax-function: #6f42c1; --syntax-type: #6f42c1; --syntax-attribute: #6f42c1; --syntax-variable: #24292e; --syntax-parameter: #24292e; --syntax-support: #005cc5; --syntax-punctuation: #24292e; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; --max-width: 1024px; --spacing-xs: 0.35rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --radius: 8px; } /* 深色主题 */ :root[data-theme="dark"] { --color-text: #c9d1d9; --color-heading: #f0f6fc; --color-muted: #8b949e; --color-link: #58a6ff; --color-border: #30363d; --color-bg: #010409; --color-bg-white: #0d1117; --color-code-bg: #161b22; --color-code-text: #ff7b72; --color-code-block-bg: #161b22; --color-code-block-border: #30363d; --color-tag-bg: #122d42; --color-blockquote: #8b949e; --color-blockquote-border: #30363d; --syntax-comment: #8b949e; --syntax-string: #a5d6ff; --syntax-constant: #79c0ff; --syntax-keyword: #ff7b72; --syntax-storage: #ff7b72; --syntax-function: #d2a8ff; --syntax-type: #ffa657; --syntax-attribute: #79c0ff; --syntax-variable: #c9d1d9; --syntax-parameter: #ffa657; --syntax-support: #79c0ff; --syntax-punctuation: #c9d1d9; } /* Reset */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 1.7; color: var(--color-text); background: var(--color-bg); } a { color: var(--color-link); text-decoration: none; } a:hover { text-decoration: underline; } /* 主题切换过渡:仅在 显式带 .theme-transition 时启用, 故首屏 anti-FOUC 设置 data-theme 不会触发任何动画。 限定 transition-property 白名单,避免 width/transform 等引起重排。 */ html.theme-transition, html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after { transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, fill 0.3s ease, stroke 0.3s ease, box-shadow 0.3s ease; } /* View Transitions API:让默认 crossfade 稍慢更柔和 */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.35s; animation-timing-function: ease; } /* Layout */ main { max-width: var(--max-width); margin: 0 auto; padding: 2rem var(--spacing-lg); min-height: calc(100vh - 140px); } .page h1 { font-size: 2rem; margin-bottom: var(--spacing-lg); color: var(--color-heading); } @media (max-width: 600px) { main { padding: var(--spacing-md); } } /* Navbar */ .navbar { display: flex; justify-content: space-between; align-items: center; margin: 0 auto; padding: var(--spacing-md) var(--spacing-lg); background: var(--color-bg-white); border-bottom: 1px solid var(--color-border); } .navbar .brand { font-size: 1.5rem; font-weight: 700; color: var(--color-heading); } .navbar .nav-links { display: flex; gap: var(--spacing-lg); } .navbar .nav-links a { color: var(--color-muted); font-weight: 500; } .navbar .nav-links a:hover { color: var(--color-link); } /* 主题切换按钮 */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; margin-left: var(--spacing-sm); background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius); color: var(--color-muted); cursor: pointer; line-height: 0; } .theme-toggle:hover { color: var(--color-link); border-color: var(--color-link); } .theme-toggle .icon-sun { display: none; } /* 浅色模式显示月亮,深色模式显示太阳 */ :root[data-theme="dark"] .theme-toggle .icon-sun { display: inline-flex; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } @media (max-width: 600px) { .navbar { flex-direction: column; gap: var(--spacing-md); } .navbar .nav-links { gap: var(--spacing-md); } } /* Post list */ .post-list { display: flex; flex-direction: column; gap: var(--spacing-lg); } .post-card { background: var(--color-bg-white); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--spacing-lg); } .post-card h2 { margin: 0 0 var(--spacing-sm) 0; font-size: 1.4rem; } .post-card .meta { display: flex; gap: var(--spacing-md); color: var(--color-muted); font-size: 0.9rem; margin-bottom: 0.75rem; } .post-card .tags { display: flex; gap: var(--spacing-sm); } .post-card .tag { background: var(--color-tag-bg); color: var(--color-link); padding: 0.15rem var(--spacing-sm); border-radius: 12px; font-size: 0.8rem; } .post-card .summary { margin: 0; color: var(--color-text); } /* Post detail */ .post-detail header { margin-bottom: 2rem; padding-bottom: var(--spacing-md); border-bottom: 1px solid var(--color-border); } .post-detail h1 { margin-top: var(--spacing-sm); margin-bottom: var(--spacing-sm); } .post-detail .meta { display: flex; gap: var(--spacing-sm); color: var(--color-muted); font-size: 0.9rem; } .post-detail .tags { display: flex; gap: var(--spacing-sm); } .post-detail .tag { background: var(--color-tag-bg); color: var(--color-link); padding: 0rem var(--spacing-sm); border-radius: 4rem; font-size: 0.8rem; } /* Markdown body */ .markdown-body { background: var(--color-bg-white); padding: var(--spacing-lg); border: 1px solid var(--color-border); border-radius: var(--radius); } .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4 { margin-top: var(--spacing-lg); margin-bottom: var(--spacing-md); color: var(--color-heading); } .markdown-body p { margin: 0 0 var(--spacing-md) 0; } .markdown-body pre { overflow-x: auto; padding: var(--spacing-md); border-radius: var(--radius); margin: 0 0 var(--spacing-md) 0; } .markdown-body code { font-family: var(--font-mono); font-size: 0.9em; } .markdown-body p code { background: var(--color-code-bg); padding: 0.15rem var(--spacing-sm); border-radius: 3px; color: var(--color-code-text); } .markdown-body ul, .markdown-body ol { margin-bottom: var(--spacing-md); padding-left: var(--spacing-lg); } .markdown-body blockquote { margin: 0 0 var(--spacing-md) 0; padding: 0 var(--spacing-md); color: var(--color-blockquote); border-left: 0.25rem solid var(--color-blockquote-border); } /* 代码块高亮:syntect 输出的是带 class 的 ,这里按 scope 原子映射配色。 ClassStyle::Spaced 将如 `string.quoted.double` 拆为 `string quoted double`, 嵌套 span 也带整套 scope,因此选择器只需命中通用原子即可。 */ .markdown-body pre { background: var(--color-code-block-bg); border: 1px solid var(--color-code-block-border); color: var(--syntax-variable); } .markdown-body pre code { font-family: var(--font-mono); background: transparent; padding: 0; color: inherit; } .markdown-body pre .comment, .markdown-body pre .punctuation.definition.comment { color: var(--syntax-comment); font-style: italic; } .markdown-body pre .string, .markdown-body pre .string.quoted, .markdown-body pre .string.interpolated, .markdown-body pre .string.regexp, .markdown-body pre .meta.string { color: var(--syntax-string); } .markdown-body pre .constant, .markdown-body pre .constant.numeric, .markdown-body pre .constant.language, .markdown-body pre .constant.character, .markdown-body pre .constant.other, .markdown-body pre .support.constant { color: var(--syntax-constant); } .markdown-body pre .keyword, .markdown-body pre .keyword.control, .markdown-body pre .keyword.operator, .markdown-body pre .keyword.other, .markdown-body pre .meta.selector, .markdown-body pre .support.type.exception { color: var(--syntax-keyword); } .markdown-body pre .storage, .markdown-body pre .storage.type, .markdown-body pre .storage.modifier { color: var(--syntax-storage); } .markdown-body pre .entity.name.function, .markdown-body pre .support.function, .markdown-body pre .meta.function-call { color: var(--syntax-function); } .markdown-body pre .entity.name.class, .markdown-body pre .entity.name.type, .markdown-body pre .entity.name.struct, .markdown-body pre .entity.name.enum, .markdown-body pre .entity.name.interface, .markdown-body pre .storage.type.class, .markdown-body pre .support.type { color: var(--syntax-type); } .markdown-body pre .entity.other.attribute-name, .markdown-body pre .entity.other.inherited-class { color: var(--syntax-attribute); } .markdown-body pre .variable, .markdown-body pre .meta.variable, .markdown-body pre .support.other.variable { color: var(--syntax-variable); } .markdown-body pre .variable.parameter, .markdown-body pre .meta.parameters .variable, .markdown-body pre .meta.function.parameters .variable { color: var(--syntax-parameter); } .markdown-body pre .support.class, .markdown-body pre .support.type, .markdown-body pre .support.constant { color: var(--syntax-support); } .markdown-body pre .punctuation { color: var(--syntax-punctuation); } .markdown-body pre .entity.name.tag, .markdown-body pre .meta.tag { color: var(--syntax-keyword); } /* Content tree */ .content-tree { list-style: none; padding-left: 0; } .content-tree ul { list-style: none; padding-left: var(--spacing-lg); margin-top: var(--spacing-xs); } .content-tree li { margin: var(--spacing-xs) 0; } .content-tree .folder { font-weight: 600; color: var(--color-muted); } /* Tag cloud */ .tag-cloud { display: flex; flex-wrap: wrap; gap: 0.75rem; } .tag-cloud .tag { background: var(--color-bg-white); border: 1px solid var(--color-border); padding: var(--spacing-sm) var(--spacing-md); border-radius: 20px; } /* Footer */ .footer { text-align: center; padding: var(--spacing-sm); color: var(--color-muted); font-size: 0.9rem; border-top: 1px solid var(--color-border); background: var(--color-bg-white); } /* Not found */ .not-found { text-align: center; padding: 4rem 0; } .not-found h1 { font-size: 4rem; margin-bottom: var(--spacing-sm); color: var(--color-link); }