Assets - Dokumentations-Ressourcen¶

Dieser Ordner enthält alle statischen Ressourcen für die MkDocs-Dokumentation.

Struktur¶

assets/
├── images/                    # Bilder, Screenshots, Diagramme
├── stylesheets/               # Custom CSS
│   └── extra.css             # Zusätzliche Styles (Lysis Branding)
└── javascripts/               # Custom JavaScript
    └── mermaid-panzoom.js    # Mermaid-Diagramm Pan & Zoom

Inhalte¶

Images (images/)¶

• Logo-Dateien: Lysis_Logo_*.png - Firmenlogo in verschiedenen Varianten
• Screenshots: UI-Screenshots für Benutzerhandbuch
• Architektur-Diagramme: VERALTET - Jetzt nur noch Mermaid-Diagramme in Markdown

Stylesheets (stylesheets/)¶

• extra.css: Custom CSS für Lysis-Branding
• Farben: Teal (Primary), Deep Orange (Accent)
• Dark Mode Anpassungen
• Custom Komponenten-Styles

JavaScripts (javascripts/)¶

• mermaid-panzoom.js: Ermöglicht Pan & Zoom für Mermaid-Diagramme
• Interaktive Navigation in großen Diagrammen
• Zoom via Mausrad
• Pan via Drag

Verwendung in Dokumentation¶

Bilder einbinden¶

![Beschreibung](assets/images/dateiname.png)

Icons (Material Design)¶

MkDocs Material bietet tausende Icons:

:material-check: Erledigt
:fontawesome-solid-rocket: Start

Standards¶

Diagramme¶

• ❌ Keine PNG/SVG-Diagramme mehr!
• ✅ Nur Mermaid-Diagramme in Markdown eingebettet
• Grund: Versionierung, Editierbarkeit, Konsistenz

Bilder¶

• Format: PNG (bevorzugt), JPG (für Fotos)
• Komprimierung: Optimiert für Web (<500KB pro Bild)
• Benennung: kebab-case-beschreibung.png
• Alt-Text: IMMER angeben für Accessibility

Custom CSS/JS¶

• Änderungen nur nach Absprache
• Testing: Light Mode UND Dark Mode
• Kompatibilität: Desktop + Mobile

Branding¶

Farben (Lysis.ai)¶

• Primary (Teal): #00ACC1, #00838F, #006064
• Accent (Deep Orange): #FF6E40, #BF360C
• Backgrounds: #E0F7FA (Light), #263238 (Dark)

Logos¶

• Symbol: Lysis_Logo_symbol_weiss.png - Nur Icon, weißer Hintergrund
• Verwendet für: Favicon, Navigation Logo

Hinweis: Bei neuen Assets immer in Git committen (kein .gitignore)!