theme

.sbl/theme.css is a plain CSS file injected as a global <style> in <head> for every .mdx page in the folder (and below).

file location

mysite/
  .sbl/
    layout.tsx
    theme.css    ← applies to all pages in mysite/ and below
  index.mdx
  blog/
    .sbl/
      theme.css  ← overrides parent theme for blog/
    post1.mdx

closest .sbl/theme.css wins. folder-scoped, same cascade as layout.tsx.

scope

theme.css is a global stylesheet — it applies to the entire page, not just .prose. you can style header, nav, footer, buttons, layout, anything your .sbl/layout.tsx renders.

prose wrapper

every .mdx page's content is wrapped in <article class="prose">. use .prose selectors to style markdown output (headings, paragraphs, lists, code blocks).

specificity trap

if you have both prose defaults and landing-page-specific classes, be careful with specificity.

/* bad: .prose h1 (0,1,1) wins over .page-title (0,1,0) */
.prose h1 { margin: 1.5rem 0 1rem; }
.page-title { margin-bottom: 0.25rem; }

/* good: :where() makes prose selectors specificity 0 */
:where(.prose) h1 { margin: 1.5rem 0 1rem; }
.page-title { margin-bottom: 0.25rem; }  /* wins */

cascade

when you push .sbl/theme.css, sublimated cascades the new hash to every dependent .mdx page. no page recompilation.

local css imports

inside an .mdx file you can import './style.css' and sublimated concatenates it into the page CSS. when you push a sibling .css file, dependent pages pick up the change automatically.