/* ========================================================== resume.css — 简历与时间轴纸带模块 (Resume + Timeline) ------------------------------------------------------------ 物理拆分层, 不使用 CSS @import, 在 file:// 协议下零跨域错误。 在 index.html 中按顺序引入 (后加载覆盖前加载, 15 CSS): 1. base.css (基础层: 重置 + 变量 + 纸纹 + scrollbar) 2. scene.css (场景层: 海草 + 潜水员 + 标题 + 进场) 3. portfolio-layout.css (骨架层: #content-wrapper / .content-section / 容器 / 全局响应式) 4. portfolio-grid.css (网格层: .portfolio-grid / .project-card / --rand-* / 卡片响应式) 5. resume.css ← 本文件 (简历层: 头像 / 时间轴纸带 / 展开折叠 / Award Media / experience-tag 八边形化) 6. portfolio-preview.css (预览层: Lightbox + PDF 模态框 + 画廊) 7. portfolio-x1-sidebar.css (X1 侧栏: Markdown + modal) 8. contact.css (联系表单 + 社交媒体矩阵) 9. life-layout.css (兴趣卡骨架: 4 张核心卡 + 散落 Polaroid) 10. life-modal.css (通用 modal: 4 主题 + 流体特效 + 响应式) 11. life-marathon.css (Marathon 列表 + 节点 + 响应式) ← 原 lifeCollage.css 一部分 12. life-travel.css (Travel 地图 + 时间轴 + 响应式) ← 原 lifeCollage.css 一部分 13. life-photography.css (Photography 骨架位, Backlog #27 待实现) 14. life-finance.css (Finance 骨架位, Backlog #27 待实现) 15. responsive.css (全局响应兜底) 完整文件结构与职责归属见 [WORKFLOW.md §4](./WORKFLOW.md). (历史 portfolio.css 已删除, 其残余响应式已全部迁移到 portfolio-layout.css) 包含: 1. 简历容器 / 布局 (resume-container / resume-layout / resume-content) 2. ~~旧头像节已废弃~~ (Backlog #39: 头像迁移至 about-me.css §4) 3. Section 标题 / Tag (subtitle-text / section-tag) 4. 双列技能 / 教育网格 (content-grid / column / column-title / skill-item) 5. 时间轴纸带 (resume-section / resume-item / resume-trigger / item-meta / item-meta-main) 6. 时间轴项 (item-title / item-date / item-sub / experience-tag + tag-* 四种) 7. 折叠箭头 (fold-arrow) + 悬停态 8. 展开 / 折叠详情 (resume-details + .is-active / .is-pinned) 9. 项目列表 (item-bullet-list + li / ::before / strong) 10. 技能组 (skills-grid / skill-group + strong / b) 11. Award 媒体盒 (award-media-box / award-preview-img / image-placeholder-tip) 12. 奇数 section 排版翻转 (nth-of-type odd) 13. 各断点下的简历响应式 (@media max-width: 1200 / 1024 / 900 / 768 / 480 / 360) 【纸雕铁律】 - 不透明: 时间轴纸带 100% 不透明卡纸 (experience-tag 的 4 种颜色全部纯色) - 硬边: 项目卡 / 纸带 / experience-tag 全部八角形切角, 无 border-radius · experience-tag 4px 切角 (Backlog #22 改造, 原 20px 胶囊改为 clip-path 八边形) · ~~头像八角形切角已迁移至 about-me.css §4 (Backlog #39)~~ - 物理投影: 多层 box-shadow 硬投影 · ~~头像: 2px 3px 0 + 0 5px 12px + inset 0 1px 0~~ (已迁移) · experience-tag: 2px 2px 0 + 4 种主题色硬投影 - 纸带: 时间轴 paper band 厚度 4-6px · .resume-section padding-top: 1.5rem (纸带顶部留白) · .resume-trigger padding: 16px 30px 16px 0 (纸带上下各 16px) · .resume-item margin-bottom: 2.5rem (纸带间距) · .experience-tag padding: 3px 12px (纸带本身约 22px 高度) 注: 时间轴纸带 (Timeline Paper Band) 通过 .resume-section + .resume-item + .item-meta 三层嵌套实现, 不存在独立的 .resume-timeline / .timeline-axis / .timeline-node DOM. 纸带视觉由 padding-left: 200px 在 .item-sub 与 .resume-details 上保持一致缩进实现. ========================================================== */ /* ========================================================== 1. 简历容器 / 布局 (Resume Container & Layout) ========================================================== */ .resume-container { max-width: 1200px; padding: 3rem 0; } .resume-layout { display: flex; gap: 4rem; align-items: flex-start; justify-content: flex-start; width: 100%; } /* ========================================================== 2. ~~旧头像 (Profile Portrait) 已废弃~~ ------------------------------------------------------------ Backlog #39 (2026-06-24): 头像已迁移至 About Me 板块, 本节 CSS 全部移除. 如未来需恢复, 见 [PROJECT_NOTES.md §9.16](./PROJECT_NOTES.md). ========================================================== */ /* ========================================================== 3. 简历正文容器 (Resume Content + Section / Tag) ========================================================== */ .resume-content { flex: 1; min-width: 0; max-width: 1100px; } .subtitle-text { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif; font-size: 1rem; color: rgba(0, 0, 0, 0.7); letter-spacing: 0.3em; text-align: inherit; margin-bottom: 3.5rem; } /* ========================================================== 4. 双列网格 (Resume Two-Column Grid) — 桌面端 ========================================================== */ .content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; } .column { text-align: inherit; } .column-title { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif; font-size: 13px; font-weight: 300; text-transform: uppercase; letter-spacing: 0.3em; color: rgba(0, 0, 0, 0.5); margin-bottom: 2rem; } .skill-item { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif; font-size: 0.95rem; color: rgba(0, 0, 0, 0.9); margin-bottom: 1rem; letter-spacing: 0.05em; } /* ========================================================== 5. 时间轴纸带 (Resume Section / Item / Trigger / Item-Meta) ------------------------------------------------------------ 物理纸带三层结构: .resume-section → 纸带分隔区 (一个 Education / 一个 Experience) .resume-item → 纸带内单条记录 (一个学位 / 一段经历) .resume-trigger → 纸带可点击行 (整行点击展开 .resume-details) .item-meta → 纸带内 row (左侧 date, 中间 tag+title, 右侧 fold-arrow) ========================================================== */ .resume-section { margin-bottom: 4rem; position: relative; padding-top: 1.5rem; } .section-tag { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.3em; color: rgba(0, 0, 0, 0.4); margin-bottom: 1.5rem; font-weight: 300; } .resume-item { margin-bottom: 2.5rem; } .resume-trigger { position: relative; cursor: pointer; padding: 16px 30px 16px 0; pointer-events: auto; } .item-meta { display: flex; align-items: center; width: 100%; max-width: 1200px; gap: 0; white-space: nowrap; } .item-meta-main { flex: 1; display: flex; align-items: center; gap: 0.85rem; justify-content: flex-end; min-width: 0; white-space: nowrap; order: 1; } /* ========================================================== 6. 时间轴项 — 标签 (Experience Tag, 4 种主题色) ------------------------------------------------------------ 纸带本身: padding: 3px 12px (高度约 22px), border-radius: 20px 让纸带边缘 微圆 (纸雕铁律中只有头像/卡片是直角, 小型 chip 标签允许圆角), box-shadow 2px 2px 0 硬投影 + 各色边框强化卡纸感. ========================================================== */ .experience-tag { display: inline-flex; align-items: center; justify-content: center; padding: 3px 12px; font-size: 11px; font-weight: 600; /* Backlog #22 改造: 从胶囊 (border-radius:20px) 改成八边形 (clip-path 4px 切角), 与项目卡 / X1 卡片 / 时间轴节点统一纸雕语言 */ border-radius: 0; clip-path: polygon( 4px 0%, calc(100% - 4px) 0%, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0% calc(100% - 4px), 0% 4px ); letter-spacing: 0.08em; text-transform: uppercase; margin-right: 12px; transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); flex-shrink: 0; white-space: nowrap; } .tag-parttime { background: #0a2238; color: #58a6ff; border: 1px solid rgba(56, 139, 253, 0.6); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6); } .tag-school { background: #0a2614; color: #57ab5a; border: 1px solid rgba(46, 160, 67, 0.6); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6); } .tag-intern { background: #1f1233; color: #d3b6ff; border: 1px solid rgba(187, 128, 255, 0.6); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6); } .tag-award { background: #2a1f0a; color: #ffc154; border: 1px solid rgba(255, 193, 84, 0.5); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6); } /* ========================================================== 7. 时间轴项 — 标题 / 日期 / 子标题 (Title / Date / Sub) ------------------------------------------------------------ 桌面端纸带排版: [ .item-date (180px, 左对齐) ] [ gap ] [ .item-meta-main (右对齐: tag + title) ] 纸带纸带顶部箭头: .fold-arrow 绝对定位到右上角, 默认 rotate(45deg), 展开时旋转到 225deg 变成"下箭头". ========================================================== */ .item-title { font-family: 'Cinzel', 'Playfair Display', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif; font-size: 1.15rem; color: rgba(0, 0, 0, 0.95); letter-spacing: 0.05em; font-weight: 300; min-width: 0; flex: 1; text-align: right; } .item-date { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif; font-size: 0.95rem; color: rgba(0, 0, 0, 0.95); letter-spacing: 0.1em; font-weight: 400; flex-shrink: 0; white-space: nowrap; order: -1; width: 180px; min-width: 180px; max-width: 180px; text-align: left; margin-right: 20px; } .item-sub { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif; font-size: 0.95rem; color: rgba(0, 0, 0, 0.7); letter-spacing: 0.05em; margin: 4px 0 0 0; padding-left: 200px; /* 与 .resume-details 保持一致缩进: 时间轴纸带宽度 */ text-align: right; white-space: nowrap; } /* ========================================================== 8. 折叠箭头 (Fold Arrow) + 悬停态 + 隐藏规则 ------------------------------------------------------------ 第四个及以后的 section (Award 等) 不显示 fold-arrow, 因为 Award 块始终 全部展开, 不需要折叠交互. ========================================================== */ .fold-arrow { position: absolute; right: 0; top: 22px; width: 10px; height: 10px; flex-shrink: 0; border-right: 1px solid rgba(255, 255, 255, 0.3); border-bottom: 1px solid rgba(255, 255, 255, 0.3); transform: rotate(45deg); transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); } .resume-trigger:hover .fold-arrow { border-color: rgba(255, 255, 255, 0.8); } .resume-section:nth-of-type(n+3) .fold-arrow { display: none; } /* ========================================================== 9. 展开 / 折叠详情 (Resume Details) ------------------------------------------------------------ 默认 max-height: 0 + opacity: 0 → 收起; .is-active / .is-pinned → max-height 2000 → 展开. 默认 padding-left: 200px 与 .item-sub 保持纸带视觉对齐; 1200px / 1024px 收紧 padding-left 让窄屏对齐更紧凑 (见底部响应式). ========================================================== */ .resume-details { max-height: 0; opacity: 0; overflow: hidden; width: 100%; max-width: 1200px; padding-left: 200px; box-sizing: border-box; transition: max-height 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease, padding-top 0.5s cubic-bezier(0.25, 1, 0.5, 1); pointer-events: auto; } .resume-item.is-active .resume-details, .resume-item.is-pinned .resume-details { max-height: 2000px; opacity: 1; padding-top: 15px; } .resume-item.is-active .fold-arrow, .resume-item.is-pinned .fold-arrow { transform: rotate(225deg); border-color: #fff; } /* 默认: 桌面端 resume-details 用 200px 左 padding 缩进; 中窄屏 (≤1280px) 的 padding-left 由底部 §14 的 1280px 断点接管 (120px), ≤900px / ≤768px 由各自断点的 padding 简写接管 (14/16) */ /* 增大展开后的最大高度, 防止 award 大图被裁 */ .resume-item.is-active .resume-details, .resume-item.is-pinned .resume-details { max-height: 5000px; } /* ========================================================== 10. 项目列表 (Item Bullet List) ------------------------------------------------------------ 每个 li 前置 "-", 与正文统一. strong 提亮关键词 (项目名 / 证书名等). ========================================================== */ .item-bullet-list { list-style: none; padding: 0; margin: 0; } .item-bullet-list li { position: relative; padding-left: 16px; margin-bottom: 12px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif; font-size: 13px; line-height: 1.8; color: rgba(0, 0, 0, 0.6); letter-spacing: 0.01em; text-align: justify; white-space: normal; } .item-bullet-list li::before { content: '-'; position: absolute; left: 0; color: rgba(0, 0, 0, 0.35); } .item-bullet-list strong { color: rgba(0, 0, 0, 0.95); font-weight: 500; letter-spacing: 0.04em; } /* ========================================================== 11. 技能组 (Skills Grid + Skill Group) ========================================================== */ .skills-grid { display: flex; flex-direction: column; gap: 0.8rem; } .skill-group { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif; font-size: 13px; color: rgba(0, 0, 0, 0.7); letter-spacing: 0.02em; line-height: 2; margin: 8px 0; white-space: normal; } .skill-group strong, .skill-group b { color: #000000 !important; font-size: 13px; font-weight: 600; letter-spacing: 0.05em; } /* ========================================================== 12. Award 媒体盒 (Award Media Box + Preview + Placeholder Tip) ------------------------------------------------------------ 1px 边框 + 6px 圆角 (纸雕铁律中只有头像/卡片是直角, 小型媒体盒允许微圆) + 内嵌图片 brightness 0.9 + contrast 1.1, 让获奖证书看起来像旧纸. ========================================================== */ .award-media-box { margin-top: 15px; width: 100%; max-width: min(600px, 100%); border-radius: 6px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.02); transition: all 0.3s ease; } .award-preview-img { width: 100%; max-height: 420px; display: block; object-fit: contain; object-position: center top; filter: brightness(0.9) contrast(1.1); background: rgba(0, 0, 0, 0.15); } .image-placeholder-tip { padding: 12px; font-size: 11px; color: rgba(0, 0, 0, 0.4); letter-spacing: 0.05em; border-top: 1px solid rgba(0, 0, 0, 0.05); background: rgba(255, 255, 255, 0.2); } /* ========================================================== 13. 奇数 Section 排版翻转 (Odd Section Layout Flip) ------------------------------------------------------------ Resume 是奇数 section (3rd among all .content-section), 内容方向: · resume-layout justify-content: flex-end (头像放右) · resume-content / resume-section / skill-group / interest-item 右对齐 · award-media-box margin-left: auto (贴右) · experience-tag margin-right: 0 (取消桌面端右外边距) ========================================================== */ .content-section:nth-of-type(odd) .resume-layout { justify-content: flex-end; } .content-section:nth-of-type(odd) .resume-content, .content-section:nth-of-type(odd) .resume-section, .content-section:nth-of-type(odd) .skill-group, .content-section:nth-of-type(odd) .interest-item { text-align: right; } .content-section:nth-of-type(odd) .award-media-box { margin-left: auto; margin-right: 0; } .content-section:nth-of-type(odd) .experience-tag { margin-right: 0; margin-left: 0; } /* ========================================================== 14. 响应式断点 (Resume @media max-width) ------------------------------------------------------------ 各断点针对简历 / 时间轴纸带 / .resume-details 的微调, 按从大到小排列: · 1280px : 标题允许换行 + 缩小日期列 + 压缩字号 (中等屏 awards 防溢出) · 1200px / 1024px: .resume-details padding-left 收紧 (见 §9 末尾) · 900px : 简历纵向布局, 头像缩小, meta 行允许换行 · 768px : 完全纵向, 头像顶部居中, meta 列向堆叠 · 480px : award-media 撑满, .resume-details 紧凑 · 360px : (无简历特定规则, 由 portfolio-layout.css 接管) ========================================================== */ /* 8.1g Resume 中等屏断点 (≤1280px) — 标题允许换行 + 收窄日期列 (Backlog #27) ------------------------------------------------------------ 中等宽度 (1024-1280px) 下, 长奖项标题 (50+ 字符) 会从右侧溢出被截断: - .item-title 默认 white-space: nowrap (继承 .item-meta-main), 不换行 - .item-date 固定 180px + margin-right 20px 占据左侧 200px - 标题 1.15rem 字号下最长标题需要 ~550px, 但可用空间仅 440-590px - body { overflow-x: hidden } 把溢出部分裁掉 修复: 1. .item-title 改为可换行 (white-space: normal) + 缩字号 1rem + 略缩字距 2. .item-date 收窄到 140px, 释放 40px 给标题 3. .item-sub / .resume-details 的 padding-left 同步缩到 156px, 与新日期列宽对齐, 保持纸带视觉缩进一致 */ @media (max-width: 1280px) { .item-meta { align-items: flex-start; /* 日期与多行标题顶部对齐 */ } .item-title { font-size: 1rem !important; white-space: normal !important; line-height: 1.35; word-break: break-word; text-align: right; } .item-date { width: 140px !important; min-width: 140px !important; max-width: 140px !important; margin-right: 12px !important; font-size: 0.88rem !important; } .item-sub { padding-left: 156px !important; /* 140 日期 + 12 间距 + 4 微调 */ } .resume-details { padding-left: 120px !important; /* 详情略小于纸带缩进, 避免右侧贴边 */ } } /* 8.1e Resume 中间断点 (≤900px) — ~~头像已迁移至 About Me~~, 改为内容单列, meta 行允许换行 */ @media (max-width: 900px) { .resume-layout { flex-direction: column !important; align-items: flex-start !important; gap: 1.5rem !important; /* 照片已移除, 收紧 gap 防止内容稀疏 */ } /* ~~.profile-portrait-container 响应式已废弃 (Backlog #39)~~ */ /* Education 是 resume-content 里的第一个 section, 加大顶部 padding */ .resume-content > .resume-section:first-child { padding-top: 2.5rem; margin-top: 1rem; } .item-meta { flex-wrap: wrap; /* 允许 meta 行内容在中等屏自动换行 */ } .item-date { width: 140px !important; min-width: 140px !important; max-width: 140px !important; font-size: 0.85rem !important; } .item-title { font-size: 1rem !important; white-space: normal; /* 允许标题在中等屏换行 */ text-align: right; } .item-sub { padding-left: 156px !important; } .resume-details { padding: 14px 16px 14px 20px !important; margin-left: 0 !important; } } /* 8.1d Awards 中等宽度适配 (≤1024px) — 媒体盒与图片压缩 ------------------------------------------------------------ Backlog #27: 中等宽度 (768-1024px) 下 awards 显示不全: - 容器变窄时 .award-media-box 仍为 min(600px, 100%) 容易贴右溢出 - .award-preview-img 仍 max-height 420px 在中等屏过高 - .resume-details max-height: 5000px 不足以容纳 5×480px = 2400px+ 解决: 在 ≤1024px 提前压缩 max-width + max-height, 给容器留更多呼吸空间 */ @media (max-width: 1024px) { .award-media-box { max-width: min(500px, 100%); /* 600 → 500, 适配中等宽度 */ } .award-preview-img { max-height: 360px; /* 420 → 360, 中等屏下避免过高 */ } /* 进一步放大 .resume-details 展开后高度, 5 个 awards 在中等屏可能仍接近 2400-2600px */ .resume-item.is-active .resume-details, .resume-item.is-pinned .resume-details { max-height: 6500px; } } /* ≤900px 已在上面切列布局; 列布局下 awards 适配 (中等屏 → 列布局过渡) */ @media (max-width: 900px) { .award-media-box { max-width: min(480px, 100%); /* 列布局下进一步压缩 */ } .award-preview-img { max-height: 340px; } } /* 8.2 768px 以下 — ~~头像已迁移至 About Me~~, meta 垂直堆叠, Awards 进一步压缩 (Backlog #27) */ @media (max-width: 768px) { .resume-layout { flex-direction: column; gap: 1.5rem; } /* ---- Resume 响应式 (≤768px) — ~~头像顶部居中已废弃~~, meta 垂直堆叠 ---- */ /* ~~.profile-portrait-container 响应式已废弃 (Backlog #39)~~ */ .resume-content > .resume-section:first-child { padding-top: 1rem; /* 头像已移除, 不再需要顶部 padding 让位 */ margin-top: 0; } .item-meta { flex-direction: column !important; align-items: flex-start !important; white-space: normal !important; gap: 4px; } .item-meta-main { width: 100%; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 4px; } .item-date { width: auto !important; min-width: 0 !important; max-width: 100% !important; margin-right: 0 !important; font-size: 0.78rem !important; text-align: left !important; order: 3; } .item-title { width: 100%; font-size: 0.95rem !important; text-align: left !important; } .experience-tag { margin-right: 0 !important; margin-bottom: 4px; align-self: flex-start; } .item-sub { padding-left: 0 !important; text-align: left !important; font-size: 0.82rem !important; white-space: normal !important; /* 覆盖桌面端的 nowrap, 允许换行 */ } .resume-details { padding: 14px 16px !important; margin-left: 0 !important; } /* Awards 进一步压缩 (Backlog #27) */ .award-media-box { max-width: 100% !important; } .award-preview-img { max-height: 300px !important; } } /* 8.3 480px 以下 — Award 撑满, .resume-details 紧凑 */ @media (max-width: 480px) { .award-media-box { max-width: 100% !important; } .award-preview-img { max-height: 280px !important; } .resume-details { padding: 12px 8px !important; } }