Out of the box
Cards with a title, a path and an excerpt.
In this template
- Not cards but rows, with hairlines between them. A list of ten framed boxes is restless.
- The keyboard cursor and the pointer hover look the same: a tinted surface plus a bar on the left. The arrow keys move through the list, and the highlighted row is the only signal of where you are — it must not look different from what the pointer shows.
- The excerpt is truncated after two lines.
- The match in the text is marked with the same colour as
==highlight==in the body text. “This is what you were looking for” means the same thing across the whole site. - The path is set in the code typeface, muted and small — it is origin, not content.
Which variables apply here
These 17 variables are read by the section page-search-results in components-header.scss. They can be changed in QuartzControl under Styles → Variables — without a line of CSS.
| Variable | Value | also applies to |
|---|---|---|
--codeFont | "Noto Sans Mono", ui-monospace, SFMono-Re… | 4 other components |
--dark | #17171A · dark #FCFCFA | 13 other components |
--darkgray | #333333 · dark #DDDDDD | 18 other components |
--gray | #5F5F5F · dark #A1A1A1 | 22 other components |
--secondary | #1463A3 · dark #699DC3 | 19 other components |
--textHighlight | rgba(226, 189, 92, 0.55) · dark rgba(140, 184, 218, 0.30) | Body text |
--tpl-accent-bar | 3px | 6 other components |
--tpl-radius-sm | 4px | 10 other components |
--tpl-rule | var(--lightgray) = #DDDDDD | 19 other components |
--tpl-rule-width | 1px | 25 other components |
--tpl-space-3xs | 0.125rem | 6 other components |
--tpl-space-md | 1rem | 18 other components |
--tpl-space-sm | 0.75rem | 10 other components |
--tpl-surface-tint | var(--highlight) = rgba(42, 78, 108, 0.10) | 14 other components |
--tpl-text-base | 1rem | 4 other components |
--tpl-text-sm | 0.875rem | 20 other components |
--tpl-text-xs | 0.78rem | 10 other components |
This table is generated: it is read out of the stylesheets rather than kept by hand.