CSS

自定义样式表#

在项目的 .moss/theme/ 目录下创建 style.css（moss 在你打开文件夹时会自动创建 .moss/theme/）。moss 在默认主题之后加载它，你的规则会覆盖默认值。

my-site/
├── .moss/
│   └── theme/
│       └── style.css   ← 自定义 CSS 放在这里
├── index.md
└── ...

:root {
  --moss-color-accent: #2d5a2d;
  --moss-font-body: "Inter", -apple-system, sans-serif;
  --moss-content-width: 72ch;
}

不需要构建步骤，不需要配置。文件自动加载。

变量#

字体#

颜色#

布局#

间距#

深色模式#

深色模式自动跟随系统设置。用以下选择器自定义深色模式配色：

[data-theme="dark"] {
  --moss-color-bg: #0f0f0f;
  --moss-color-accent: #6abf6a;
}

组件类名#

自动生成的组件使用稳定的 .moss-* 类名。在 style.css 中用这些类名来定制样式。

集合网格#

子页面摘要#

文章列表#

Grid 短代码#

集合封面#

Hero 短代码#

Buttons 短代码#

Gallery 短代码#

标注#

子文件夹列表（自动生成栏目列表）#

系列导航#

其他#

短代码类名#

用 {.class} 语法给短代码块添加自定义类：

:::grid 3 {.profiles .featured}
...
:::

然后在 CSS 中定制：

.profiles .moss-grid-card {
  border-radius: 50%;
}

布局写在类里，而不是内联#

需要响应式列宽时，在自定义类中定义 grid-template-columns，短代码中省略比例——用 :::grid 2 {.two-col-split} 而非 :::grid 2 2:1 {.two-col-split}。写了比例就会在容器上输出内联 style=""，优先级高于 @media 规则，每条属性都得加 !important 才能覆盖。

.two-col-split {
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
}
@media (max-width: 768px) {
  .two-col-split { grid-template-columns: 1fr; }
}

完整模式见 shortcodes#用 CSS 类名自定义布局。