e97703dc6aa26a4ba0d7ca4e1ca4e8018039eae1 - docs

create theme.md via macOS
1# theme
2
3`.sbl/theme.css` is a plain CSS file injected as a global `<style>` in `<head>` for every `.mdx` page in the folder (and below).
4
5## file location
6
7```
8mysite/
9  .sbl/
10    layout.tsx
11    theme.css    ← applies to all pages in mysite/ and below
12  index.mdx
13  blog/
14    .sbl/
15      theme.css  ← overrides parent theme for blog/
16    post1.mdx
17```
18
19closest `.sbl/theme.css` wins. folder-scoped, same cascade as [layout.tsx](layout.md).
20
21## scope
22
23theme.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.
24
25## prose wrapper
26
27every `.mdx` page's content is wrapped in `<article class="prose">`. use `.prose` selectors to style markdown output (headings, paragraphs, lists, code blocks).
28
29## specificity trap
30
31if you have both prose defaults and landing-page-specific classes, be careful with specificity.
32
33```css
34/* bad: .prose h1 (0,1,1) wins over .page-title (0,1,0) */
35.prose h1 { margin: 1.5rem 0 1rem; }
36.page-title { margin-bottom: 0.25rem; }
37```
38
39```css
40/* good: :where() makes prose selectors specificity 0 */
41:where(.prose) h1 { margin: 1.5rem 0 1rem; }
42.page-title { margin-bottom: 0.25rem; }  /* wins */
43```
44
45## cascade
46
47when you push `.sbl/theme.css`, sublimated cascades the new hash to every dependent `.mdx` page. no page recompilation.
48
49## local css imports
50
51inside 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.