Designs & Icons

#Hell und dunkel

Clay hat ein helles und ein dunkles Design. Es startet mit der Systemeinstellung der Leser und wechselt mit, wenn das System wechselt. Der Sonnen- oder Mond-Button in der Navigationsleiste wechselt von Hand; die Wahl merkt sich der Browser und wendet sie an, bevor die Seite gezeichnet wird. Seiten blitzen also nie im falschen Design auf.

Codeblöcke werden in zwei Farbschemata hervorgehoben und wechseln zusammen mit der Seite.

#Icons

Clay nutzt Font Awesome für Icons: bei Seiten, Ordnern, der Startseite und Links in der Navigationsleiste. Schreib die Klassen des Icons, wie sie auf seiner Seite bei fontawesome.com stehen:

icon: fa-solid fa-rocket

Icons funktionieren auch in Markdown, als HTML: <i class="fa-solid fa-star"></i> ergibt .

#Kostenlose Icons

Ohne weitere Einrichtung lädt Clay die kostenlosen Icons von Font Awesome 6. Sie umfassen die Stile Solid, Regular und Brands, genug für die meisten Dokumentationen.

#Font-Awesome-Kits

Mit einem Font-Awesome-Konto kannst du ein Kit anlegen: eine Sammlung von Icons, die Pro-Icons, neuere Versionen oder eigene Uploads enthalten kann. Trag die ID des Kits in die clay.yaml ein:

fontawesomeKit: "abc123def4"

Die ID ist der Code in der Einbettungs-URL des Kits, https://kit.fontawesome.com/abc123def4.js. Mit einem Kit lädt Clay das Kit statt der kostenlosen Icons.

Stelle die Technologie des Kits in seinen Einstellungen auf fontawesome.com auf Web Fonts. Auf SVG gestellte Kits ersetzen jedes Icon in der Seite durch eine Zeichnung, was sich mit der Art stört, wie Clay Seiten beim Navigieren aktualisiert.