THE DETAILS MATTER / 设计的细节
一致，来自每一个细节。
Astra × Liquid Glass
这不是一份装饰性的规范。这里展示的，就是整个博客正在使用的变量、材质与组件。
一个入口，控制整个界面。
基础组件来自 Astra，玻璃材质采用 astro-liquid-glass 的公开 CSS 子路径；颜色、间距、圆角、字体和响应式扩展统一在styles/global.css中管理。
01 / 语义色彩
品牌与交互
--brand-primary环境画布
--blog-canvas玻璃表面
--blog-glass-bg阅读表面
--blog-reading-bg主要文字
--text-primary辅助文字
--blog-text-muted玻璃边缘
--blog-glass-border状态提示
--blog-status02 / 字体与节奏
DISPLAY / 展示
把想法，做成现实。
HEADING / 标题
保持好奇，持续构建。
BODY / 正文
好的软件，始于一个值得解决的问题。Good ideas deserve thoughtful software.
CODE / 代码
const curiosity = ideas.map(build); // 012345678903 / 材质与尺度
Liquid Glass / 玻璃表面
半透明底色、柔和高光与背景模糊。导航、首页卡片和内容预览使用同一组材质变量。
--blog-glass-bg
--blog-blur
--blog-radius-cardReading / 阅读表面
更实的表面为长文提供稳定对比度。正文区域约 720px，不让玻璃效果干扰阅读。
--blog-reading-bg
--blog-reading-max
--blog-leading-reading来自 Astra 的间距与圆角
space-xsspace-smspace-mdspace-lgspace-xlspace-2xl控件 / 8基础 / 16卡片 / 32胶囊 / ∞
04 / 可操作的组件
按钮与状态
输入与反馈
输入状态仅保存在此演示中。
技术标签
重点内容
已完成
敏
BUILT WITH CARE / 资源与边界
开放分享，也尊重内容的边界。
本站由 Next.js 与 Payload 驱动。完整 Astro 源码资料仅向授权后台成员提供， 不作为公共静态文件分发，也不等同于当前站点的源码导出。