Tables
Out of the box Quartz frames the table and sets the padding directly on the element.
In this template there are no vertical lines and no outer frame: a hairline under each row, a heavier one under the header, and the last row loses its line. The header is set in the heading typeface and does not wrap.
The scrolling sits on the container Quartz puts around every table — not on the table itself.
The obvious first attempt (display: block; overflow-x: auto on the <table>) takes the table
layout apart: while building, it made the keys and values of the property table slide on top of
each other.
Images
A delicate border and rounded corners. Without a border an image with a white background looks like a hole on the warm ground of this page.
An explicitly set width (![[image.png|300]]) is kept; the template only caps it.
Embeds
An iframe gets aspect-ratio: 16/9. Without that rule it collapses to zero height in a grid cell
— which happens exactly when the page uses a grid of its own, that is, everywhere in this template.
Transcluded notes
A dashed bar and a tinted surface: you should see where foreign content begins and ends. Out of the box an embed is not visually separated from the surrounding text.
Which variables apply here
These 12 variables are read by the section body-media in content.scss. They can be changed in QuartzControl under Styles → Variables — without a line of CSS.
| Variable | Value | also applies to |
|---|---|---|
--gray | #5F5F5F · dark #A1A1A1 | 22 other components |
--tpl-radius-md | 8px | 17 other components |
--tpl-rule | var(--lightgray) = #DDDDDD | 19 other components |
--tpl-rule-strong | var(--gray) = #5F5F5F | 8 other components |
--tpl-rule-width | 1px | 25 other components |
--tpl-space-2xs | 0.25rem | 16 other components |
--tpl-space-lg | 1.5rem | 12 other components |
--tpl-space-md | 1rem | 18 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-text-sm | 0.875rem | 20 other components |
This table is generated: it is read out of the stylesheets rather than kept by hand.