阅读这件事，界面应该退后

Fluid 的观感可以拆成三层：背景、卡片、正文。三层的分工清楚，页面就安静。

背景负责氛围

首页的全屏 banner、蒙在图上的一层半透明黑、站名大字——它不需要传达信息，只需要让人知道「这里是一艘船的甲板」。

滚动下去，banner 退场，白卡片浮上来。这个「浮」是靠一道很重的双层阴影做到的：

css
#board {
  margin-top: -2rem;
  border-radius: 0.5rem;
  box-shadow:
    0 12px 15px 0 rgba(0, 0, 0, 0.24),
    0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

阴影越重、圆角越小，越像一张被压实的纸，而不是一个气泡。

卡片负责秩序

卡片流左图右文，摘要固定三行——固定三行这个细节很关键：它让每张卡片的高度可预测，列表扫起来是一条直线，而不是参差的锯齿。

正文负责阅读

  • 正文两侧各留 10%，宽度跟着卡片走，1920 屏落在 886px 上下
  • 目录放在右侧 2/12 栏，只在宽屏出现，窄屏直接不渲染
  • 小标题下面加一条细线，给长文一个「段落结束」的暗示

留白

最后一条，也是最容易做错的一条：留白不是没内容，是内容的一部分。

卡片内边距 3rem、段落间距 1.25rem、标题上方 2rem——这些数字没有一个是「差不多」，都是调出来的。