Ready to code?

Here is Claude’s plan: ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ 网站视觉优化实施计划

背景 (Context)

用户对其 Jekyll Minimal Mistakes 学术个人网站存在视觉协调性问题，主要体现在三个方面：

1. 顶栏 (Masthead) - 边框重复、高度不稳定、悬停效果生硬
2. 侧栏与头像 (Sidebar & Avatar) - 颜色过重(#2e7d32)、间距不当
3. 整体配色 - 链接样式过时、无下划线悬停效果、暗色模式不完善

关键文件

• _sass/layout/_masthead.scss - 顶栏样式
• _sass/main.scss - 主样式表（含侧栏颜色、链接样式）

---

实施步骤

1. 优化顶栏 (Masthead)

文件: _sass/layout/_masthead.scss

修改内容:

• 移除重复边框：删除 border-bottom: 1px solid #000000 和 &::after 伪元素，改为使用更柔和的 box-shadow: 0 1px 3px rgba(0,0,0,0.08)
• 固定高度：将 height: fit-content 改为 height: 60px，并确保导航垂直居中
• 优化内边距：调整 .masthead__inner-wrap 的 padding
• 改进悬停效果：将 #666666 改为更平滑的过渡效果，使用 transition: color 0.2s ease

1. 优化侧栏与头像

文件: _sass/main.scss

修改内容:

• 侧栏颜色：将 –global-sidebar-bg-color: #2e7d32 改为更温和的 –global-sidebar-bg-color: #f5f5f5 (浅灰色) 或考虑使用半透明效果
• 头像样式：添加圆形边框 border-radius: 50%、灰色边框 border: 2px solid #e0e0e0、最大宽度限制 max-width: 150px
• 间距优化：调整头像、姓名、简介之间的 margin-top
• 社交图标：优化 Font Awesome 图标大小和文字对齐

1. 优化整体配色方案

文件: _sass/main.scss

修改内容:

• 链接样式：移除默认下划线，悬停时显示下划线或颜色变化，使用学术蓝 #0056b3
• 暗色模式完善：确保 html[data-theme=”dark”] 下侧栏和顶栏背景不会死黑

---

验证方法

1. 本地预览：jekyll serve 或 bundle exec jekyll serve
2. 浏览器访问 http://localhost:4000 检查:
   • 顶栏是否为固定60px高度，底部线条是否柔和
   • 侧栏背景色是否为浅灰色
   • 头像是否为圆形且有边框
   • 链接是否有平滑的悬停效果
   • 切换暗色模式后视觉效果是否协调
3. 提交更改后，GitHub Pages 自动构建，检查线上效果