Skip to content

Enhance UI styles and interactions for improved readability and consistency#27

Merged
nowscott merged 9 commits intomainfrom
developer
Mar 17, 2026
Merged

Enhance UI styles and interactions for improved readability and consistency#27
nowscott merged 9 commits intomainfrom
developer

Conversation

@nowscott
Copy link
Copy Markdown
Owner

No description provided.

将 Tags、HeaderBar 和 WebList 组件中使用的亮橙色 (`text-orange-500`、`text-orange-600`) 替换为更柔和的深褐色 (`text-[#773d31]`),以提高在浅色背景下的文本可读性和视觉舒适度。同时更新了相关的悬停状态和占位符颜色以保持一致性。
- 调整菜单容器背景、边框、阴影和圆角以提升视觉层次
- 为菜单项添加平滑过渡效果和悬停状态边框
- 统一亮色与暗色模式下的颜色方案,提高视觉一致性
移除不再使用的芫荽字体(Iansui)以简化代码库。具体包括:
- 从字体选择菜单中删除该选项
- 删除对应的外部样式表引用
- 清理全局CSS中的相关CSS变量和样式规则
使用 requestIdleCallback 或 setTimeout 异步预加载所有可用字体
避免字体切换时的布局偏移和渲染延迟
统一全站视觉主题,将主色调从橙色调整为蓝色系(sky/cyan/indigo)。
修改范围包括:HeaderBar 搜索图标、Footer 统计卡片与链接、About 页面标题与核心卡片。
提升视觉一致性,营造更冷静专业的整体氛围。
- 调整 Tags、WebList、Footer 组件的上下间距
- 将 HeaderBar 底部边框改为独立分隔线,提升视觉层次
- 统一各组件分隔线样式,使用渐变色背景与内阴影
- 在 HeaderBar 左侧添加首页/关于页面切换入口
- 微调搜索框宽度与文字字距
移除底部边框分隔线,简化视觉层级。将背景色调整为更柔和的半透明黑色,提升整体视觉一致性。
- 为按钮添加悬停缩放和点击缩放效果,提升交互反馈
- 统一使用 transition-all 和更流畅的持续时间
- 调整亮暗模式下的图标颜色与悬停颜色,提高视觉一致性
- 为首页/关于按钮添加图标悬停动画
- 将过渡属性从指定属性列表改为 `transition-all`,简化维护
- 调整过渡时长与缓动函数,使动画更平滑自然
- 悬停时按钮放大并提升层级,增强视觉焦点
- 更新阴影效果,使悬停状态更明显
@vercel
Copy link
Copy Markdown
Contributor

vercel bot commented Mar 17, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
indwebindex Ready Ready Preview, Comment Mar 17, 2026 0:30am

@nowscott nowscott merged commit 03b5eed into main Mar 17, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant