Skip to content

Commit

Permalink
Update docs
Browse files Browse the repository at this point in the history 
- change hierarchy
  • Loading branch information
@zoglo
zoglo committed Jun 27, 2024
1 parent 1223b78 commit 48c9737
Show file tree
Hide file tree
Showing 21 changed files with 79 additions and 92 deletions.
16 changes: 8 additions & 8 deletions docs/pages/docs/configuration/backgrounds.md → docs/pages/configuration/backgrounds.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,15 +24,15 @@ Hintergrundbildern bedeutet dies, dass jede einzelne CSS-Klasse dem Anwender bek
Der ThemeManager erweitert eine Option im Dateisystem, sodass Bilder als Hintergrundbild definiert werden können.

<figure markdown>
![Bild als Hintergrund festlegen](../../../assets/configuration/background/file-set-as-background.png){loading=lazy}
![Bild als Hintergrund festlegen](../../assets/configuration/background/file-set-as-background.png){loading=lazy}
<figcaption>Über die Option kann ein Hintergrundbild festgelegt werden</figcaption>
</figure>

Da das `CSS` für Hintergrundbilder erst generiert werden muss, stehen diese erst nach Kompilieren des Themes zur
Verfügung.

<figure markdown>
![Compiler preview](../../../assets/configuration/background/background-compiler.png){loading=lazy}
![Compiler preview](../../assets/configuration/background/background-compiler.png){loading=lazy}
<figcaption>Der Asset-Compiler listet alle verfügbaren Hintergründe auf</figcaption>
</figure>

Expand All @@ -50,7 +50,7 @@ stehen.
Anwender können die Hintergrundbilder unter dem Reiter Background auswählen. Die Beschriftung der Hintergrundbilder
im Backend folgt hierbei dem Schema `BG-[Dateiname]`.

![Hintergrund auswählen](../../../assets/configuration/background/style-manager-background-image.png){loading=lazy}
![Hintergrund auswählen](../../assets/configuration/background/style-manager-background-image.png){loading=lazy}

### Wo kann ich Hintergrundbilder einstellen?

Expand Down Expand Up @@ -82,7 +82,7 @@ Der StyleManager ermöglicht es, dass CSS-Klassen an ausgewählten Stellen in ei
(Template-Variablen).

<figure markdown>
![Global, Component und Element](../../../assets/configuration/background/global-component-element.png){loading=lazy}
![Global, Component und Element](../../assets/configuration/background/global-component-element.png){loading=lazy}
<figcaption>Hervorhebung der Gruppen anhand einer Bild-Text-Liste. Lila hebt lediglich das gesamte Element (Global) hervor</figcaption>
</figure>

Expand Down Expand Up @@ -113,14 +113,14 @@ Der StyleManager ermöglicht es, dass CSS-Klassen an ausgewählten Stellen in ei
Die im StyleManager verfügbaren Hintergrund-Einstellungen können genutzt werden, um das Verhalten des festgelegten
Hintergrunds zu beeinflussen.

![Einstellungen im StyleManager](../../../assets/configuration/background/background-settings.png){loading=lazy}
![Einstellungen im StyleManager](../../assets/configuration/background/background-settings.png){loading=lazy}

Die nachfolgende Tabelle erklärt alle weiteren Optionen, wobei der Standardwert bereits der `Best-Practice` folgt.

