UnoCSS 示例页面
这是一个 UnoCSS 运行时示例页面，用于验证在 Pelican 博客中的接入效果。
UnoCSS Runtime
原子化样式增强示例
示例覆盖卡片、统计、标签、时间线和按钮交互，展示 UnoCSS 在 Pelican 页面中的轻量接入方式。
CLS
0.01
布局稳定性良好
LCP
1.4s
首屏加载较快
INP
120ms
交互响应顺畅
渐变徽章
响应式布局
实用可迁移
无侵入接入
布局示例
2 列网格在移动端自动变为单列，演示响应式能力。
状态示例
卡片和按钮使用 hover 过渡增强交互反馈。
时间线示例
- 引入 UnoCSS Runtime 并验证可用性
- 增加卡片/标签/统计样式示例
- 保留现有主题结构，逐步试点迁移
主题切换交互示例
当前演示区域为浅色主题。
Card A
跟随主题切换背景、文字和边框。
Card B
使用 `dark:*` 状态类实现局部主题能力。