指尖魔法屋采用清新淡雅的设计风格，追求简洁、优雅、现代的视觉体验。整体设计理念可以总结为："Less is More" - 以最少的视觉元素实现最佳的用户体验。
- 主色：
#007acc- 清新的蓝色，代表科技与专业 - 辅助色：
#0056b3- 深蓝色，用于强调和悬停状态 - 文字色：
- 主要文字：
#333- 深灰色，确保可读性 - 次要文字：
#666- 中灰色，用于描述性文字 - 链接色：
#007acc- 蓝色，保持一致性
- 主要文字：
- 主背景：
#f8f9fa- 极浅的灰色，营造清新感 - 卡片背景：
rgba(255, 255, 255, 0.8)- 半透明白色，毛玻璃效果 - 悬停背景：
rgba(0, 122, 204, 0.08)- 极淡的蓝色
设计原则：简洁透明，信息层次清晰
/* 导航栏样式特点 */
- 背景：半透明白色 + 毛玻璃效果
- 边框：极细的浅蓝色边框
- 阴影：柔和的阴影营造层次感
- 交互：下划线动画 + 颜色渐变视觉特性：
- 固定定位，始终可见
- 毛玻璃模糊效果增强现代感
- 菜单项悬停时显示渐变色下划线
- 品牌文字采用蓝色突出显示
设计原则：轻量简洁，交互友好
/* 按钮样式特点 */
- 尺寸：小巧精致 (8px 16px padding)
- 形状：胶囊圆角 (20px border-radius)
- 背景：半透明白色
- 边框：浅蓝色细边框
- 交互：轻微上移 + 颜色变化按钮类型：
-
标签按钮 (用于分类/标签页面)
- 极简设计，无多余装饰
- 悬停时背景变蓝，文字变白
- 数量标签采用极淡背景
-
操作按钮 (如登录按钮)
- 胶囊形状，蓝色主题
- 悬停时上移并增加阴影
设计原则：图标保持简洁、语义化，与整体视觉风格一致。主题中多数场景使用 Emoji 风格图标以保证跨平台一致性与快速渲染。
- 图标风格：优先使用单字符 Emoji（例如：📁、📅、🔽、🔼），嵌入在
span.icon中；必要时可使用内联 SVG 做为掩模（mask-image），保持与现有github-markdown.css的实现方式一致。 - 颜色与大小：在色块或主色按钮中，图标为白色（或与按钮文本同色）；在浅色背景中，图标使用
--primary颜色。图标字号随按钮字号微调（建议与文本同行对齐，line-height:1）。 - 交互：图标应随按钮状态变化（悬停/激活）切换颜色或位置（小幅上移），并尽量保持单一字符或简洁 SVG，以免影响布局。
示例（折叠代码按钮）：使用 Emoji 图标 🔽 表示可展开，展开后切换为 🔼 表示收起，图标放在按钮左侧并使用胶囊样式，悬停时颜色加深并微微上移。
设计原则：低调实用，不喧宾夺主
/* 分页器样式特点 */
- 布局：无容器背景，按钮直接排列
- 尺寸：紧凑小巧 (32px x 32px)
- 形状：圆角胶囊
- 交互：轻微上移 + 背景色变化视觉特性：
- 去掉明显的白色背景块
- 激活状态采用蓝色填充
- 悬停时轻微上移效果
- 无边框设计，极简风格
- 过渡时间：
0.2s - 0.3s，快速而平滑 - 缓动函数：
ease或cubic-bezier(0.4, 0, 0.2, 1) - 动画类型：
- 悬停上移：
translateY(-1px) - 缩放效果：
scale(1.02)(谨慎使用) - 颜色渐变：平滑过渡
- 悬停上移：
- 悬停反馈：颜色变化 + 微动画
- 点击反馈：即时视觉反馈
- 状态指示：清晰的激活/禁用状态
- 桌面端：
> 768px - 移动端：
≤ 768px
- 导航栏：移动端减少间距，菜单项紧凑排列
- 按钮：移动端适当缩小尺寸和字体
- 分页器：移动端进一步缩小按钮尺寸
- 间距：移动端减少容器边距和元素间距
- 主要字体：系统默认字体栈
- 字体大小：
- 大标题：
2.5rem - 中标题：
1.5rem - 正文字：
1rem - 小文字：
0.8rem
- 大标题：
- 容器边距：
20px(桌面),15px(移动) - 元素间距：
16px - 24px - 行高：
1.6
- 简洁至上 - 去除一切不必要的视觉元素
- 功能优先 - 设计服务于用户体验
- 一致性 - 统一的色彩、字体、交互模式
- 现代感 - 采用当前流行的设计趋势
- 可访问性 - 确保良好的可读性和可用性
- 营造清新、舒适的阅读体验
- 突出内容，弱化装饰
- 提供直观、流畅的交互
- 适配各种设备和屏幕尺寸
/* 使用语义化类名 */
.component-name {
/* 属性按功能分组 */
/* 布局属性 */
display: flex;
align-items: center;
/* 视觉属性 */
background: rgba(255, 255, 255, 0.8);
border-radius: 20px;
/* 交互属性 */
transition: all 0.3s ease;
}
.component-name:hover {
/* 悬停状态 */
transform: translateY(-1px);
}- 模块化 - 每个组件独立封装样式
- 可复用 - 设计通用样式类
- 可维护 - 清晰的注释和结构
- 性能优化 - 避免不必要的样式层级
- v1.0.0 (2025-12-17)
- 确立清新淡雅设计理念
- 完成导航栏、按钮、分页器组件设计
- 建立完整的响应式设计体系
设计理念：以简洁优雅的设计语言，打造舒适愉悦的用户体验。让技术博客不仅功能强大，更具备独特的艺术气质。
"Design is not just what it looks like and feels like. Design is how it works." - Steve Jobs