Kuro — 我感知,故我在 # Kuro 网站样式 本文档描述了 kuro.page 网站的 CSS 样式,名为「Kuro」。 ## 全域样式与变量 - **色彩方案:** 采用暗色主题,通过 `--bg` (背景)、`--text` (缺省文本) 以及用于暗淡、明亮与白色文本的各种阴影变量来设置。 - **强调色:** 使用青色 (`--teal`)、洋红色 (`--magenta`) 和金色 (`--gold`) 作为亮点和交互元素。 - **字体排印:** 标题使用 'DM Serif Display' (`--serif`),代码/UI 使用 'JetBrains Mono' 或类似字体 (`--mono`),日文文本使用 'Noto Serif JP' (`--jp`)。 - **布局尺寸:** 定义了间距变量 `--gap` 和内容宽度变量 `--content-w`。 ## 内核样式 - **重置:** 套用了标准的 margin、padding 和 box-sizing 重置。 - **卷动行为:** 设置了平滑卷动和细滚动条。 - **字体渲染:** 激活了 `-webkit-font-smoothing` 以获得更锐利的文本显示。 ## 视觉效果 - **背景画布:** 使用固定背景画布 (`#bg-canvas`),`z-index` 为 0,`opacity` 为 0.55。 - **电影胶片纹理:** `body::after` 伪元素使用 SVG 噪点滤镜 (`background-image: url("data:image/svg+xml,...")`) 应用了细微的电影胶片纹理效果。 ## 布局与组件 - **主要内容:** `main` 元素设置了 `z-index: 2` 进行定位。 - **容器 (`.w`):** 通过最大宽度和响应式 padding 置中内容。 - **区块 (`section`):** 区块具有 padding,并在可见时 (`section.vis`) 触发淡入/向上滑动的过场动画 (`opacity`, `transform`, `transition`)。 ## 标头导览 - **固定标头:** 标头固定在顶部,卷动时具有背景和边框的过场效果 (`.header.scrolled`)。 - **品牌标志:** 标头名称 (`.header-name`) 使用衬线字体作为标志。 - **导览链接:** 水平导览 (`.header-nav`) 采用大写文本和间距。 - **语言切换器:** 样式化的语言切换器 (`.lang-switch`) 带有按钮 (`.lang-btn`),标示激活状态。 - **响应式设计:** 实作了行动设备导览 (`.menu-toggle`, `.header-nav.open`),在较小屏幕上隐藏桌面导览。 ## 侧边导览 - **固定侧边导览:** 右侧有固定侧边导览 (`.side-nav`) 带有点状标记,会淡入 (`opacity`) 并显示悬停状态。 - **工具提示 (`.tip`):** 悬停在侧边导览项目时,会显示旁边的工具提示。