/* ========================================================================== 个人主页样式 · 参照 alshedivat/al-folio 的设计令牌 ────────────────────────────────────────────────────────────────────────── · 正文字体 Roboto（字重 300、行高 1.5），等宽用 Roboto Mono · 亮色主题色 #00CCCC／暗色主题色 #71DDEE · 内容宽度 930px；链接悬停加下划线；卡片方角（0.25rem） 主题通过 切换。 ========================================================================== */ :root { /* ---- al-folio 核心令牌 ---- */ --global-theme-color: #00cccc; --global-hover-color: #00cccc; --global-bg-color: #ffffff; --global-text-color: #000000; --global-text-color-light: #828282; --global-card-bg-color: #ffffff; --global-divider-color: #e6e6e6; --global-code-bg-color: rgba(0, 204, 204, 0.06); --global-footer-bg-color: #f2f2f2; --global-footer-text-color: #424242; --global-footer-link-color: #000000; --radius: 0.25rem; --max-width: 930px; --shadow: 0 1px 4px rgba(0, 0, 0, 0.08); --font-sans: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", Helvetica, Arial, sans-serif; --font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* ---- 语义别名 ---- */ --bg: var(--global-bg-color); --surface: var(--global-card-bg-color); --text: var(--global-text-color); --text-muted: #424242; --text-faint: var(--global-text-color-light); --border: var(--global-divider-color); --accent: var(--global-theme-color); --accent-strong: var(--global-hover-color); --accent-soft: rgba(0, 204, 204, 0.14); --accent-contrast: #062b2d; /* 正文用色：比主题亮色深一档，保证白底可读性（对比度 ≈ 4.8:1） */ --accent-text: #008080; --header-bg: var(--global-bg-color); } [data-theme="dark"] { --global-theme-color: #71ddee; --global-hover-color: #71ddee; --global-bg-color: #17181a; --global-text-color: #ffffff; --global-text-color-light: #9d9d9d; --global-card-bg-color: #1f2023; --global-divider-color: rgba(255, 255, 255, 0.12); --global-code-bg-color: rgba(113, 221, 238, 0.08); --global-footer-bg-color: #1b1c1f; --global-footer-text-color: #b0b0b0; --global-footer-link-color: #ffffff; --shadow: 0 1px 4px rgba(0, 0, 0, 0.5); --text-muted: #d4d4d4; --accent-soft: rgba(113, 221, 238, 0.16); --accent-text: #71ddee; } /* ---------- 基础 ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); font-size: 1rem; font-weight: 300; line-height: 1.5; color: var(--text-muted); background-color: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; transition: background-color 0.3s ease, color 0.3s ease; } h1, h2, h3, h4 { font-family: var(--font-sans); font-weight: 400; line-height: 1.3; color: var(--text); margin: 0; } h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.5rem; } h4 { font-size: 1.25rem; } .mono { font-family: var(--font-mono); font-size: 0.85em; } a { color: var(--accent); text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--accent-strong); text-decoration: underline; } ::selection { background: var(--accent-soft); color: var(--text); } .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 24px; } /* ---------- 顶栏（navbar） ---------- */ .site-header { position: sticky; top: 0; z-index: 1030; background: var(--header-bg); border-bottom: 1px solid var(--border); } .header-inner { display: flex; align-items: center; gap: 1.5rem; height: 3.75rem; } /* 导航项较多，顶栏单独放宽；正文内容区仍保持 930px */ .site-header .container { max-width: 1120px; } .site-name { font-size: 1.15rem; font-weight: 700; color: var(--accent); white-space: nowrap; } .site-name:hover { color: var(--accent); text-decoration: none; } .site-nav { display: flex; align-items: center; gap: 0.85rem; margin-left: auto; } .site-nav a { font-size: 0.88rem; font-weight: 300; color: var(--text-faint); white-space: nowrap; } .site-nav a:hover { color: var(--accent); text-decoration: none; } .header-actions { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; } .site-nav + .header-actions { margin-left: 0; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: var(--radius); background: transparent; color: var(--text); cursor: pointer; transition: color 0.2s ease; } .icon-btn svg { display: block; } .icon-btn:hover { color: var(--accent); text-decoration: none; } .lang-btn { width: auto; padding: 0 0.35rem; font-family: var(--font-mono); font-size: 0.78rem; } .icon-moon { display: none; } [data-theme="light"] .icon-moon { display: block; } [data-theme="light"] .icon-sun { display: none; } /* ---------- 首屏 / 关于（al-folio about 布局） ---------- */ .hero { padding: 3.5rem 0 3rem; border-bottom: 1px solid var(--border); scroll-margin-top: 4.5rem; } .hero-inner { display: flex; align-items: flex-start; gap: 2.5rem; } .hero-text { flex: 1 1 auto; min-width: 0; } .hero-greeting { margin: 0 0 0.25rem; font-size: 0.95rem; font-weight: 300; color: var(--text-faint); } .hero-name { margin: 0 0 0.25rem; font-size: 2.5rem; font-weight: 400; } .hero-title { margin: 0; font-size: 1.1rem; font-weight: 400; color: var(--accent); } .hero-subtitle { margin: 0.25rem 0 1.25rem; font-size: 0.95rem; color: var(--text-faint); } .hero-intro { margin: 0 0 1.25rem; max-width: 38em; color: var(--text-muted); } /* 简历下载按钮（放在简短介绍下方） */ .hero-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; } .btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.1rem; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--accent); color: var(--accent-contrast); font-size: 0.9rem; font-weight: 500; transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .btn-primary svg { display: block; width: 1.05rem; height: 1.05rem; } .btn-primary:hover { background: var(--accent-text); border-color: var(--accent-text); color: #ffffff; text-decoration: none; transform: translateY(-1px); } /* 个人资料卡（al-folio profile） */ .profile { flex: 0 0 190px; width: 190px; } .profile-image { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--accent-soft); } .profile-more { margin-top: 0.75rem; font-family: var(--font-mono); font-size: 0.78rem; line-height: 1.6; color: var(--text-faint); } .profile-more p { margin: 0; } /* 社交链接（纵向：图标 + 文本） */ .hero-links { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; margin-top: 1rem; } .social-link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--text-muted); transition: color 0.2s ease; } .social-link:hover { color: var(--accent); text-decoration: none; } .social-link svg { display: block; flex: 0 0 auto; width: 1.05rem; height: 1.05rem; color: var(--accent); } .social-link .monogram { flex: 0 0 auto; width: 1.05rem; font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700; text-align: center; color: var(--accent); } /* ---------- 分区通用 ---------- */ .section { padding: 3rem 0; border-bottom: 1px solid var(--border); scroll-margin-top: 4.5rem; } .section:last-of-type { border-bottom: none; } .section-head { margin-bottom: 1.5rem; } .section-head h2 { font-size: 2rem; font-weight: 400; } .block-label { font-size: 1.25rem; font-weight: 400; color: var(--text); margin: 2rem 0 0.75rem; } /* ---------- 研究方向 ---------- */ .interest-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; } .interest-card { padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); transition: border-color 0.2s ease; } .interest-card:hover { border-color: var(--accent); } .interest-index { display: block; margin-bottom: 0.35rem; font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent-text); } .interest-card h3 { font-size: 1rem; font-weight: 500; line-height: 1.4; color: var(--text); } /* ---------- 关于 ---------- */ .about-text p { margin: 0 0 1rem; color: var(--text-muted); } .about-text p:last-child { margin-bottom: 0; } /* 基本信息 */ .info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3rem; margin: 0; } .info-item { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--border); } .info-item dt { font-size: 0.95rem; color: var(--text-faint); white-space: nowrap; } .info-item dd { margin: 0; font-size: 0.95rem; color: var(--text); text-align: right; } /* 徽章（al-folio badge） */ .skill-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; } .skill-tags li { padding: 0.35em 0.65em; font-size: 0.8rem; color: var(--text); background: var(--accent-soft); border-radius: var(--radius); } /* ---------- 教育背景 ---------- */ .edu-list { display: flex; flex-direction: column; } .edu-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; padding: 1.25rem 0; border-bottom: 1px solid var(--border); } .edu-item:first-child { padding-top: 0; } .edu-item:last-child { border-bottom: none; padding-bottom: 0; } .edu-main h3 { font-size: 1.25rem; font-weight: 400; margin-bottom: 0.2rem; } .edu-school { font-size: 0.95rem; color: var(--text-faint); } .edu-courses { margin: 0.6rem 0 0; max-width: 48em; font-size: 0.9rem; color: var(--text-faint); } .edu-side { flex: 0 0 auto; text-align: right; } .edu-period { font-size: 0.9rem; color: var(--text-faint); } .edu-note { display: block; margin-top: 0.15rem; font-size: 0.85rem; color: var(--text-faint); } /* ---------- 任职科研 ---------- */ .research-list { display: flex; flex-direction: column; } .research-item { padding: 1.25rem 0; border-bottom: 1px solid var(--border); } .research-item:first-child { padding-top: 0; } .research-item:last-child { border-bottom: none; padding-bottom: 0; } .research-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.25rem; } .research-item h3 { font-size: 1.25rem; font-weight: 400; } .research-kind { padding: 0.25em 0.6em; font-size: 0.72rem; color: var(--text); background: var(--accent-soft); border-radius: var(--radius); white-space: nowrap; } .research-item p { margin: 0; color: var(--text-muted); } .research-item .research-meta { margin-bottom: 0.35rem; font-size: 0.9rem; color: var(--text-faint); } /* ---------- 论文发表 ---------- */ .pub-list { list-style: none; margin: 0; padding: 0; } .pub-item { padding: 1.1rem 0; border-bottom: 1px solid var(--border); } .pub-item:first-child { padding-top: 0; } .pub-item:last-child { border-bottom: none; padding-bottom: 0; } .pub-title { font-size: 1rem; font-weight: 500; color: var(--text); margin: 0 0 0.35rem; } .pub-title-link { color: var(--text); } .pub-title-link:hover { color: var(--accent); text-decoration: underline; } .pub-authors { margin: 0 0 0.3rem; font-size: 0.9rem; line-height: 1.6; color: var(--text-muted); } /* 作者列表中的本人：加粗 + 下划线高亮 */ .pub-me { font-weight: 700; color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } .pub-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0 0; } .pub-btn { display: inline-flex; align-items: center; padding: 0.2em 0.6em; font-size: 0.78rem; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); transition: color 0.2s ease, border-color 0.2s ease; } .pub-btn:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; } .pub-meta { font-size: 0.9rem; color: var(--text-faint); } .pub-role { display: inline-block; padding: 0.25em 0.6em; font-size: 0.72rem; color: var(--text); background: var(--accent-soft); border-radius: var(--radius); } .pub-meta .pub-venue { font-style: italic; } .pub-meta .pub-year { font-size: 0.9rem; color: var(--text-faint); } /* ---------- 获奖竞赛 / 技能证书 ---------- */ .award-list { list-style: none; margin: 0; padding: 0; } .award-item { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--border); } .award-item:first-child { padding-top: 0; } .award-item:last-child { border-bottom: none; padding-bottom: 0; } .award-item::before { content: "•"; color: var(--accent); } .award-name { flex: 1 1 auto; color: var(--text-muted); } .award-year { font-size: 0.85rem; color: var(--text-faint); white-space: nowrap; } /* ---------- 链接与联系 ---------- */ .contact-note { margin: 0 0 1.25rem; max-width: 40em; color: var(--text-muted); } .link-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } .link-card { display: flex; align-items: center; gap: 0.85rem; padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .link-card:hover { color: var(--text); text-decoration: none; transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow); } .link-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--accent); } .link-icon svg { display: block; width: 1.35rem; height: 1.35rem; } .link-icon .monogram { font-family: var(--font-mono); font-size: 0.95rem; font-weight: 700; } .link-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.4; } .link-label { font-size: 0.75rem; color: var(--text-faint); } .link-value { font-size: 0.95rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- 页脚 ---------- */ .site-footer { padding: 2rem 0; background: var(--global-footer-bg-color); color: var(--global-footer-text-color); border-top: 1px solid var(--border); } .site-footer a { color: var(--global-footer-link-color); } .site-footer a:hover { color: var(--accent); } .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.85rem; } /* 正文用色：深色主题下与主题色一致；浅色主题下用深一档的 --accent-text， 而图标 / 边框 / 徽章底色等装饰元素继续使用主题亮色 --accent */ a, .site-name, .site-name:hover, .hero-title, .site-nav a:hover, .social-link:hover, .pub-title-link:hover, .pub-btn:hover, .site-footer a:hover { color: var(--accent-text); } /* ---------- 响应式 ---------- */ /* 中等宽度下收起导航中的外部链接（链接区仍可访问），避免导航拥挤 */ @media (max-width: 900px) { .site-nav a[href^="http"] { display: none; } } @media (max-width: 768px) { .site-nav { display: none; } .header-actions { margin-left: auto; } .hero { padding: 2.5rem 0 2rem; } .hero-inner { flex-direction: column-reverse; align-items: flex-start; gap: 1.5rem; } .profile { flex: 0 0 auto; width: 140px; } .section { padding: 2.25rem 0; } .info-grid, .link-grid { grid-template-columns: 1fr; } .interest-grid { grid-template-columns: 1fr; } .edu-item { flex-direction: column; gap: 0.25rem; } .edu-side { text-align: left; } /* 社交链接在窄屏下不再限宽，避免文字换行 */ .hero-links { width: 100%; } .footer-inner { flex-direction: column; align-items: flex-start; } } @media (max-width: 480px) { .container { padding: 0 18px; } .hero-name { font-size: 1.75rem; } .section-head h2 { font-size: 1.5rem; } }