CSS

Custom stylesheet#

Create style.css inside .moss/theme/ in your project folder (moss creates .moss/theme/ automatically when you open the folder). moss loads it after the default theme, so your rules override the defaults.

my-site/
├── .moss/
│   └── theme/
│       └── style.css   ← your custom CSS goes here
├── index.md
└── ...

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

No build step, no config entry. The file is loaded automatically.

Variables#

Typography#

Colors#

Layout#

Spacing#

Dark mode#

Dark mode follows the system preference automatically. Target the dark mode selector to customize:

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

Component classes#

Auto-generated components use stable .moss-* class names. Target these in your style.css.

Collection grid#

Child summary#

Article list#

Grid shortcode#

Collection cover#

Hero shortcode#

Buttons shortcode#

Gallery shortcode#

Callouts#

Folder items (auto-generated section lists)#

Series navigation#

Miscellaneous#

Shortcode classes#

Add custom classes to shortcode blocks with {.class} syntax:

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

Then target them in CSS:

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

Layout in the class, not inline#

For responsive column ratios, define grid-template-columns on your class and omit the ratio on the shortcode — :::grid 2 {.two-col-split} instead of :::grid 2 2:1 {.two-col-split}. Passing a ratio emits an inline style="" on the container, which beats @media rules and forces !important overrides.

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

See shortcodes#Custom layouts with CSS classes for the full pattern.