CSS Architecture

CSS Architecture

The CSS system comprises 18 files totaling 5,163 lines. site.css is the orchestrator — it imports all component stylesheets in a specific order, which PostCSS resolves into a single compiled output.

site.css Import Chain

The import order in src/css/site.css (18 lines) matters — later imports can override earlier ones:

 1. typeface-roboto.css        Roboto font-face declarations
 2. typeface-roboto-mono.css   Roboto Mono font-face declarations
 3. vars.css                   CSS custom properties (root variables)
 4. base.css                   Base element styles (html, body, a, code, etc.)
 5. body.css                   Body layout grid
 6. nav.css                    Sidebar navigation
 7. main.css                   Main content area layout
 8. toolbar.css                Page toolbar (version selector, edit link)
 9. breadcrumbs.css            Breadcrumb trail
10. page-versions.css          Version selector dropdown
11. toc.css                    Right-sidebar table of contents
12. doc.css                    Document content styling (largest file)
13. pagination.css             Previous/next page links
14. header.css                 Top navbar
15. footer.css                 Page footer
16. highlight.css              Code syntax highlighting colors
17. print.css                  Print stylesheet (@media print)
18. domus-theme.css            Theme overrides (MUST be last to win specificity)

File Inventory

File Lines Purpose

domus-theme.css

2,383

7 complete theme definitions + premium styling (gold sidebars, exec tables, code blocks, admonitions)

doc.css

1,087

Document content: headings, paragraphs, lists, tables, admonitions, code blocks, images, sidebar blocks

nav.css

365

Sidebar navigation: tree items, expand/collapse, active states, scrollbar, mobile drawer

header.css

344

Top navbar: brand, menu, dropdowns, burger, search field, responsive breakpoints

base.css

154

Reset + base element styles: box-sizing, font stack, links, code, scrollbar

vars.css

146

CSS custom properties root definitions: colors, fonts, spacing, widths

toc.css

98

Right sidebar TOC: sticky positioning, link styles, active tracking

print.css

88

Print rules: hide nav/header/footer, adjust margins, page breaks

highlight.css

86

Syntax highlighting token colors (Catppuccin-inspired palette)

typeface-roboto.css

71

Roboto font-face declarations (400, 400i, 500, 700)

toolbar.css

68

Toolbar: version dropdown, edit link, icon buttons

pagination.css

63

Prev/next navigation: flexbox layout, arrow icons

page-versions.css

56

Version dropdown: option list, active indicator

typeface-roboto-mono.css

39

Roboto Mono font-face (400, 700)

main.css

39

Main content grid: sidebar + article + TOC layout

breadcrumbs.css

38

Breadcrumb trail: separator icons, truncation

site.css

18

Import orchestrator (no styles, only @import statements)

footer.css

15

Footer: layout, copyright text, link styles

body.css

5

Body grid definition (3-column layout)

Total

5,163

vars.css Root Variables

src/css/vars.css (146 lines) defines the base CSS custom properties that themes override:

Group Variables

Colors

--color-brand-*, --color-text, --color-link, --color-border

Fonts

--body-font-family (Roboto), --monospace-font-family (Roboto Mono), --body-font-size

Base

--body-background, --panel-background, --body-font-color

Navbar

--navbar-height, --navbar-background, --navbar-font-color

Nav

--nav-width, --nav-background, --nav-heading-font-color

Toolbar

--toolbar-background, --toolbar-font-color

Doc

--doc-font-size, --doc-line-height, --doc-max-width

TOC

--toc-width, --toc-font-color

Footer

--footer-background, --footer-font-color

These are the "upstream defaults" — domus-theme.css overrides them per theme via [data-theme] selectors.

PostCSS Processing

At build time, PostCSS transforms the source CSS:

  1. Import resolution — postcss-import inlines all 18 @import files into a single stylesheet

  2. Custom properties — postcss-custom-properties compiles var() references for browsers that need it

  3. Calc reduction — postcss-calc pre-computes static calc() expressions

  4. URL rebasing — postcss-url adjusts relative asset paths for the bundle

  5. Vendor prefixes — autoprefixer adds -webkit-, -moz- etc. for last 2 browser versions

  6. Minification — cssnano compresses output (with rule merging disabled)

Print Stylesheet

src/css/print.css (88 lines) provides @media print rules:

  • Hides: navbar, sidebar nav, TOC, toolbar, footer, pagination, version selector

  • Adjusts: margins, font sizes, page break rules

  • .hide-for-print utility class for page-specific print hiding