6.2 – Breakpoints

Where the breakpoint comes from

Quartz 5 has no option for its breakpoints in quartz.config.yaml. They are in the project’s quartz/styles/variables.scss:

$breakpoints: (
  mobile: 800px,
  desktop: 1200px,
);

The plugin reads this file when the build creates the navigation and puts the value into its stylesheet and script. Move the site’s breakpoint, and you move it for all navigations too — without a second place you could forget.

If the file cannot be read, the plugin uses Quartz’s defaults, 800 and 1200 pixels, and says so once (9.2).

Mobile means: at most this wide. With mobile: 800px a window of exactly 800 pixels is already mobile, one of 801 is not.

Restart after a change

The file is read when the navigation is created, not for every page. After changing variables.scss, restart npx quartz build --serve.

Overriding

options:
  breakpoints:
    mobile: 640px

Pixels, rem and em are allowed; a bare number counts as pixels. desktop is accepted but currently used by no rule of the plugin.

The same in every entry — or not at all

The plugin’s stylesheet applies to all navigations of a site, not to a single one. If only one entry sets a different breakpoint, the stylesheet ends up on the site twice, once with each breakpoint, and both apply to every navigation. Between the two values every navigation then looks half mobile. If you need a different breakpoint, change it in variables.scss — or set breakpoints to the same value in every entry.

How this fits the layout

Quartz’s own layout wraps at the same breakpoint, because it reads the same file. A navigation with mobile: offcanvas therefore turns into a burger button exactly when the sidebars slide below the text.

With layout frames from QuartzControl that is not the case. A frame brings its own breakpoints, stored in the project’s .quartz-gui/layout-breakpoints.json, and does not read variables.scss. This website is such a case: its frame goes mobile below 900 pixels, variables.scss says 800. Both entries therefore carry

options:
  breakpoints:
    mobile: 900px

— the same value in every entry, so the stylesheet lands on the site only once.