2026-05-24 收拾桌子 — 布局重构与框架页协作

本次会话做了什么

• 页面布局从 Quartz 默认改为：上通栏（黑底金字）+ 下三栏（左sticky/中可滚/右sticky）+ 底 footer
• 生成独立框架页 HTML 供用户直接修改样式，建立”用户改框架页→伯喈同步源文件”协作流
• 经历 30+ 次迭代调整顶栏高度/字号/搜索/footer 等细节
• 发现并修复 4 层 CSS 阻隔（body 8px → sidebar padding → grid gap → footer.scss 覆盖）

决定

• 框架页协作模式确立：框架页-完整版.html 作为中间媒介，用户直接改 CSS 预览，满意后伯喈同步到源文件
• 搜索保持 Quartz 默认模态（按钮弹出），不改为内联输入框
• 删除 ArticleTitle + PageTitle 组件，ContentMeta 移至左栏顶部
• 黑暗模式完全移除，仅保留 Specimen 暖纸底

新经验

• ✅ 成功模式：base.scss → custom.scss 的覆盖必须检查三点：①具体度 ②!important ③加载顺序（组件 scss 在 custom.scss 之后）
• ✅ 成功模式：CSS 子选择器 > 陷阱——DOM 中间多了 <header> 导致 .page-header > .search 永不命中
• ✅ 成功模式：Quartz Grid 覆盖需同时设 grid-template-areas: none，否则 base.scss 的 area 分配残留
• ⚠️ 教训：浏览器默认 body{margin:8px} 是最底层阻隔，排查时应从外到内逐层检查
• ⚠️ 教训：Quartz 组件 scss（如 footer.scss）在 custom.scss 之后加载，同选择器会覆盖，必须用 !important

自检

• custom.scss 清理重复 .page-header 块
• topbar.scss flex:1 替代 width:100%
• 严律建议的 3 条整洁项待后续清理 → 来源：严律审查报告（2026-05-24，本会话中期），指出 custom.scss 中 .page-header 有 3 处重复定义、grid-template-areas 未覆盖、base.scss sidebar padding

待办

• 框架页-完整版.html 与源文件之间如有差异需手动同步
• 移动端响应式未充分测试