/* ============================================================ 个人博客静态页样式表 设计原则：移动端优先 / 变量管理主题 / 零外部依赖 ============================================================ */ /* ---------- 1. 主题变量 ---------- */ :root { --primary: #2563eb; /* 主色：蓝色 */ --primary-hover: #1d4ed8; --bg: #f8fafc; /* 浅色背景 */ --surface: #ffffff; /* 卡片背景 */ --surface-alt: #eef2ff; /* 次要背景（Hero / 交替区块） */ --text: #0f172a; /* 正文颜色 */ --muted: #64748b; /* 次要文字 */ --border: #e2e8f0; /* 边框 */ --shadow: 0 4px 16px rgb(15 23 42 / 8%); --shadow-hover: 0 12px 28px rgb(37 99 235 / 16%); --radius: 16px; /* 卡片圆角 */ --max-width: 1100px; /* 最大内容宽度 */ --header-h: 60px; } /* 深色主题：通过 切换 */ [data-theme="dark"] { --bg: #0f172a; /* 深色背景 */ --surface: #1e293b; --surface-alt: #16213a; --text: #f1f5f9; --muted: #94a3b8; --border: #334155; --shadow: 0 4px 16px rgb(0 0 0 / 40%); --shadow-hover: 0 12px 28px rgb(0 0 0 / 55%); } /* ---------- 2. 基础重置 ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* 点击导航平滑滚动 */ scroll-padding-top: calc(var(--header-h) + 12px); /* 锚点不被导航栏遮挡 */ } body { margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); line-height: 1.7; transition: background 0.25s ease, color 0.25s ease; } h1, h2, h3 { line-height: 1.3; margin: 0 0 0.6em; } p { margin: 0 0 1em; } a { color: var(--primary); } a:hover { color: var(--primary-hover); } /* 键盘焦点样式：无障碍必备 */ a:focus-visible, button:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 6px; } /* 跳过链接：平时隐藏，Tab 聚焦时出现 */ .skip-link { position: absolute; left: 12px; top: -48px; background: var(--primary); color: #fff; padding: 8px 16px; border-radius: 8px; text-decoration: none; z-index: 100; transition: top 0.2s ease; } .skip-link:focus { top: 12px; color: #fff; } /* 通用版心容器 */ .container { width: min(100% - 2.5rem, var(--max-width)); margin-inline: auto; } /* ---------- 3. 导航栏 ---------- */ .site-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); display: flex; align-items: center; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } /* color-mix 兼容性兜底：不支持的浏览器用纯色 */ @supports not (background: color-mix(in srgb, red 50%, blue)) { .site-header { background: var(--surface); } } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .logo { font-size: 1.2rem; font-weight: 800; color: var(--text); text-decoration: none; white-space: nowrap; } .logo:hover { color: var(--primary); } .nav-actions { display: flex; align-items: center; gap: 0.5rem; } /* 导航列表：移动端默认折叠 */ .nav-list { list-style: none; margin: 0; padding: 0; display: none; /* 手机上先隐藏 */ position: absolute; top: var(--header-h); left: 0; right: 0; flex-direction: column; gap: 0.25rem; background: var(--surface); border-bottom: 1px solid var(--border); padding: 0.75rem 1.25rem 1rem; } /* JS 给 body 加 .nav-open 时展开菜单 */ body.nav-open .nav-list { display: flex; } .nav-link { display: block; padding: 0.6rem 0.8rem; border-radius: 10px; color: var(--text); text-decoration: none; font-weight: 600; } .nav-link:hover { background: var(--surface-alt); color: var(--primary); } /* 图标按钮（主题 / 汉堡） */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); cursor: pointer; } .icon-btn:hover { border-color: var(--primary); color: var(--primary); } /* 汉堡按钮三条线 */ .menu-btn { flex-direction: column; gap: 5px; } .menu-btn .bar { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentcolor; transition: transform 0.2s ease, opacity 0.2s ease; } /* 展开时变成 X */ body.nav-open .menu-btn .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.nav-open .menu-btn .bar:nth-child(2) { opacity: 0; } body.nav-open .menu-btn .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* 主题图标：浅色显示月亮，深色显示太阳 */ .icon-sun { display: none; } [data-theme="dark"] .icon-sun { display: block; } [data-theme="dark"] .icon-moon { display: none; } /* ---------- 4. Hero 首屏 ---------- */ .hero { background: linear-gradient(135deg, var(--surface-alt), var(--surface) 60%, var(--bg)); border-bottom: 1px solid var(--border); padding: 4rem 0 3.5rem; text-align: center; } .hero-inner { display: flex; flex-direction: column; align-items: center; } /* 头像：渐变圆 + 首字母 */ .avatar { width: 112px; height: 112px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 3rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #2563eb, #7c3aed); box-shadow: var(--shadow); margin-bottom: 1.25rem; user-select: none; } .hero h1 { font-size: 2rem; margin-bottom: 0.25rem; } .role { color: var(--primary); font-weight: 700; margin-bottom: 0.5rem; } .tagline { color: var(--muted); max-width: 34rem; margin-bottom: 1.5rem; } .hero-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; } /* 按钮 */ .btn { display: inline-block; padding: 0.7rem 1.5rem; border-radius: 999px; font-weight: 700; text-decoration: none; border: 2px solid transparent; } .btn-primary { background: var(--primary); color: #fff; } .btn-primary:hover { background: var(--primary-hover); color: #fff; } .btn-ghost { border-color: var(--primary); color: var(--primary); background: transparent; } .btn-ghost:hover { background: var(--primary); color: #fff; } /* ---------- 5. 通用区块 / 卡片 ---------- */ .section { padding: 3.5rem 0; } .section-alt { background: var(--surface); border-block: 1px solid var(--border); } .section-title { font-size: 1.6rem; margin-bottom: 0.5rem; } .section-desc { color: var(--muted); max-width: 44rem; margin-bottom: 1.75rem; } /* 卡片网格：手机 1 列，平板 2 列，桌面按需 3 列 */ .grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; } .card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); transition: transform 0.2s ease, box-shadow 0.2s ease; } /* 交替区块里的卡片用另一层背景，保证层次 */ .section-alt .card { background: var(--bg); } .section:not(.section-alt) .card { background: var(--surface); } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); } .card h3 { font-size: 1.1rem; } .card h3 a { color: var(--text); text-decoration: none; } .card h3 a:hover { color: var(--primary); } .card > p { color: var(--muted); font-size: 0.95rem; } .card-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 1rem; font-size: 0.85rem; color: var(--muted); } .tags { display: flex; flex-wrap: wrap; gap: 0.4rem; } .tag { background: var(--surface-alt); border: 1px solid var(--border); color: var(--primary); border-radius: 999px; padding: 0.1rem 0.7rem; font-size: 0.8rem; font-weight: 600; white-space: nowrap; } /* 技能标签 */ .skill-list { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; } .skill-list li { background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 0.35rem 1rem; font-size: 0.9rem; font-weight: 600; box-shadow: var(--shadow); } /* 联系卡片 */ .contact-grid { grid-template-columns: 1fr; } .contact-card { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; color: var(--text); text-decoration: none; } .contact-card svg { color: var(--primary); } .contact-name { font-weight: 800; font-size: 1.05rem; } .contact-note { color: var(--muted); font-size: 0.9rem; } /* ---------- 6. 页脚 / 回到顶部 ---------- */ .site-footer { border-top: 1px solid var(--border); padding: 1.75rem 0; text-align: center; color: var(--muted); font-size: 0.9rem; } .footer-inner p { margin: 0.25rem 0; } .back-to-top { position: fixed; right: 1.25rem; bottom: 1.25rem; width: 48px; height: 48px; border: none; border-radius: 50%; background: var(--primary); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-hover); } .back-to-top:hover { background: var(--primary-hover); } /* hidden 属性优先级最高：JS 控制显示/隐藏 */ .back-to-top[hidden] { display: none; } /* ---------- 7. 滚动进入动画 ---------- */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.visible { opacity: 1; transform: none; } /* ---------- 8. 平板 / 桌面适配 ---------- */ @media (min-width: 768px) { .menu-btn { display: none; } /* 桌面不需要汉堡菜单 */ .nav-list { display: flex; /* 桌面直接横排 */ position: static; flex-direction: row; gap: 0.25rem; background: none; border: none; padding: 0; } .grid { grid-template-columns: repeat(2, 1fr); } .hero { padding: 5.5rem 0 4.5rem; } .hero h1 { font-size: 2.6rem; } .avatar { width: 132px; height: 132px; font-size: 3.5rem; } .section-title { font-size: 1.9rem; } } @media (min-width: 1024px) { /* 文章 4 张卡片在桌面可排 2x2；项目 3 张排 3 列更舒展 */ #posts .grid { grid-template-columns: repeat(2, 1fr); } #projects .grid, .contact-grid { grid-template-columns: repeat(3, 1fr); } } /* ---------- 9. 尊重减少动态效果偏好 ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } }