Deutsch
Über dieses Handbuch

Dieses Handbuch gehört zum Quartz-Plugin quartz-layout-box. Und es ist mit ihm gebaut: Diese Box hier ist eine Layout-Box.

Sie kommt aus einer Markdown-Datei, nicht aus der Konfiguration — welcher Weg wann der bessere ist, steht in Der Schnipsel.

5.2 – Gestalten

2 Min. Lesezeit

Das Plugin bringt fast keine Gestaltung mit. Es erzeugt Markup mit Klassen, alles Weitere steht im CSS der Site.

Was erzeugt wird

<div class="layout-box layout-box-note">
  <h3 class="layout-box-title">Über dieses Handbuch</h3>
  <div class="layout-box-content">…Schnipsel…</div>
</div>

Mit collapsible:

<details class="layout-box layout-box-note" open>
  <summary class="layout-box-title">Über dieses Handbuch</summary>
  <div class="layout-box-content">…Schnipsel…</div>
</details>

Die Überschrift fehlt ohne title, der Rest bleibt gleich. layout-box tragen alle Boxen, die zweite Klasse kommt aus className.

Ansprechen

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

Immer über className selektieren, nie über die Stelle

.left .layout-box funktioniert, bis jemand die Box in die rechte Spalte schiebt. Eine eigene Klasse je Instanz überlebt das Umsortieren.

Was das Plugin doch mitbringt

Zwei Dinge, beide notwendig:

  1. Bilder werden auf die Breite der Box begrenzt. Ohne das sprengte ein zu großes Logo die Spalte.
  2. img-light und img-dark — ein Bild je Farbschema. Das Plugin setzt für beide das display.

Keine eigene display-Regel für img-light und img-dark

Die Regeln des Plugins stehen in einer CSS-Ebene (@layer), das CSS der Site nicht. Ungelayertes CSS schlägt gelayertes — unabhängig von der Spezifität. Eine eigene display-Regel gewinnt also und zeigt beide Bilder gleichzeitig. Alles andere an diesen Bildern darf man setzen, nur display nicht.

Ein fehlendes Schnipsel sieht man

Im Modus --serve wird aus einer fehlenden Datei eine gestrichelte Box mit der Klasse layout-box-missing, der den erwarteten Pfad nennt. Im normalen Bau erscheint nichts — dort ist eine halbfertige Seite schlimmer als eine fehlende Box.