Out of the box
A box with the local surroundings, plus a symbol for opening the global view.
In this template
The graph draws itself and takes its colours from the CSS variables at runtime. The template therefore designs only the box around it, not the drawing:
- a square field (
aspect-ratio: 1) — the local graph is round, and a wide box wastes the sidebar - border and tinted surface as with the other panels
- the symbol for the global view is 44 px across and sits at the right of the heading row
- the global view gets the same shadow as the search — both really do float
A half-recoloured graph would be worse than one in foreign colours: the drawing resolves its own colours, and a stylesheet working against that always catches only half of them.
On narrow screens it is hidden (display: desktop-only) — a net of dots in a column 390 px
wide shows nothing.
What is missing on folder pages
On a folder or chapter page the box holds a single dot, even when the page has links. That is a bug in the plugin and cannot be fixed from a template.
The script normalises addresses in two places and differently in each. It keys its data set with
simplifySlug, which strips a trailing index and keeps the slash before it, turning
2-formatting/01-text/index into 2-formatting/01-text/. The centre of the graph it takes from the
address bar instead, and there it strips that slash. For every page whose address ends in a slash —
which is exactly the folder pages — it therefore looks for a node it never created: no edges, one
dot.
The same page reached as …/01-text/index shows nine nodes and eight edges. One character of
difference.
Hiding the box there is not possible either: Quartz’ not-index condition means the home page
alone, and anything finer needs code rather than configuration. What does show a folder page’s
connections are the backlinks and the list in the text above.
Which variables apply here
These 17 variables are read by the section aside-graph in components-note.scss. They can be changed in QuartzControl under Styles → Variables — without a line of CSS.
| Variable | Value | also applies to |
|---|---|---|
--dark | #17171A · dark #FCFCFA | 13 other components |
--gray | #5F5F5F · dark #A1A1A1 | 22 other components |
--headerFont | "Noto Sans", system-ui, "Segoe UI", Robot… | 15 other components |
--light | #FCFCFA · dark #16171A | 14 other components |
--tpl-radius-lg | 14px | 3 other components |
--tpl-radius-md | 8px | 17 other components |
--tpl-radius-sm | 4px | 10 other components |
--tpl-rule | var(--lightgray) = #DDDDDD | 19 other components |
--tpl-rule-control | color-mix(in srgb, var(--gray) 70%, var(-… | 11 other components |
--tpl-rule-width | 1px | 25 other components |
--tpl-shadow | 0 6px 24px rgba(23, 23, 26, 0.10) · dark 0 6px 24px rgba(0, 0, 0, 0.55) | 5 other components |
--tpl-space-xs | 0.5rem | 20 other components |
--tpl-surface | var(--lightgray) = #DDDDDD | 6 other components |
--tpl-surface-tint | var(--highlight) = rgba(42, 78, 108, 0.10) | 14 other components |
--tpl-target | 44px | 12 other components |
--tpl-text-sm | 0.875rem | 20 other components |
--tpl-tracking-label | 0.08em | 9 other components |
This table is generated: it is read out of the stylesheets rather than kept by hand.