Skip to content
@staticbolt/docs

Styles

The theme ships its CSS under @staticbolt/docs/styles/. The project has one entry stylesheet that imports it and adds its own.

Entry

sources/styles/docs.css
@import url("@staticbolt/docs/styles/docs.css");
@import url("@staticbolt/docs/styles/katex.css");
@import url("@styles/theme.css");
@import url("@parts/social-icons/social-icons.style.css");
FileContent
@staticbolt/docs/styles/docs.cssEverything: global.css, document.css, the Pagefind UI, and every part’s stylesheet.
@staticbolt/docs/styles/global.cssVariables, resets, html and body. For pages that don’t use the document layout.
@staticbolt/docs/styles/document.cssThe docs layout grid and the markdown typography, tables, callouts, diagrams.
@staticbolt/docs/styles/katex.cssKaTeX, only with math.

The layout links the entry with bundle, so the whole tree becomes one file.

Colors

Two hues drive the palette, override them in theme.css:

sources/styles/theme.css
:root {
  --sb-hue-accent: 290;
  --sb-hue-base: 290;
}
VariableRole
--sb-hue-accentLinks, active states, highlights.
--sb-hue-baseTint of the grays and the background.

Every color is light-dark(), so the scheme switch needs no extra rules. The grays and the accent derive from the hues through oklch(), any of them can be set directly:

VariableRole
--sb-color-gray-0 to --sb-color-gray-7Text (0) to surfaces (7).
--sb-color-blackPage background.
--sb-color-accent, -high, -lowAccent and its two contrast steps.
--sb-color-text, --sb-heading-colorBody and heading text.
--sb-code-background, --sb-code-inline-backgroundCode blocks and inline code.
--sb-note-*, --sb-tip-*, --sb-important-*, --sb-warning-*, --sb-caution-*, --sb-success-*Callout background, border, text.

Type and spacing

VariableRole
--sb-md-font, --sb-font-monoFont stacks.
--sb-text-2xs to --sb-text-6xlSize scale.
--sb-text-h1 to --sb-text-h6Heading sizes, mapped onto the scale.
--sb-line-height, --sb-line-height-headingsLine heights.
--sb-content-gap-yVertical rhythm between blocks.
--sb-header-heightHeader height, the sidebar and table of contents offset by it.

Components

sv-accordion reads --sv-gray-2, --sv-gray-5, --sv-gray-6, --sv-bdr-sz-sm, --sv-bdr-rad-md, and --sv-dir, all mapped from the theme in global.css. A site using more staticview components maps the rest in its theme.css:

:root {
  --sv-gray-0: var(--sb-color-gray-0);
  --sv-accent: var(--sb-color-accent);
}

Own styles

Project parts bring their own .style.css, import them after the theme in docs.css. A second entry for a page with a different layout, a landing page for instance, imports global.css and only the parts it uses:

sources/styles/landing.css
@import url("@staticbolt/docs/styles/global.css");
@import url("@staticbolt/docs/parts/color-scheme-switch/color-scheme-switch.style.css");
@import url("@styles/theme.css");