Spacing

The scale

Each space is φ, about 1.618, times the one below it, and m is your page’s 1rem. The same scale sets margins, paddings, gaps and text sizes. Every space is a custom property: set one on :root, and everything that uses it follows.

Change your 1rem in the table. Every space follows, and so does the Viewer above it.

Which space goes where

A region, such as a template’s header, its thumbnail strip or the Panel, keeps --clover-inset (l) between its edge and the components in it. Inside, the closer things belong, the smaller the space: m between components (s along Default’s header and Document’s toolbar, l under the Gallery’s header), s within a component, and xs between a thumbnail and its label.

Set --clover-inset to make a layout tighter or roomier:

.my-layout {
  --clover-inset: var(--clover-space-m);
}

The Body

The Body is --clover-body-height tall: 60vh, or its template’s own. Set yours around a Body you compose, or on .clover-template-default:

.my-layout {
  --clover-body-height: 70vh;
}

In Document, the Body fills its page: size Document with --clover-template-document-height.

At home, the picture fills the Body edge to edge, except in Document, which keeps --clover-inset around it. The Body’s controls sit --clover-inset in from its edges, in line with the components around the Body. To change either, set --clover-canvas-inset or --clover-canvas-controls-inset on .clover-canvas itself.

On a screen under 31rem wide, such as a phone’s, the controls sit m in, and so do the Panel, Default’s header and thumbnail strip, and Document’s toolbar.