| Einstellung | Standardwert | Beschreibung |
|---------------------|----------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| Color | - | Hiermit kann eine Hintergrundfarbe ausgewählt werden. Eine Kombination mit transparenten Hintergrundbildern ist möglich. |
| Image | [none](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image) | Dient der Auswahl des Hintergrundbildes. Über die Option `none` kann ein über den [Skin](../../guides/skin/introduction.md) gesetztes Hintergrundbild entfernt werden. |
| Image | [none](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image) | Dient der Auswahl des Hintergrundbildes. Über die Option `none` kann ein über den [Skin](../guides/skin/introduction.md) gesetztes Hintergrundbild entfernt werden. |
| Attachment | [scroll](https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment) | Über diese Einstellung wird das Hintergrundbild in der Position im Browserfenster fixiert, sodass dieses beim Scrollen an der selben Stelle bleibt. |
| Repeat | [no-repeat](https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat) | Background-Repeat kann genutzt werden, damit kleine Bilder auf einer großen Fläche wiederholt werden. Wirkt nicht, wenn etwas in `Size` eingestellt wurde. |
| Size | [cover](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size) | Diese Einstellung bestimmt die Größe des eingesetzten Hintergrundbildes.<br><br>Über `contain` wird das Bild so groß wie möglich innerhalb des Containers skaliert, ohne das Bild zu beschneiden oder zu dehnen. Wenn das Bild zu klein für den Container ist, wird das Bild gekachelt, wenn eine Einstellung in `Size` vorgenommen wurde.<br><br>Die Einstellung `auto` skaliert das Bild in der entsprechenden Richtung, sodass die Proportionen erhalten bleiben. |
Expand Down Expand Up @@ -172,12 +172,12 @@ wurde eine neue Funktion hinzugefügt, welche in diversen Einstellungen von Hint
Werden eigene Hintergrundfarben im StyleManager ergänzt, wird ein Platzhalter angezeigt.

<figure markdown>
![Farbvorschau aktivieren](../../../assets/configuration/background/color-preview-setting.png){loading=lazy}
![Farbvorschau aktivieren](../../assets/configuration/background/color-preview-setting.png){loading=lazy}
<figcaption>Aktivieren der Farbvorschau in den Benutzer-Einstellungen</figcaption>
</figure>

<figure markdown>
![Farbvorschau in Einstellungen](../../../assets/configuration/background/color-preview.png){loading=lazy}
![Farbvorschau in Einstellungen](../../assets/configuration/background/color-preview.png){loading=lazy}
<figcaption>Farbvorschau innerhalb der Hintergrundfarben</figcaption>
</figure>

Expand Down
16 changes: 8 additions & 8 deletions docs/pages/docs/configuration/icon-set.md → docs/pages/configuration/icon-set.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ Bei der Verwendung von Icon-Fonts, die über Dienste wie IcoMoon oder Fontello e
stellt sich oft die Herausforderung, die zugehörigen CSS-Dateien einzubinden und die entsprechenden Klassen in Templates
oder CSS-Anpassungen für Komponenten zu integrieren.

![Icon in einer Button-Komponente](../../../assets/configuration/icons/component-icon.png){loading=lazy}
![Icon in einer Button-Komponente](../../assets/configuration/icons/component-icon.png){loading=lazy}

Der Contao ThemeManager ermöglicht es Anwendern, ihr Icon-Set direkt in den Systemeinstellungen auszuwählen. Automatisch
generiert der ThemeManager das benötigte CSS, und die festgelegten Optionen stehen systemweit im StyleManager zur
Expand All @@ -29,7 +29,7 @@ entpackt werden.

Im Download einer IcoMoon-Schriftart befinden sich die benötigten Dateien im Ordner `fonts`:

![IcoMoon Download mit Dateien](../../../assets/configuration/icons/font-files.png){loading=lazy}
![IcoMoon Download mit Dateien](../../assets/configuration/icons/font-files.png){loading=lazy}

Folgende Dateien müssen in *einen Ordner* abgelegt werden:

Expand All @@ -39,7 +39,7 @@ Folgende Dateien müssen in *einen Ordner* abgelegt werden:
Um die Icon-Schriftart einzubinden, muss die `*.svg` unter `System` -> `Einstellungen` unter ThemeManager eingebunden
werden.

![Icon-Set einstellen](../../../assets/configuration/icons/settings-icon-set.png){loading=lazy}
![Icon-Set einstellen](../../assets/configuration/icons/settings-icon-set.png){loading=lazy}

!!! tip

Expand All @@ -49,17 +49,17 @@ werden.
Nach Kompilieren des Themes stehen die neuen Icons in den Komponenten bereit.

<figure markdown>
![Asset Compiler Report](../../../assets/configuration/icons/maintenance-generated-icon-font.png){loading=lazy}
![Asset Compiler Report](../../assets/configuration/icons/maintenance-generated-icon-font.png){loading=lazy}
<figcaption>Asset-Compiler Report</figcaption>
</figure>

<figure markdown>
![Icons innerhalb der Link-Einstellungen](../../../assets/configuration/icons/stylemanager-icon-picker.png){loading=lazy}
![Icons innerhalb der Link-Einstellungen](../../assets/configuration/icons/stylemanager-icon-picker.png){loading=lazy}
<figcaption>Icons innerhalb der Link-Einstellungen</figcaption>
</figure>

