A Quartz site consists of components: the explorer, the search, the table of contents, the breadcrumbs, the footer — each built by a plugin, each with a look of its own. This chapter goes through them in turn, sorted by their place on the page; the places are named in 1.4 – How a page is built.
How every page is built
Every page deals with one component and has two paragraphs:
Out of the box — what Quartz does without any help. In this template — what is different here, and why.
The comparison stands right next to the element you are looking at. Whoever compares their own site with this one finds the difference named that way. And whoever wants to change it finds, at the bottom of the same page, the table “Which variables apply here”: the variables the stylesheet of this component reads, with their value and a note on what else moves with them. These tables are generated, not kept by hand; they cannot disagree with the stylesheets.
A stylesheet is the file in which the look is described — in the language CSS, here in its extension SCSS. This template has twelve of them — one for the layout, one for the content, one for the callouts, one per kind of component and one per plugin of its own — and every page here names the section its component stands in. They can be changed in QuartzControl under Styles → Custom CSS; when that is necessary and when a variable is enough stands in 6.1 – Changing something.
The sections
| Section | Components |
|---|---|
| 5.1 – Navigation | navigation, explorer, search, colour scheme, reader mode, header, footer, language switcher |
| 5.2 – Above the content | breadcrumbs, title and date, properties, tags |
| 5.3 – In the content | body text, callouts, code, tables and media |
| 5.4 – Beside the content | table of contents, backlinks, graph, recently changed |
| 5.5 – Layout boxes | one plugin, used seven times |
| 5.6 – Generated pages | folder and tag pages, search results, link preview, error page |
Two components stand elsewhere, because their stylesheet belongs to a section in chapter 2: the diagrams under 2.9 – Diagrams and the formulas under 2.8 – Mathematics. And what lies under everything — colours, typefaces, variables, page grids, accessibility — is chapter 6 – Adapting.
The three decisions everything else rests on
- The width decides the grid — the frame, in one place, not the paragraph on top of it.
- Colours are measured. 93 pairs, all above the WCAG threshold, in both modes.
- Colour and measure do not stand in the stylesheets but in 66 variables that stay editable in QuartzControl. What does stand there literally is named and justified.