/* ========================================================== portfolio-grid.css — 作品网格与卡片堆叠 (Portfolio Grid + Cards) ------------------------------------------------------------ 物理拆分层, 不使用 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 已删除, 其业务兜底层内容已全部迁移到对应主题层) 【Backlog #30 · 卡片宽度自适应 + 日期完整可见】 (2026-06-23) · 旧问题: aspect-ratio + max-height: 220px 锁死卡片高度, 大屏下 .project-logo-wrapper clamp 上限 240px 撑破卡片, .project-meta (含日期) 被 overflow: hidden 裁掉 · 新方案: min-height 做视觉下限 + flex 自然增长 + flex-shrink: 0 保证 meta 永远不被裁, 标题最多 2 行 line-clamp · 重新排布 (rearrange) 矩阵: 横屏 / ≥1440px → 4 列 (卡片较小, 内容紧凑) 1024-1279px → 2 列 (中等宽度友好, Backlog #16) 1280-1439px → 3 列 (中等宽度友好, Backlog #16) 600-1023px → 2 列 (大 logo + meta 充足) 竖屏 / ≤599px → 1-2 列 (meta 区不被裁) ≤360px → 1 列 (logo 缩小防止溢出) 包含: 1. .content-grid / .portfolio-grid: 4 列等宽网格, gap 6×4, 接近紧贴 2. .portfolio-theme-cluster: 主题聚拢 (X/P/M/S/C/O), 簇标签 3. --rand-rot / --rand-x / --rand-y / --rand-z CSS 变量: 簇内卡用 transform 错落摆放 (扑克牌小簇) 4. .project-card: 八角形刻刀切角 + 物理硬投影 + 顶部描边主色 【Backlog #30】min-height + flex 自然布局, 不用 aspect-ratio 锁死 5. .project-card::before / ::after: 编号水印 (X1 / P1 / M1 …) + 边框重绘 6. .project-card:hover: 浮起 + 加深投影 + --card-accent 切换 7. .project-card:has(.tag-*):hover: 按 tag 切换顶部主题色 8. .project-card.ai-exploration-card:hover: AI 紫变体 9. .project-logo-wrapper / .project-logo: 智能响应式 (clamp) 【Backlog #30】flex: 1 1 0; min-height: 0 允许收缩 10. .project-meta / .project-tag / .project-title / .project-date: 卡内排版 【Backlog #30】flex-shrink: 0; title 2 行 line-clamp; date white-space: nowrap 11. .tag-monument / .tag-perception / .tag-sustainability / .tag-community / .tag-ai / .tag-other 12. 流体波纹 / 声纳扩散 / 物理水波置换 / 海草交互唤醒 13. canvas / #fluid-particle-canvas 鼠标事件穿透 14. 各断点下 (@media orientation / 1440 / 1024-1439 / 600-1023 / 599 / 360) 的列数、gap、min-height、logo 尺寸精确控制 【Backlog #30】所有断点去掉 aspect-ratio, 改用 min-height 【纸雕铁律】 - 不透明: 卡片 100% 不透明卡纸 (莫兰迪浅色背景) - 硬边: 八角形 clip-path (12px 斜切), 零 border-radius - 物理投影: 多层 box-shadow (3px 4px 0px / 0 6px 14px / inset 0 1px 0) - 纸带: 时间轴 / 滚动条纸带在其他文件, 本文件不涉及 ========================================================== */ /* ========================================================== 1. 网格 (Grid) + 主题聚拢 (Theme Clustering) + 簇内随机变量 ========================================================== */ .content-grid, .portfolio-grid { display: grid; /* 4 列等宽: 让 X/P/M/S 占第一行, C/O 占据第二行左侧 */ grid-template-columns: repeat(4, 1fr); grid-auto-rows: auto; gap: 6px 4px; /* 异组间: 行列 6×4, 几乎紧贴 */ padding: 14px 6px; } /* === Portfolio 主题聚拢 (Theme Clustering) === 把项目卡按 category (X/P/M/S/C/O) 分组, 同主题卡形成"扑克牌小簇", 异主题间留明显空隙, 簇内卡用 --rand-rot/--rand-x/--rand-y 错落摆放 */ .portfolio-theme-cluster { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; /* 簇内卡紧贴 (4px) */ position: relative; /* 顶部留出空间给 cluster label, 底部 12px 呼吸 */ padding: 26px 10px 22px; /* 略增左右内边距, 给暖色框留呼吸 */ min-height: 220px; /* Backlog #30: 240→220, 给卡片更多弹性 */ /* 簇的暖色调浅色背景 (Backlog #30 修复: 之前误改成透明, 现恢复) */ background: rgba(252, 245, 230, 0.45); /* 暖色细描边 (莫兰迪浅米黄) */ border: 1px solid rgba(210, 190, 155, 0.4); border-radius: 6px; } /* 簇的标题 (右下角小标签, 深灰) */ .portfolio-theme-cluster::before { content: attr(data-cluster-label); position: absolute; bottom: 4px; right: 8px; font-family: 'Cinzel', 'Playfair Display', serif; font-size: 8px; letter-spacing: 0.2em; text-transform: uppercase; color: #333333; /* 深灰, 适配浅色背景 */ font-weight: 600; pointer-events: none; z-index: 0; } /* 簇内卡片: 用 CSS 变量错落摆放 */ .project-card.clustered-card { position: relative; width: 100% !important; /* 撑满簇内 grid cell, 适应不同卡片数 */ max-width: 240px; /* 但不超过 240px, 保持扑克牌比例 */ margin: 0 auto; /* 居中 */ transform: rotate(var(--rand-rot, 0deg)) translate(var(--rand-x, 0px), var(--rand-y, 0px)); /* !important: 覆盖下方 .project-card { z-index: 99999 !important; } 的全局兜底, 让 JS 通过 --rand-z 设置的簇内顺序 (S1>S2>S3 / M1>M2 / C1>C2) 真正生效. 特异性 (0,2,0) > (0,1,0), 双方都 !important 时高特异性胜出. */ z-index: var(--rand-z, 1) !important; transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1), filter 0.4s cubic-bezier(0.25, 1, 0.5, 1), z-index 0s; } /* 悬停: 提拉到顶层 + 旋转归零 + 放大 + 增强投影 */ .project-card.clustered-card:hover { transform: rotate(0deg) translate(0, -6px) scale(1.05) !important; z-index: 100 !important; box-shadow: 3px 6px 0px rgba(0, 3, 10, 0.25), 0 12px 24px rgba(0, 3, 10, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.7); filter: brightness(1.05); } /* 簇内多张卡的 z-index 由 JS 的 clusterProjectsByTheme 动态设置: 第一个子元素 (idx=0) 设最高 z, 最后一个设最低 z 详见 portfolio.js: card.style.setProperty('--rand-z', (groups[cat].length - idx)) */ /* 簇标签映射 (X1 → "Interactive", P1 → "Perception" 等) */ .portfolio-theme-cluster[data-cluster="X"]::before { content: 'Interactive Experiment'; } .portfolio-theme-cluster[data-cluster="P"]::before { content: 'Perception'; } .portfolio-theme-cluster[data-cluster="M"]::before { content: 'Monument'; } .portfolio-theme-cluster[data-cluster="S"]::before { content: 'Sustainability'; } .portfolio-theme-cluster[data-cluster="C"]::before { content: 'Community'; } .portfolio-theme-cluster[data-cluster="O"]::before { content: 'Other'; } /* ========================================================== 2. 项目卡 (Project Card) — 完整抽离 ------------------------------------------------------------ 【Backlog #30 · 卡片宽度自适应 + 日期完整可见】 · 旧问题: aspect-ratio + max-height: 220px 固定卡片高度, 但大屏下 .project-logo-wrapper clamp 上限 240px 会撑破卡片, 导致 .project-meta (含日期) 被 overflow: hidden 裁掉 · 新方案: 用 min-height 做视觉下限 + flex 自然增长, 让卡片按 内容自适应高度, 日期永远显示完整 · 关键三件套: .project-card → min-height: 180px (视觉下限) (去掉 aspect-ratio 和 max-height) .project-logo-wrapper → flex: 1 1 0; min-height: 0; (允许收缩, 不挤压 meta) .project-meta → flex: 0 0 auto; min-height: 56px; (永远显示完整 tag + title + date) ========================================================== */ .project-card { padding: 8px 10px; /* 视觉下限: 保证 tag + title + date 三行可见 */ min-height: 180px; /* 不再用 aspect-ratio + max-height 锁死卡片高度: flex 自然布局让 logo 与 meta 协商高度, 日期不再被裁 */ flex: 0 0 auto; /* 簇内: 不拉伸不收缩 */ align-self: center; /* 簇内: 水平居中 (不填满) */ box-sizing: border-box; } .project-logo-wrapper { /* 智能响应式高度: 容纳大 logo (约卡片 70% 高) */ display: flex; align-items: center; justify-content: center; margin-bottom: 5px; overflow: hidden; position: relative; /* 关键: flex 自然占满剩余空间, min-height: 0 允许收缩到内容以下 */ flex: 1 1 0; min-height: 0; max-height: 180px; /* 防 logo 撑爆卡片 */ } /* 空 logo-wrapper (O 卡片): 显示一个占位图标 */ .project-logo-wrapper:empty::before { content: "✦"; font-size: 38px; color: var(--theme-color, #6a7378); opacity: 0.4; font-weight: 100; } .project-logo { width: clamp(50px, 8vw, 85px); height: clamp(50px, 8vw, 85px); flex-shrink: 0; max-width: 82%; max-height: 82%; object-fit: contain; } /* ========================================================== 3. 流体波纹 / 声纳扩散 / 物理水波 (Project Card 扩展) ========================================================== */ .project-card { transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s, filter 0.3s !important; } .project-card.fluid-wake { animation: fluidRipple 0.8s ease-in-out !important; filter: drop-shadow(0 0 15px rgba(0, 242, 254, 0.3)) !important; } @keyframes fluidRipple { 0% { transform: scale(1) skewX(0deg); filter: blur(0px); } 30% { transform: scale(1.02) skewX(1deg); filter: blur(0.5px); } 60% { transform: scale(0.99) skewX(-0.5deg); filter: blur(0px); } } #fluid-particle-canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9; pointer-events: none; } /* === 声纳扩散 (Diver Sonar) === */ .project-card { position: relative !important; } .card-sonar-ripple { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid rgba(0, 242, 254, 0.6); border-radius: 0; pointer-events: none; opacity: 0; z-index: 1; clip-path: inherit; } .card-sonar-ripple.layer-1 { animation: sonarWaveExpand 1.6s cubic-bezier(0.1, 0.8, 0.3, 1) forwards; } .card-sonar-ripple.layer-2 { animation: sonarWaveExpand 1.6s cubic-bezier(0.1, 0.8, 0.3, 1) 0.3s forwards; } .card-sonar-ripple.layer-3 { animation: sonarWaveExpand 1.6s cubic-bezier(0.1, 0.8, 0.3, 1) 0.6s forwards; } @keyframes sonarWaveExpand { 0% { opacity: 0.9; transform: scale(0.96); } 100% { opacity: 0; transform: scale(1.05); } } /* === 物理水波置换 (SVG feDisplacementMap) === */ .project-card.physical-water-ripple { animation: realWaterDisplace 0.8s cubic-bezier(0.1, 0.8, 0.3, 1) forwards !important; } @keyframes realWaterDisplace { 0% { filter: url(#water-displacement-filter) drop-shadow(0 0 0px rgba(0,242,254,0)); } 50% { filter: url(#water-displacement-filter) drop-shadow(0 0 20px rgba(0,242,254,0.5)); } 100% { filter: url(#water-displacement-filter) drop-shadow(0 0 0px rgba(0,242,254,0)); } } /* ========================================================== 4. 作品集网格 + 项目卡 (Portfolio Grid + Project Card 完整定义) ========================================================== */ .content-grid { display: grid; grid-template-columns: repeat(4, 1fr); /* 缩小: 3 → 4 列, 卡片更小 */ gap: 14px; /* 缩小: 20px → 14px */ width: 100%; margin-top: 30px; } .portfolio-grid { display: grid; grid-template-columns: repeat(4, 1fr); /* 缩小: 3 → 4 列, 卡片更小 */ gap: 14px; /* 缩小: 20px → 14px */ width: 100%; margin-top: 30px; } /* 缩小作品集卡片: 整体更紧凑, 让用户能看到更多网格 */ .project-card { display: flex; flex-direction: column; /* 莫兰迪浅色卡纸: 不再强制深色 #04161d, 让下方 :nth-child 配置生效 */ background: #f5f5f7 !important; /* 取消数码圆角，改用刻刀切斜角 */ border: none !important; border-radius: 0 !important; /* 缩小: padding 从 22px → 14px → 8px 10px */ padding: 8px 10px; text-decoration: none; position: relative; overflow: hidden; z-index: 5; /* Backlog #30: 去掉 aspect-ratio: 5/4 锁死高度, 改用 flex 自然布局 (min-height 兜底), 让 .project-meta 永远不被裁 */ min-height: 180px; transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease; /* 浅色卡纸: 硬边切角投影 + 顶部高光 (与 interest-card 统一) */ box-shadow: 3px 4px 0px rgba(0, 3, 10, 0.18), 0 6px 14px rgba(0, 3, 10, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important; /* 八边形刻刀切角: 12px 斜切 */ clip-path: polygon( 12px 0%, calc(100% - 12px) 0%, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0% calc(100% - 12px), 0% 12px ); transform: translateZ(0); will-change: transform; /* 顶部描边主色 (CSS 变量) — 模拟卡纸顶面"受光高光" */ --card-accent: rgba(0, 3, 10, 0.12); } /* === 莫兰迪浅色背景: 按项目分类匹配 (与 tag / logo / 水印同色系) === */ /* AI 紫 (X1 The Seagrass & Diver) — 浅薰衣草紫 */ .project-card[data-watermark="X1"] { background: #f3eef9 !important; --theme-color: #6b4d8a; } /* Perception 橙 (P1 Natural Mirage) — 浅桃橘 */ .project-card[data-watermark="P1"] { background: #fbf2eb !important; --theme-color: #d97a1f; } /* Monument 红 (M1 Super Ring / M2 Aqueduct Mirror) — 浅玫瑰 */ .project-card[data-watermark="M1"] { background: #fbf2f0 !important; --theme-color: #b31515; } .project-card[data-watermark="M2"] { background: #fbf2f0 !important; --theme-color: #b31515; } /* Sustainability 绿 (S1 / S2 / S3) — 浅薄荷青 */ .project-card[data-watermark="S1"] { background: #eff7f3 !important; --theme-color: #1f7a6a; } .project-card[data-watermark="S2"] { background: #eff7f3 !important; --theme-color: #1f7a6a; } .project-card[data-watermark="S3"] { background: #eff7f3 !important; --theme-color: #1f7a6a; } /* Community 橄榄 (C1 TermiNODE / C2 Interlock) — 浅橄榄米 */ .project-card[data-watermark="C1"] { background: #f5f4e8 !important; --theme-color: #5e6a1c; } .project-card[data-watermark="C2"] { background: #f5f4e8 !important; --theme-color: #5e6a1c; } /* Other (O) — 浅冷灰 */ .project-card[data-watermark="O"] { background: #f0f1f2 !important; --theme-color: #6a7378; } /* === 编号水印: 使用每张卡自己的 data-watermark 属性 (X1 / P1 / M1 / M2 / S1 / S2 / S3 / C1 / C2 / O) === */ /* 现代排版: 字号接近占满卡片, 巨大但克制, logo 在前层清晰可见 */ .project-card::before { content: attr(data-watermark); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: 'Cinzel', 'Playfair Display', serif; /* 用 rem 相对单位, 让水印随卡片字号比例缩放, 不依赖视口 vw */ font-size: clamp(5rem, 8.5vw, 12rem); /* 8~18rem → 5~12rem, 与卡片同比例, 不会再撑爆 */ font-weight: 900; line-height: 0.85; /* 紧凑行高, 顶部对齐 */ color: var(--theme-color, #4a5d8f); opacity: 0.10; /* 略提亮 0.09 → 0.10, 与卡片同色系更深一点 */ pointer-events: none; user-select: none; z-index: 1; letter-spacing: -0.06em; /* 更紧凑, 让两字符视觉上像整体 */ text-transform: uppercase; } .project-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: transparent; border: 1px solid rgba(0, 3, 10, 0.12); clip-path: inherit; z-index: 2; } .project-card:hover { transform: translateY(-5px); /* 浅色 hover: 主投影加深, 高光更强 */ box-shadow: 5px 7px 0px rgba(0, 3, 10, 0.22), 0 12px 24px rgba(0, 3, 10, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important; --card-accent: var(--theme-color); } .project-card:hover::after { border-color: rgba(0, 3, 10, 0.22); } .project-card:has(.tag-monument):hover { --card-accent: rgba(179, 21, 21, 0.7) !important; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.8), 0 30px 60px rgba(0, 3, 5, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; } .project-card:has(.tag-perception):hover { --card-accent: rgba(255, 159, 67, 0.7) !important; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.8), 0 30px 60px rgba(0, 3, 5, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; } .project-card:has(.tag-sustainability):hover { --card-accent: rgba(16, 172, 132, 0.7) !important; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.8), 0 30px 60px rgba(0, 3, 5, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; } .project-card:has(.tag-community):hover { --card-accent: rgba(131, 149, 36, 0.7) !important; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.8), 0 30px 60px rgba(0, 3, 5, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; } .project-card.ai-exploration-card:hover { --card-accent: rgba(187, 128, 255, 0.7) !important; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.8), 0 30px 60px rgba(0, 3, 5, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; } .project-card { -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; user-select: none !important; cursor: pointer !important; -webkit-tap-highlight-color: transparent !important; position: relative !important; z-index: 99999 !important; pointer-events: auto !important; } /* 确保背景画布和粒子层允许鼠标事件穿透 */ canvas, #canvas, .background-container, .particles-wrapper, .diver-container { pointer-events: none !important; } .project-logo-wrapper { /* 智能响应式高度: 容纳大 logo (约卡片 70% 高) */ height: clamp(110px, 14vw, 180px); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid rgba(0, 3, 10, 0.08); margin-bottom: 6px; overflow: hidden; /* 防止 logo 放大时溢出 */ position: relative; z-index: 2; /* 高于 watermark z-index: 1 */ flex: 1 1 0; /* 占据剩余空间, 允许收缩让位给 meta */ min-height: 80px; /* 兜底: logo 至少 80px 可见 */ max-height: 180px; /* 兜底: 防 logo 撑爆卡片 */ } .project-logo { /* 智能缩放: logo 占卡片 70% 宽高, 桌面最大 160px (避免撑爆卡片) */ width: clamp(75px, 12vw, 160px); height: clamp(75px, 12vw, 160px); flex-shrink: 0; /* 防止被 flex 容器压缩 */ object-fit: contain; transition: transform 0.4s ease; position: relative; z-index: 2; max-width: 100%; max-height: 100%; } .project-card:hover .project-logo { transform: scale(1.05); } .project-meta { text-align: left; flex: 0 0 auto; /* 不拉伸, 仅由内容决定高度 */ display: flex; flex-direction: column; justify-content: flex-start; position: relative; z-index: 5; /* 提至最高, 不被 watermark (z=1) 遮挡 */ min-height: 56px; /* 兜底: tag (8.5) + title (13×2 = 26) + date (8) + gap 共 ~56px */ flex-shrink: 0; /* 关键: 卡片高度不够时 meta 不收缩, 日期永远可见 */ overflow: visible; /* 允许 title 换行后日期下移 */ } /* 簇内卡片: 让 project-meta 在紧凑空间里也清晰 */ .project-card.clustered-card .project-meta { min-height: 60px; flex-shrink: 0; padding-bottom: 2px; } /* 簇内卡片: 标题字号略小以适配紧凑空间 */ .project-card.clustered-card .project-tag { font-size: 9px; line-height: 1.3; white-space: normal; overflow: visible; } .project-card.clustered-card .project-title { font-size: 13px; line-height: 1.25; white-space: normal; overflow: visible; /* 簇内 title 最多 2 行, 避免挤掉日期 */ display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } .project-card.clustered-card .project-date { font-size: 8.5px; line-height: 1.3; /* 簇内日期: 永不换行, 保证完整可见 */ white-space: nowrap; overflow: visible; margin-top: 4px; } .project-tag { font-size: 8.5px; /* 缩小: 10px → 8.5px */ text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; position: relative; z-index: 3; /* 高于 watermark z-index: 1 */ } .tag-monument { color: #b31515 !important; } .tag-perception { color: #d97a1f !important; } /* 提亮以提升可读性 */ .tag-sustainability { color: #1f7a6a !important; } /* 提亮 */ .tag-community { color: #5e6a1c !important; } /* 提亮 */ .tag-other { color: #6a7378 !important; } .tag-ai { color: #6b4d8a !important; } /* AI 紫 */ .project-title { font-size: 13px; /* 缩小: 16px → 13px */ color: #333333; /* 浅色背景配深灰 */ margin: 3px 0 0 0; /* 缩小: 5px → 3px */ font-weight: 600; /* 提粗以提升可读性 (500 → 600) */ letter-spacing: 0.03em; font-family: 'Cinzel', 'Playfair Display', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif; position: relative; z-index: 3; /* 高于 watermark */ /* 关键: 允许 title 换行 (长标题如 "The Seagrass & Diver"), 但日期不被裁 — 因为 .project-meta 设了 flex-shrink: 0 */ overflow-wrap: anywhere; word-break: normal; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; /* 最多 2 行 */ line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .project-date { display: block; font-size: 8.5px; /* 略提: 8px → 8.5px, 提升可读性 */ color: #6a7378; /* 浅色背景配深灰 */ letter-spacing: 0.5px; margin-top: 3px; font-family: 'Cinzel', serif; /* 关键: 日期不换行, 永远单行完整显示 */ white-space: nowrap; overflow: visible; } /* ========================================================== 5. 网格 / 卡片的精确响应式断点 (orientation / 1440 / 1024-1439 / 600-1023 / 599 / 360) ------------------------------------------------------------ 【Backlog #30 · 卡片宽度自适应 + 日期完整可见】 · 所有断点去掉 aspect-ratio + max-height 锁死高度, 改为用 min-height 做视觉下限 + flex 自然增长 · 关键: .project-meta { flex-shrink: 0 } 保证日期永远不被裁 · 重新排布 (rearrange) 策略: 横屏 / ≥1440px → 4 列 (卡片较小, 内容紧凑) 1024-1439px → 2-3 列拆断点 (中等宽度友好) 600-1023px → 2 列 (大 logo + meta 充足) 竖屏 / ≤599px → 1-2 列 (meta 区不被裁) ≤360px → 1 列 (logo 缩小防止溢出) ========================================================== */ /* 横屏模式 (任何宽度 + landscape) — 4 列, 卡片略扁, 减少横向空白 */ @media (orientation: landscape) { .portfolio-grid, .content-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 10px !important; } .project-card { /* 横屏 4 列卡片窄, 用 min-height 控制下限, 不锁 aspect-ratio */ min-height: 165px !important; padding: 8px !important; } .project-logo-wrapper { /* 横屏 4 列卡片很扁, wrapper 也跟着压扁 */ height: clamp(95px, 12vw, 130px) !important; min-height: 90px !important; margin-bottom: 4px !important; } .project-logo { width: clamp(65px, 8vw, 90px) !important; height: clamp(65px, 8vw, 90px) !important; } .life-collage-card-grid { grid-template-columns: repeat(3, 1fr) !important; } .life-collage-card-grid #marathon-card, .life-collage-card-grid #photography-card { grid-column: span 2 !important; } .life-collage-card-grid #travel-card, .life-collage-card-grid #finance-card { grid-column: span 1 !important; } } /* 竖屏模式 (任何宽度 + portrait) — 2 列, 每张卡片更宽更舒展 */ @media (orientation: portrait) { .portfolio-grid, .content-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } .project-card { /* 竖屏卡片较高, min-height 给 logo + meta 充足空间 */ min-height: 240px !important; padding: 12px 10px !important; } .project-logo-wrapper { height: clamp(140px, 20vw, 200px) !important; /* 缩: 240→200, 给 meta 留 ~80px */ min-height: 130px !important; margin-bottom: 8px !important; } .project-logo { width: clamp(105px, 16vw, 160px) !important; /* 缩: 180→160 */ height: clamp(105px, 16vw, 160px) !important; } } /* 大屏: ≥1440px — 4 列 */ @media (min-width: 1440px) { .portfolio-grid, .content-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 14px !important; max-width: 1380px; margin-left: auto; margin-right: auto; } .project-card { /* 大屏 4 列: 卡较窄, 用 min-height 200px 保证 meta 完整 */ min-height: 200px !important; } /* logo 由 base clamp() 接管, 这里不再覆盖 */ } /* 平板横屏 / 笔记本: 1024-1279px — 2 列 (Backlog #16 中等宽度适配) 关键: 1024-1279 视口下 3 列会让卡片 meta 区域被裁, 2 列保留完整标题 + logo 大 */ @media (min-width: 1024px) and (max-width: 1279px) { .portfolio-grid, .content-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; } .project-card { min-height: 220px !important; padding: 12px 10px !important; } .project-logo-wrapper { height: clamp(120px, 14vw, 160px) !important; /* 略减, 给 meta 留 ~80px */ min-height: 110px !important; margin-bottom: 8px !important; } .project-logo { width: clamp(95px, 12vw, 135px) !important; height: clamp(95px, 12vw, 135px) !important; } } /* 笔记本 / 小桌面: 1280-1439px — 3 列 (Backlog #16 中等宽度适配) 关键: 3 列下用 min-height 控底, 不锁 aspect-ratio, 让 meta 永远有 ~70px */ @media (min-width: 1280px) and (max-width: 1439px) { .portfolio-grid, .content-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; } .project-card { min-height: 210px !important; } .project-logo-wrapper { height: clamp(110px, 13vw, 150px) !important; /* 调小, 给 meta 留 ~70px */ min-height: 100px !important; } .project-logo { width: clamp(85px, 10vw, 120px) !important; height: clamp(85px, 10vw, 120px) !important; } } /* (原 768-1023px 2 列规则已被下方 600-1023px 规则替代, 这里删除以避免冲突) */ /* 手机: <600px — 1 列 (横向, 不要让卡片太瘦长) */ @media (max-width: 599px) { .portfolio-grid, .content-grid { grid-template-columns: 1fr !important; gap: 12px !important; } .project-card { min-height: 200px !important; padding: 12px !important; } .project-logo-wrapper { height: clamp(110px, 28vw, 170px) !important; min-height: 100px !important; margin-bottom: 6px !important; } .project-logo { width: clamp(85px, 20vw, 130px) !important; height: clamp(85px, 20vw, 130px) !important; } } /* 平板 / 小桌面: 600-1023px — 2 列 (关键中等宽度区间) */ @media (min-width: 600px) and (max-width: 1023px) { .portfolio-grid, .content-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; } .project-card { min-height: 230px !important; padding: 12px 10px !important; } .project-logo-wrapper { height: clamp(130px, 20vw, 180px) !important; /* 缩: 230→180, 给 meta 留 ~80px */ min-height: 120px !important; margin-bottom: 8px !important; } .project-logo { width: clamp(100px, 16vw, 145px) !important; /* 缩: 165→145 */ height: clamp(100px, 16vw, 145px) !important; } } /* 极窄手机: <360px (iPhone SE 1 代) — logo 稍小防止溢出 */ @media (max-width: 360px) { .project-card { min-height: 180px !important; } .project-logo-wrapper { height: clamp(85px, 24vw, 100px) !important; min-height: 80px !important; } .project-logo { width: clamp(65px, 18vw, 80px) !important; height: clamp(65px, 18vw, 80px) !important; } }