English
About this handbook

This handbook belongs to the Quartz plugin quartz-layout-box. And it is built with it: this box is a layout box.

It comes from a Markdown file, not from the configuration — which way is better when is in The snippet.

5.2 – Styling

2 Min. Lesezeit

The plugin brings almost no styling. It produces markup with classes; everything else lives in the site’s CSS.

What is produced

<div class="layout-box layout-box-note">
  <h3 class="layout-box-title">About this handbook</h3>
  <div class="layout-box-content">…snippet…</div>
</div>

With collapsible:

<details class="layout-box layout-box-note" open>
  <summary class="layout-box-title">About this handbook</summary>
  <div class="layout-box-content">…snippet…</div>
</details>

Without title the heading is absent, the rest stays the same. layout-box is on every box, the second class comes from className.

Targeting

.layout-box-note {
  padding: 1rem;
  border: 1px solid var(--lightgray);
  border-radius: 6px;
}
.layout-box-note p:first-child { margin-block-start: 0; }

Always select by className, never by place

.left .layout-box works until somebody moves the box into the right column. A class of its own per instance survives the reordering.

What the plugin does bring

Two things, both necessary:

  1. Images are limited to the width of the box. Without that an oversized logo would burst the column.
  2. img-light and img-dark — one image per colour scheme. The plugin sets display for both.

No display rule of your own for img-light and img-dark

The plugin’s rules sit in a CSS layer (@layer), the site’s CSS does not. Unlayered CSS beats layered CSS — regardless of specificity. Your own display rule therefore wins and shows both images at once. Everything else about those images is yours to set; only display is not.

A missing snippet is visible

Under --serve a missing file becomes a dashed box with the class layout-box-missing naming the path it expected. In a normal build nothing appears — there, a half-finished page is worse than a missing box.