/* ========================================================== portfolio-layout.css — 作品集全局骨架 (Portfolio Skeleton) ------------------------------------------------------------ 物理拆分层, 不使用 CSS @import, 在 file:// 协议下零跨域错误。在 index.html 中按顺序引入 (后加载覆盖前加载, 15 CSS): 1. base.css (基础层: 重置 + 变量 + 纸纹 + scrollbar) 2. scene.css (场景层: 海草 + 潜水员 + 标题 + 进场) 3. portfolio-layout.css ← 本文件 (骨架层, 先于网格层加载) 4. portfolio-grid.css (网格层, 后写后赢) 5. resume.css (简历, 含 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 已删除, 其业务兜底层内容已全部迁移到对应主题层) 包含: 1. #content-wrapper 全屏外壳 2. .content-section / #section-resume / .section-left / .section-right 3. .content-section .container / .section-content 4. 奇数 / 偶数 section 内容方向翻转 5. #section-portfolio 容器层 (为网格层提供 stack context) 6. 各断点下 (@media max-width: 1024 / 768 / 480 / 360) 的内容区上下边距、容器宽度、section-title 字号等基础骨架样式【纸雕铁律】 - 不透明: 内容容器 100% 不透明卡纸 (background 由 portfolio-grid.css 提供) - 硬边: section / container 全部直角, 无 border-radius - 物理投影: 各 section 阴影由 portfolio-grid.css 的卡片层提供 - 纸带: 时间轴 / 滚动条纸带在其他文件, 本文件不涉及 ========================================================== */ /* ========================================================== 1. 全局作品集骨架 (Content Wrapper / Sections / Container) ========================================================== */ #content-wrapper { position: relative; top: 0; left: 0; width: 100%; z-index: 2; pointer-events: none; padding-top: 80vh; } .content-section { width: 100%; padding: 80px 0; min-height: 100vh; display: flex; justify-content: center; align-items: flex-start; box-sizing: border-box; /* Tunnel book layer 3: content paper floats in front of seaweed (1), behind diver (10) */ position: relative; z-index: 5; } #section-resume { min-height: auto; padding-top: 20vh; padding-bottom: 20vh; } .section-left { justify-content: center; padding-left: 0; text-align: inherit; } .section-right { justify-content: center; padding-right: 0; text-align: inherit; } .content-section .container { width: 86% !important; max-width: 1300px; margin: 0 auto; box-sizing: border-box; display: flex; flex-direction: column; transition: all 0.5s ease; } .section-content { width: 100%; max-width: 700px; pointer-events: auto; } .content-section:nth-of-type(odd) .container { align-items: flex-end; text-align: right; margin-left: auto; margin-right: 0; padding-right: 20px; } .content-section:nth-of-type(even) .container { align-items: flex-start; text-align: left; margin-left: 0; margin-right: auto; padding-left: 20px; } /* Backlog #42 (2026-06-24): Contact 改为整体居右 (与 Portfolio 的左对齐解耦) Backlog #43 (2026-06-24 再后续): Portfolio 标题/副标题也居右 (与 About Me / Contact 节奏一致) - Portfolio 标题/副标题: `flex-end` + `text-align: right` (Backlog #43 改 flex-start → flex-end) - Portfolio 网格: `width: 100%` 不受 align-items 影响, 仍然占满整行 - Contact: 维持 `flex-end` (右对齐) - 这两个 section 之前被同一条规则强制左对齐, 现拆开 */ #section-portfolio .container { display: flex; flex-direction: column !important; align-items: flex-end !important; text-align: right !important; } #section-contact .container { display: flex; flex-direction: column !important; align-items: flex-end !important; text-align: right !important; } #section-portfolio { flex-direction: column; justify-content: flex-start; align-items: stretch; position: relative; z-index: 5; } #section-portfolio .section-title { position: relative; z-index: 20; margin-bottom: 0.5rem; /* 缩小, 让位给下方中文副标题 */ padding-bottom: 0.5rem; } /* ========================================================== 1A. 段落副标题 (.section-subtitle) — 中文翻译 ------------------------------------------------------------ 与 Life Collage 的 .life-collage-subtitle 保持一致: · 英文大标题下方一行中文小字, 提升纸雕卡片的中文信息密度 · 字体: Cinzel + PingFang SC, 浅色 + 较大 letter-spacing · 适用: PORTFOLIO / 作品集, 后续可推广到 RESUME / 简历等 ========================================================== */ /* 段落主标题 (.section-title) — 英文大写衬线与 .life-collage-main-title 保持严格一致: 桌面 3rem / 白色 0.95 / letter-spacing 0.3em / Cinzel 衬线 / 300 字重 */ .section-title { font-family: 'Cinzel', 'Playfair Display', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif; font-size: 3rem; text-transform: uppercase; letter-spacing: 0.3em; color: rgba(245, 247, 250, 0.95); margin-bottom: 0.5rem; font-weight: 300; } .section-subtitle { font-family: 'Cinzel', 'Playfair Display', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif; font-size: 1rem; /* 桌面: 1rem (16px) */ text-transform: uppercase; letter-spacing: 0.2em; color: rgba(245, 247, 250, 0.8); /* 与 .life-collage-subtitle 严格同步 */ margin-bottom: 1.5rem; font-weight: 300; } #section-portfolio .section-subtitle { margin-bottom: 2.5rem; /* PORTFOLIO 下方留更多空间给网格 */ color: #000; /* 中文副标题"作品集"与英文主标题同色: 黑色 */ } #section-portfolio .portfolio-grid { width: 100% !important; position: relative; z-index: 6; } /* ========================================================== 2. 全局响应式骨架 (Global Skeleton @ 1024 / 768 / 480 / 360) ------------------------------------------------------------ 仅针对内容区上下边距、容器宽度、section-title 字号等基础骨架样式。网格 / 卡片的列数与 logo 尺寸由 portfolio-grid.css 在同断点下覆盖。 ========================================================== */ /* 8.1 平板及以下 (<= 1024px) — 容器宽度收紧 */ @media (max-width: 1024px) { .content-section .container { width: 92% !important; } .section-title { font-size: 2.2rem; letter-spacing: 0.2em; } .life-collage-main-title { font-size: 2.2rem; } .pdf-modal-container { width: 95vw !important; height: 88vh !important; } .x1-elegant-text { font-size: 13px; } } /* 8.2 768px 以下 — 内容区上下边距 / 容器宽度 / section-title 字号 */ @media (max-width: 768px) { /* ---- 内容区 ---- */ .content-section { padding: 30px 0; } .content-section .container { width: 94% !important; padding-left: 12px !important; padding-right: 12px !important; } .content-section:nth-of-type(odd) .container, .content-section:nth-of-type(even) .container { align-items: flex-start !important; text-align: left !important; margin-left: 0; margin-right: 0; padding-left: 12px !important; padding-right: 12px !important; } #section-resume { padding-top: 12vh; padding-bottom: 10vh; } .section-title { font-size: 1.8rem; letter-spacing: 0.15em; } #section-portfolio .section-title { font-size: 1.8rem; } .resume-layout { flex-direction: column; gap: 3.45rem; } .life-collage-main-title { font-size: 1.8rem; } } /* 8.3 480px 以下 — section-title 字号 */ @media (max-width: 480px) { .section-title { font-size: 1.4rem; } /* pdf-modal-container 与 x1 / award / resume-details 等规则由 portfolio-preview.css / portfolio-x1-sidebar.css / resume.css 提供 */ .pdf-modal-container { width: 100vw !important; height: 100vh !important; clip-path: none !important; border-radius: 0 !important; } .pdf-modal-container::before, .pdf-modal-container::after { display: none; } .x1-elegant-text { font-size: 12px; padding: 20px 18px !important; } .award-media-box { max-width: 100% !important; } .award-preview-img { max-height: 280px !important; } .resume-details { padding: 12px 8px !important; } } /* 8.4 360px 以下 — section-title / life-collage-main-title 字号 */ @media (max-width: 360px) { .section-title, .life-collage-main-title { font-size: 1.2rem !important; letter-spacing: 0.12em; } .x1-elegant-text .x1-md-body { font-size: 11.5px; } }