<figure markdown>
![Icon-Auswahl im RockSolid Icon-Picker](../../../assets/configuration/icons/rocksolid-icon-picker.png){loading=lazy}
![Icon-Auswahl im RockSolid Icon-Picker](../../assets/configuration/icons/rocksolid-icon-picker.png){loading=lazy}
<figcaption>Icon-Auswahl im RockSolid Icon-Picker</figcaption>
</figure>

Expand All @@ -70,7 +70,7 @@ Nach Kompilieren des Themes stehen die neuen Icons in den Komponenten bereit.

### Hinweise und Fehlermeldungen

![Hinweise und Fehlermeldungen im Asset-Compiler](../../../assets/configuration/icons/maintenance-no-icon-font-woff-file.png){loading=lazy}
![Hinweise und Fehlermeldungen im Asset-Compiler](../../assets/configuration/icons/maintenance-no-icon-font-woff-file.png){loading=lazy}

Folgende Hinweise und Fehlermeldungen können vom Asset-Compiler zurückgegeben werden:

Expand Down Expand Up @@ -105,7 +105,7 @@ gezogen werden, um die Icons zu laden.
eine Dokumentation auf [GitHub](https://github.com/fontello/fontello/wiki/Help).

<figure markdown>
![Übersicht der IcoMoon-App](../../../assets/configuration/icons/icoMoon.png){loading=lazy}
![Übersicht der IcoMoon-App](../../assets/configuration/icons/icoMoon.png){loading=lazy}
<figcaption>Übersicht der IcoMoon-App</figcaption>
</figure>

Expand Down
0 ...pages/docs/configuration/theme/buttons.md → docs/pages/configuration/theme/buttons.md
View file
File renamed without changes.
10 changes: 5 additions & 5 deletions ...es/docs/configuration/theme/components.md → docs/pages/configuration/theme/components.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ Bei Einstellung der Option `box-shadow` wird ein zusätzlicher Schatten/Schlagsc

Wenn für alle Box-Komponenten nur der Schlagschatten ohne Rahmen erwünscht ist, kann der `$boxed-border-width` auf `0`
gestellt werden. Soll der Rahmen bei `box` weiterhin bestehen bleiben, kann eine Option über einen eigenen
[Skin](../../../guides/skin/introduction.md) individuell erweitert werden.
[Skin](../../guides/skin/introduction.md) individuell erweitert werden.

---

Expand Down Expand Up @@ -176,7 +176,7 @@ Folgende Einstellungen können hierbei vorgenommen werden:
werden, welche im TinyMCE-Editor erstellt wurden.

Es ist derzeit nicht möglich, dass Tabellenstyles über den StyleManager *aktiviert oder *deaktiviert* werden können.
Ist dies nicht erwünscht, können Tabellen im eigenen [Skin](../../../guides/skin/introduction.md) angepasst werden.
Ist dies nicht erwünscht, können Tabellen im eigenen [Skin](../../guides/skin/introduction.md) angepasst werden.

### Tabellenzelle

Expand Down Expand Up @@ -252,7 +252,7 @@ Bestandteile einer Tabelle einstellen:
Bis auf die Icon-Schriftart bezieht sich die nachfolgende Konfiguration auf das Aussehen der durch den ThemeManager
bereitgestellten Inhaltselemente `Icon`, `Icon-Text` und `Icon-Text-Liste`.

![Icon-Einstellungen](../../../../assets/configuration/components/icon-settings-stylemanager.png){loading=lazy}
![Icon-Einstellungen](../../../assets/configuration/components/icon-settings-stylemanager.png){loading=lazy}

### Icon-Schriftart

Expand All @@ -266,7 +266,7 @@ Diese Einstellung überschreibt die Schriftart der Icons, die vom ThemeManager v
Generierung und Bereitstellung von Icons nicht mehr.

Das Ändern der hier eingestellten Schriftart wird nur empfohlen, wenn das Feature nicht benötigt wird und die
verwendeten Icons über einen eigenen [Skin](../../../guides/skin/introduction.md) festgelegt werden.
verwendeten Icons über einen eigenen [Skin](../../guides/skin/introduction.md) festgelegt werden.

### Größe der Icons

Expand All @@ -289,7 +289,7 @@ wird.
`$icon-outlined-width`

Über die Optionen `Design` sowie `Shape` kann das Aussehen von Icons modifiziert werden.
![Icon-Designs](../../../../assets/configuration/components/icons.png){loading=lazy}
![Icon-Designs](../../../assets/configuration/components/icons.png){loading=lazy}
Die Auswahl des Designs `Outline` in den zuvor beschriebenen Einstellungen bewirkt das Hinzufügen eines Rahmens um das
Icon. Die Breite des Rahmens kann über `$icon-outlined-width` eingestellt werden.

Expand Down
0 docs/pages/docs/configuration/theme/fonts.md → docs/pages/configuration/theme/fonts.md
View file
File renamed without changes.
0 docs/pages/docs/configuration/theme/form.md → docs/pages/configuration/theme/form.md
View file
File renamed without changes.
0 .../pages/docs/configuration/theme/global.md → docs/pages/configuration/theme/global.md
View file
File renamed without changes.
2 changes: 1 addition & 1 deletion .../pages/docs/configuration/theme/header.md → docs/pages/configuration/theme/header.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ Flexbox-Anweisung `justify-content`[^2] mit den Optionen:
teilweise mit denen von CSS-Flexbox überlagern, können die `center` und `space-*` Anweisungen weiterhin verwendet
werden.

Der Header kann mit folgendem CSS im [Skin](../../../guides/skin/introduction.md) auf CSS-Grid gestellt werden:
Der Header kann mit folgendem CSS im [Skin](../../guides/skin/introduction.md) auf CSS-Grid gestellt werden:
```css
header > .inside {
display: grid;
Expand Down
4 changes: 2 additions & 2 deletions ...ages/docs/configuration/theme/headings.md → docs/pages/configuration/theme/headings.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -250,7 +250,7 @@ In den nachfolgenden Abschnitten werden die nachfolgenden Einstellungen beschrie
Wenn das [Global Spacing](#global-spacing-automatisch) nicht aktiviert wird, gelten folgende Regeln für den unteren
Abstand (*Margin*) für Überschriften:

![Headline Spacing normal](../../../../assets/configuration/headline/headline-spacing.png){loading=lazy}
![Headline Spacing normal](../../../assets/configuration/headline/headline-spacing.png){loading=lazy}

| Breakpoints | Small | Medium | Large |
|-----------------------|----------------------------|------------------------------|------------------------------|
Expand Down Expand Up @@ -280,7 +280,7 @@ Abstand (*Margin*) für Überschriften:
dies oft die einzig notwendige Einstellung ist. Die nachfolgende Tabelle zeigt an, welche der Config-Variablen genutzt
wird.

![Headline Spacing global](../../../../assets/configuration/headline/headline-spacing-global.png){loading=lazy}
![Headline Spacing global](../../../assets/configuration/headline/headline-spacing-global.png){loading=lazy}

| Breakpoints | Small | Medium | Large |
|------------------------------------------|-----------------------------|------------------------------|------------------------------|
Expand Down
10 changes: 5 additions & 5 deletions .../pages/docs/configuration/theme/layout.md → docs/pages/configuration/theme/layout.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,12 @@ Typische Breakpoints sind beispielsweise für
definiert, um ein konsistentes und benutzerfreundliches Erlebnis auf unterschiedlichen Geräten zu gewährleisten. Im
Gegensatz zu anderen CSS-Frameworks legt der ThemeManager auch Wert auf Bildschirme, die über Full HD (1920 x 1080)
hinausgehen.
![Breakpoints des ThemeManagers](../../../../assets/configuration/layout/grid-breakpoints.png){loading=lazy}
![Breakpoints des ThemeManagers](../../../assets/configuration/layout/grid-breakpoints.png){loading=lazy}

Der ThemeManager fügt sechs Breakpoints hinzu, die sich in den StyleManager-Einstellungen als Suffix der Konfigurationen
widerspiegeln, zum Beispiel `(xs)`.

![Breakpoints im StyleManager](../../../../assets/configuration/layout/stylemanager-breakpoints.png){loading=lazy}
![Breakpoints im StyleManager](../../../assets/configuration/layout/stylemanager-breakpoints.png){loading=lazy}

| Breakpoint | Bildschirmgröße | Geräte |
|------------|----------------:|--------------------------:|
Expand Down Expand Up @@ -110,7 +110,7 @@ Diese Optionen erlauben die Auswahl eines [Breakpoints](#breakpoints) für die V
und/oder
rechte Spalte in der gleichen Reihe wie die Hauptspalte angezeigt werden.

![Verhalten des Layouts](../../../../assets/configuration/layout/layout-behavior.png){loading=lazy}
![Verhalten des Layouts](../../../assets/configuration/layout/layout-behavior.png){loading=lazy}

Über `$layout-column-width-*` können die Breiten für die linke und rechte Spalte eingestellt werden. Mit
`$layout-column-gutter` wird der Abstand zur Hauptspalte konfiguriert.
Expand Down Expand Up @@ -166,7 +166,7 @@ Hälfte des konfigurierten [Grid-Gutter](#grid). Möchte man diesen Abstand verg
konfiguriert werden.

<figure markdown>
![Äußeres Padding von Artikeln](../../../../assets/configuration/layout/article-outer-padding.png){loading=lazy width="375"}
![Äußeres Padding von Artikeln](../../../assets/configuration/layout/article-outer-padding.png){loading=lazy width="375"}
<figcaption>Padding am Bildschirmrand</figcaption>
</figure>

Expand Down Expand Up @@ -264,7 +264,7 @@ Ein Artikel dient hierbei immer als Grid-Container, der die Ausrichtung der Kind
kann.
Inhaltselemente lassen sich in das 12-Spalten-Raster einordnen.

![12er Grid](../../../../assets/configuration/layout/grid-columns-12.png){loading=lazy}
![12er Grid](../../../assets/configuration/layout/grid-columns-12.png){loading=lazy}
!!! danger "Spaltenanzahl von 12 ($grid-columns)"

Es wird nicht empfohlen, die Anzahl der Spalten von 12 zu ändern, da die Optionen des StyleManagers nicht
Expand Down
2 changes: 1 addition & 1 deletion ...docs/configuration/theme/miscellaneous.md → ...ages/configuration/theme/miscellaneous.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ Kompilieren für alle Breakpoints gelten. Nach der Generierung erfolgt die Benen
In `$display-properties` können die gewünschten
[Display-Eigenschaften](https://developer.mozilla.org/en-US/docs/Web/CSS/display) nacheinander eingetragen werden.

![Dynamisch generierte Display-Eigenschaften](../../../../assets/configuration/misc/display-properties.png){loading=lazy}
![Dynamisch generierte Display-Eigenschaften](../../../assets/configuration/misc/display-properties.png){loading=lazy}

```
none block flex table grid inline-block inline-flex inline-grid
Expand Down
0 ...pages/docs/configuration/theme/modules.md → docs/pages/configuration/theme/modules.md
View file
File renamed without changes.
4 changes: 2 additions & 2 deletions ...ages/docs/configuration/theme/overview.md → docs/pages/configuration/theme/overview.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ Erscheinungsbild jeder Webseite nach Bedarf anzupassen.
!!! info

Jeder Bezeichner einer einzustellenden Variable entspricht der jeweiligen
[SCSS-Variable](https://sass-lang.com/guide/#variables), wodurch der Wert im [Skin](../../../guides/skin/introduction.md)
[SCSS-Variable](https://sass-lang.com/guide/#variables), wodurch der Wert im [Skin](../../guides/skin/introduction.md)
abgerufen werden kann.

---
Expand All @@ -22,7 +22,7 @@ Erscheinungsbild jeder Webseite nach Bedarf anzupassen.
In Version 2.0 des Contao ThemeManagers wurde die Konfiguration angepasst, sodass die hier dokumentierte Reihenfolge der
Theme-Konfiguration mit der im Contao-Backend übereinstimmt.

![Backend-Ansicht der Theme Konfiguration](../../../../assets/configuration/1_config.png)
![Backend-Ansicht der Theme Konfiguration](../../../assets/configuration/1_config.png)

<div class="grid cards" markdown>

Expand Down
5 changes: 0 additions & 5 deletions docs/pages/docs/introduction/version.md
View file

This file was deleted.

Loading

0 comments on commit 48c9737

Please sign in to comment.