/* ======================================== 首屏关键CSS - Critical CSS 用于内联到中，提升FCP ======================================== */ /* CSS变量 */ :root { --background-color: #fafafa; --background-dark-color: #020617; --text-content-color: #24292e; --text-content-dark-color: #d1d5db; --text-title-color: #111827; --text-title-dark-color: #e5e7eb; --text-highlight-color: #696565; --frame-dark-color: #1f2933; --frame-color: #eee; --card-shadow-light: 0 10px 20px 0 rgba(236, 236, 236, 0.86); --card-shadow-dark: 0 18px 45px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(148, 163, 184, 0.45); --link-color-light: #374151; --link-hover-color-light: #111827; --link-color-dark: #e5e7eb; --link-hover-color-dark: #d1d5db; } /* 字体声明 */ @font-face { font-family: 'zql'; src: url('../font/zql-v2.woff2') format('woff2'), url('../font/zql-v2.woff') format('woff'); font-display: swap; unicode-range: U+0000-007F, U+4E00-9FFF, U+2000-206F, U+3000-303F; } /* 基础样式 */ html { scroll-behavior: smooth; } body { font-family: 'zql', serif; color: var(--text-content-color); line-height: 1.6; font-size: 16px; background: var(--background-color); background-attachment: fixed; z-index: 5; transition: background-color 0.3s ease, color 0.3s ease; margin: 0; padding: 0; } /* 深色模式基础 */ [data-theme="dark"] body { color: var(--text-content-dark-color); background-color: var(--background-dark-color); } /* 主容器 - 关键布局 */ .main { max-width: 618px; overflow: hidden; margin: 60px auto; padding: 50px; background: rgba(255, 255, 255, 0.8); box-shadow: var(--card-shadow-light); border-radius: 8px; z-index: 10; position: relative; text-align: center; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.5s cubic-bezier(0.4, 0, 0.2, 1); } [data-theme="dark"] .main { background: rgba(15, 23, 42, 0.99); box-shadow: var(--card-shadow-dark); backdrop-filter: none; -webkit-backdrop-filter: none; } /* 响应式主容器 */ @media (min-width: 768px) { .main { background: rgba(255, 255, 255, 0.88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } } /* 头部布局 */ .header { margin-bottom: 10px; padding-bottom: 10px; display: flex; flex-direction: column; align-items: stretch; gap: 16px; text-align: left; } .header-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .header-avatar { display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin-right: 16px; padding: 8px 10px 8px 0; border-radius: 999px; cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } .header-avatar img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; box-shadow: none; } .header-info { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 0; } /* 社交链接 */ .header-social { margin: 0; padding: 0; border: none; min-width: 50px; margin-bottom: 0; text-align: center; } .header-social a { display: inline-block; margin: 0 5px; text-decoration: none; transition: all 0.2s ease; color: var(--link-color-light); } .header-social a:hover { color: var(--link-hover-color-light); transform: scale(1.2); } [data-theme="dark"] .header-social a { color: var(--link-color-dark); } [data-theme="dark"] .header-social a:hover { color: var(--link-hover-color-dark); } /* 个人介绍 */ .header-bio { font-size: 0.9rem; color: #666; margin: 0; } [data-theme="dark"] .header-bio { color: #9ca3af; } /* 导航菜单 */ .header-menu { border-top: 1px solid #f4f4f4; transition: border-color 0.35s ease; } .header-menu ul { margin: 0; padding: 0; } .header-menu ul.flat { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; justify-content: center; } .header-menu ul.flat li { display: block; list-style: none; margin: 10px 0 0 0; text-transform: capitalize; } .header-menu ul.flat li a { color: #586069; text-decoration: none; transition: color 0.3s; } .header-menu ul.flat li a:hover { color: #646464; text-decoration: none; } .header-menu ul.flat li.active a { color: #24292e; } /* 深色模式导航 */ [data-theme="dark"] .header-menu { border-top-color: #1f2933; } [data-theme="dark"] .header-menu ul.flat li a { color: #9ca3af; } [data-theme="dark"] .header-menu ul.flat li.active a { color: #e5e7eb; } /* 排版基础 */ h1, h2, h3, h4, h5, h6 { line-height: 1.2; font-weight: 400; margin: 0.5em 0; } h1 { font-size: 1.5rem; } h2 { font-size: 1.375rem; } h3 { font-size: 1.25rem; } h4, h5, h6 { font-size: 1.125rem; } p { margin: 0.8em 0; } a { color: var(--link-color-light); text-decoration: none; transition: color 0.35s ease; touch-action: manipulation; } a:hover { color: var(--link-hover-color-light); text-decoration: underline; } [data-theme="dark"] a { color: var(--link-color-dark); } [data-theme="dark"] a:hover { color: var(--link-hover-color-dark); } ul { padding-left: 0px; list-style-type: disc; list-style: none; } /* 图片基础 */ img { max-width: 100%; border-radius: 5px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); vertical-align: middle; } a img { border: none; } /* 分割线 */ hr { display: block; height: 1px; border: 0; border-top: 1px solid #cccccc; margin: 1rem 0; padding: 0; } [data-theme="dark"] hr { border-top-color: rgba(255, 255, 255, 0.2); } /* 文章元信息 */ .meta { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px; margin-bottom: 20px; color: #999; font-size: 0.9rem; line-height: 1.6; } .meta-item { white-space: nowrap; } [data-theme="dark"] .meta { color: #9ca3af; } /* 文章标题 */ .post-title { color: var(--text-title-color); margin-bottom: 0.5em; } [data-theme="dark"] .post-title { color: var(--text-title-dark-color); } /* 文章内容 */ [data-theme="dark"] .post-content { color: var(--text-content-dark-color); } /* 页脚 */ .footer { border-top: 1px solid #eee; padding-top: 20px; margin-top: 30px; color: #999; font-size: 0.85rem; } [data-theme="dark"] .footer { border-top-color: #1f2933; color: #6b7280; } /* 主题切换 */ .theme-toggle-button { border: none; background: transparent; cursor: pointer; font-size: 14px; padding: 4px 8px; color: #586069; } .theme-toggle-button:focus { outline: none; } [data-theme="dark"] .theme-toggle-button { color: #e5e7eb; } #theme-toggle i { transition: transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1); } #theme-toggle.rotate i { transform: rotate(360deg); } /* 滚动条 */ ::-webkit-scrollbar { width: 13px; } ::-webkit-scrollbar-button { display: none; } ::-webkit-scrollbar-thumb { min-height: 16px; background-color: #999999; background-clip: padding-box; border: 3px solid #fdfdfd; border-radius: 5px; } ::selection { background: #444; color: #fff; } /* 图标 */ .icon { width: 1.8em; height: 1.8em; vertical-align: -1em; fill: currentColor; overflow: hidden; } /* 深色模式文章标题（用于首页列表） */ [data-theme="dark"] .post-title { color: var(--text-title-dark-color); }