6.1 – Changing something

This template is built to be changed. There are three levels for it, and the first one is enough more often than you would think.

1 · A variable

The normal case. 66 variables carry every colour and every measure of this template; not a line of CSS is needed for them. In QuartzControl under Styles → Variables, separated into light and dark.

Which variable applies where stands at the bottom of every page in chapter 5 — including the column that says what else moves with it. Touching --tpl-space-md moves the whole site; --tpl-fade moves two soft edges.

2 · A rule in an existing stylesheet

When a variable is not enough because it is not the value but the shape: the twelve stylesheets sit under Styles → Custom CSS, in sections by component. Which file and which section a component stands in is said by the table at the bottom of its page.

That changes the template itself. Importing a template package again can overwrite it — for a change meant to last, the third way is the safer one.

3 · A stylesheet of your own

Styles → Custom CSS → New file. A newly created file is appended to the end of the load order, and that is the point: at equal specificity the rule loaded last wins. What stands here beats the whole template without having to take anything away from it.

a11y.scss is then no longer last either

That one file sits last on purpose: its rules have to win over decisions made further up — an affordance that would only appear on hover, a state that would hang on a colour alone. A file of your own lands behind it. If something to do with keyboard, contrast or print disappears after a change, that is the first place to look.

The exception: diagrams

With Mermaid none of the three ways works without !important. Quartz hands the diagram renderer nine of its roughly hundred theme variables (primaryColor, lineColor, secondaryColor and six more, hard-wired in Quartz’s script). Everything else Mermaid colours itself — and writes as a <style> carrying that SVG’s own id into the graphic, an ID selector no class rule can beat.

That is why the body-mermaid section of content.scss holds 129 !important — and why your own rule needs one too. For comparison: all the other sections together hold 21, each with its reason beside it.

What not to touch

The load order, the fonts and the variables stand as blocks between markers in _quartzcontrol.scss, a file of their own next to custom.scss. QuartzControl rewrites those on every save — whatever you enter there by hand is gone with the next click. custom.scss is yours; QuartzControl only puts the one line @use "./quartzcontrol"; at its top, which loads the blocks.