布局体系

幻梦主题采用统一的页面布局系统，确保所有页面具有一致的视觉节奏。

容器系统

.container {
  width: 100%;
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

文章详情页 — 品字形布局

文章详情页采用独特的「品字形」布局：

┌──── 文章头部 ────────────────┐
│  封面图 + 标题 + 元信息       │
└──────────────────────────────┘
┌── 正文内容 ──┬── 侧边栏 ──┐
│              │  目录       │
│              │  文章信息   │
│              │  标签       │
└──────────────┴────────────┘
┌── 底部导航 ────────────────┐
│  上一篇 · 推荐 · 下一篇    │
└────────────────────────────┘

侧边栏粘性定位

右侧边栏采用 position: sticky 实现跟随滚动：

.article-right {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-4));
  align-self: flex-start;
}

列表页布局

文章列表页采用左右分栏布局：左侧文章列表 + 右侧侧边栏。侧边栏包含日历、最新文章和标签云。