Search

Out of the box

A button with a magnifying glass that opens an overlay. The border comes from lightgray.

In this template

• The border comes from gray, not from lightgray. That is the contrast rule put into practice: lightgray measures 1.34:1 against the ground and may therefore not surround anything you operate.
• The button sits in the header, at the far right, together with the three other controls. It is 44 px high like its neighbours and 15 rem wide — wide enough to be read as a field, narrow enough that the header still belongs to the page title. On a smartphone it becomes a square without a label.
• The overlay carries a real shadow. In this template only what genuinely floats above the page rather than sitting in it gets one: this overlay, the link preview, the language menu, the drawer on a smartphone and the global graph. Five places — and it is the rule that counts, not the number.
• The input field gets no focus ring but a heavier bottom edge — a ring inside a rounded box looks like a mistake.
• Results: the keyboard cursor and the pointer hover look the same. The arrow keys move through the list, and the highlighted row is the only signal of where you are.
• 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.

With prefers-reduced-transparency the translucent surface is replaced by an opaque one.

The width moved house twice

It stood first as flex: 0 1 15rem on .search — and had no effect: measured it was 110 px, equally at 1728, 1440, 1100 and 900 px, even though the toolbar occupied only 322 of 1400 px. Quartz wraps every component of a group in a class-less div of its own and writes that div’s flex values as an inline style from the configuration. The flex item is therefore the wrapper, not .search, and an inline style beats every stylesheet.

So on 2026-09-05 it moved into the configuration, as layout.groupOptions.basis. That was right in Chromium and wrong in the two other engines: Gecko and WebKit do not count a flex-basis towards the group’s maximum width and use the item’s content width instead — 110 px rather than 240. The group came out at 322 px instead of 452, and its own children hung 130 px out of the window in Firefox and Safari.

Since 2026-09-06 it is a width: 15rem on .search in components-header.scss again, and it stays there: a width on the element itself makes its content width 240 px, and all three engines agree on that. shrink: false stayed in the configuration — without it the field gives its width up to the two icon buttons long before the bar is full. On a smartphone the same stylesheet takes the width back off.

The index spans both languages

There is one search index for the whole site, so a German page can turn up in an English search result. Splitting it would mean one build per language — see Where the two languages stop.

Which variables apply here

These 18 variables are read by the section nav-search in components-header.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
--font-interface	var(--bodyFont) = "Noto Sans", system-ui, "Segoe UI", Robot…	3 other components
--gray	#5F5F5F · dark #A1A1A1	22 other components
--light	#FCFCFA · dark #16171A	14 other components
--secondary	#1463A3 · dark #699DC3	19 other components
--tpl-motion	150ms ease	13 other components
--tpl-radius-lg	14px	3 other components
--tpl-radius-md	8px	17 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-md	1rem	18 other components
--tpl-space-sm	0.75rem	10 other components
--tpl-space-xs	0.5rem	20 other components
--tpl-target	44px	12 other components
--tpl-text-lg	1.15rem	6.4 – Variables, Link preview
--tpl-text-sm	0.875rem	20 other components

This table is generated: it is read out of the stylesheets rather than kept by hand.