How Apex is put together

Template architecture

Layouts use StaticWeaver's inheritance and partials, both of which SSG has supported for some time:

• base.html holds the document shell and declares a main block.
• Every page layout opens with {{#extends "base"}} and fills that block.
• header.html and footer.html are partials, included with {{> header}}.

Page copy lives in content/*.md and is injected with {{!content}} — the unescaped form. The escaped {{content}} renders Markdown output as visible source text, which is why earlier releases shipped empty bodies.

Design tokens

Colour, type scale and spacing are custom properties in a single @layer tokens block. Layers keep specificity flat, so a site can override any component from its own stylesheet without !important.

Dark mode is defined three times on purpose: once on bare :root for the light default, once inside prefers-color-scheme: dark guarded by :root:not([data-theme="light"]), and once on :root[data-theme="dark"]. That covers all three viewer states — explicit light, explicit dark, and the unstamped "follow the system" default.

Accessibility

Browser support

Apex targets browsers supporting cascade layers, container queries and :focus-visible — Chrome 111+, Firefox 128+, Safari 16.4+. Older browsers get an unstyled but fully readable document, since layout uses flow and grid rather than absolute positioning.