8.1 – The four boxes of this site

Key	Place	Source	What is on show
layoutBoxMark	header, priority: 10	html	two images for light/dark, {{root}}, {{siteTitle}}
layoutBoxPageName	header, priority: 30	html	{{frontmatter.section}} in an attribute
layoutBoxNote	left, priority: 40	file with .md	Markdown, byLang, collapsible
—	footer, priority: 20	html	{{slug}} inside a CSS selector

The word mark

options:
  html: <a class="site-mark" href="{{root}}/"><img
    class="img-light" src="{{root}}/static/icon.png" width="26"
    height="26" alt=""><img class="img-dark"
    src="{{root}}/static/icon-dark.png" width="26" height="26"
    alt=""><span class="site-mark-text">{{siteTitle}}</span></a>
  className: layout-box-mark
  placeholders: true
  frontmatterKey: layoutBoxMark

• Two images, one per colour scheme. img-light and img-dark are classes of the plugin; it shows the matching one and needs no JavaScript for it (5.2).
• They are the images Quartz has anyway: icon.png is the favicon, icon-dark.png the variant for dark mode. Replacing the image replaces favicon and mark in one go — in QuartzControl under Configuration → Project image.
• {{siteTitle}} puts the site title from the configuration next to it, {{root}} makes the link and the image addresses right, subpath or not (4.2).
• alt="", because the title stands beside it as text; a screen reader would read the name twice otherwise.

The chapter name

options:
  html: '<span data-section="{{frontmatter.section}}"></span>'
  className: layout-box-page-name

The span stays empty. The value becomes visible only through CSS:

.layout-box-page-name span::before {
  content: "· " attr(data-section);
}

Why the detour? Because the separator and the spacing then belong to the CSS, where they belong — and because a page without a section shows nothing rather than a lonely dot.

The note box

The only one with file:, and the only one with byLang. It shows three things at once: a Markdown snippet, two languages and the collapsing.

options:
  file: sidebar-note.md
  title: Über dieses Handbuch
  collapsible: true
  frontmatterKey: layoutBoxNote
  byLang:
    en:
      file: sidebar-note.en.md
      title: About this handbook
layout:
  position: left
  priority: 40
  display: desktop-only

desktop-only, because the left column disappears on a smartphone anyway.

The fourth box has a page of its own: 8.2.