Projektbericht: Theme-Optimierung LUPUS-Institut

Projekt: LUPUS Institut für Wolfsmonitoring und -forschung System: Contao CMS mit Bootstrap 5.3.8 Datei: files/theme/scss/custom.scss (+ Templates, Inline-Skripte) Bearbeiter: MSTUDiO

1. Ausgangslage

Die bestehende custom.scss und das Theme-Setup wiesen mehrere Schwächen auf:

  • Veraltete Bootstrap-4-Variablen ($enable-responsive-font-sizes)
  • Doppelte Farbwerte ($primary und $dark identisch)
  • Nicht modularer Bootstrap-Import
  • jQuery-basierte Skripte ohne Throttling
  • Logo-Wechsel beim Scrollen ohne sanften Übergang
  • Fehlende Stile für RockSolid Slider (Custom-Skin)
  • Pauschales Link-Underline ohne klaren Hover-Zustand
  • Hover-Zoom auf Bildern überschritt den Bildrahmen
  • Download-Listen ohne visuelle Datei-Typ-Kennzeichnung
  • Externe Links nicht als solche erkennbar

2. Durchgeführte Optimierungen

2.1 SCSS-Refactoring

  • Bootstrap-Import-Reihenfolge korrigiert (functions → Overrides → variables → maps → mixins → Module)
  • Alternative Modular-Struktur entworfen, im Praxisbetrieb aber zugunsten des kompletten Bootstrap-Imports verworfen (Dropdowns, Transitions etc. waren betroffen)
  • Veraltete Variablen entfernt
  • $primary und $dark farblich getrennt (Kontrast-Korrektur)
  • Browser-präfigierte Properties entfernt (Autoprefixer übernimmt)
  • :after durch moderne ::after-Syntax ersetzt
  • ce_*-Klassen auf Contao-5-Konvention content-* migriert

2.2 Typografie

  • Fließtext-Größe auf 1.125rem (18 px) erhöht
  • Headlines explizit als kleinere Multiplikatoren von $font-size-base definiert, damit sie beim Hochziehen der Base nicht automatisch mitwachsen
  • $line-height-base und $headings-line-height separat justiert

2.3 Header & Logo (Shrinking-Effekt)

  • Crossfade-Variante mit zwei Logos zunächst entworfen, dann zugunsten eines einzelnen SVG-Logos verworfen
  • Schrumpfender Header und Logo beim Scrollen — gesteuert über CSS-Transitions
  • Body-Padding wechselt zwischen 138px (Default) und 70px (gescrollt)
  • Implementiert über is-scrolled-Klasse auf #header und header-scrolled auf body

2.4 JavaScript-Modernisierung

Die zwei jQuery-Skripte (Logo-Swap, „Nach oben"-Button) wurden zu einem einzigen Vanilla-JS-Modul konsolidiert:

  • Ein gebündelter scroll-Listener statt zwei separater
  • Throttling per requestAnimationFrame: Scroll-Events feuern nativ bis zu 100–150× pro Sekunde, gerendert wird aber nur 60× pro Sekunde. Ohne Drosselung läuft die Handler-Logik also doppelt so oft, wie der Browser überhaupt darstellen kann — verschwendete Rechenzeit, vor allem auf Mobilgeräten. Mit requestAnimationFrame wird die Logik auf max. eine Ausführung pro Frame begrenzt, synchron zum Browser-Repaint.
  • passive: true zur Verhinderung von Scroll-Blocking
  • Natives window.scrollTo({ behavior: 'smooth' }) ersetzt jQuery-.animate()
  • Initialer Check beim Laden für vorgescrollte Zustände
  • Keine jQuery-Abhängigkeit mehr für diese Funktionalität

2.5 RockSolid Slider — Custom Skin

Vollständiges SCSS-Stylesheet für die Slider-Variante rsts-skin-custom:

  • Layout für Viewport, Slides, Captions
  • Prev/Next-Pfeile als CSS-only-Pfeile (ohne Icon-Font)
  • Bullet-Navigation mit Pille-Hintergrund, Hover- und Active-States in $secondary (Grün)
  • Caption-Band unten mit Backdrop-Blur
  • Progress-Balken mit korrekter transition: width linear (CSS deklariert die Property, Slider-JS setzt die Dauer per Inline-Style)
  • :focus-visible-States für Tastatur-Accessibility

2.6 Link-Styling (Hover & Externe Links)

Hover:

  • Bootstraps Default-Hover (leichter Farbsprung) durch deutlicheren Effekt ersetzt
  • Variante umgesetzt: dickere Unterstreichung (text-decoration-thickness) + Farbwechsel zu $secondary
  • Scope auf Content-Bereich beschränkt, Buttons/Navigation/Logo per :not() ausgenommen

Externe Links:

  • Automatische Kennzeichnung aller a[target="_blank"] per ::after-Pseudo-Element
  • Inline-SVG als CSS-Mask, übernimmt automatisch currentColor
  • Bild-Links und Komponenten (Navi, Buttons, Logo) per :has() ausgenommen
  • Screenreader-Hinweis per visuell verstecktem ::before

2.7 Bild-Hover-Zoom

  • transform: scale(1.1) mit transition auf verlinkten Bildern in #main
  • Wrapper (<a> oder <figure>) bekommt overflow: hidden, damit der Zoom nicht über den Rahmen hinausragt
  • Strukturproblem mit <figcaption> gelöst: overflow: hidden darf nicht am <figure> liegen, sondern nur am Bild-Wrapper innerhalb — sonst wird die Caption beim Zoom überdeckt
  • Endgültige Struktur: Beschnitt am <a>, Caption frei darunter im <figure>

2.8 Download-Elemente mit Datei-Icons

Einheitliches Styling für beide Contao-Inhaltselemente:

  • content-downloads (Liste) und content-download (Einzeln)
  • Icons als CSS-Mask mit Inline-SVG (Bootstrap Icons)
  • Icon klebt am <a>, nicht am Container — funktioniert dadurch in beiden Strukturen identisch
  • Datei-Typ-spezifische Brand-Farben:
    • PDF in PDF-Rot
    • Word in Word-Blau
    • Excel in Excel-Grün
    • PowerPoint in PowerPoint-Orange
    • Bilder in $secondary (Grün)
    • Archive in $dark (Braun)
  • Trennlinien nur in Listen, nicht beim Standalone-Element
  • Hover-State mit Farbwechsel und Underline

2.9 Template-Anpassung (Quickfix)

  • templates/theme/navbar_brand.html5 für Logo-Vereinfachung angepasst
  • Bewusst als Quickfix im .html5-Format belassen, da Relaunch in Twig geplant ist

3. Technische Hinweise / offene Punkte

  • Templates: Aktuell noch im *.html5-Format. Migration auf Twig-Templates beim Relaunch geplant — *.html5 ist in Contao 5 deprecated und entfällt mit Contao 6.
  • p-3 Utility-Klasse: Im Header per HTML-Attribut gesetzt; CSS-Override beim Schrumpfen erforderte !important. Beim Refactoring sollte diese Klasse aus dem Navbar-Template entfernt und das Padding ausschließlich per SCSS gesteuert werden.
  • Bootstrap-Import: Komplettes Bootstrap geladen — bewusste Entscheidung gegen modulare Auswahl, da Tree-Shaking später effizienter und Editorenfreundlichkeit (neue Komponenten ohne SCSS-Anpassung) gewahrt bleibt.

4. Geänderte Dateien

Datei Art der Änderung
files/theme/scss/custom.scss Vollständige Überarbeitung
templates/theme/navbar_brand.html5 Quickfix-Anpassung Logo
Inline-<script> im Layout Konsolidierung beider Skripte zu Vanilla-JS-Modul
templates/theme/rsts_default_custom.html5 (unverändert, Custom-Skin lebt nur im SCSS)

5. Empfehlungen für den Relaunch

  • Migration aller Templates von *.html5 auf Twig
  • Slot-basierte Layout-Struktur einführen
  • ce_*-Klassen final eliminieren (im Stylesheet bereits geschehen, im DOM ggf. noch durch Drittmodule vorhanden)
  • p-3 aus dem Navbar-Template entfernen, Steuerung allein über SCSS
  • Bootstrap-Imports modular planen, sobald Komponenten-Bedarf final feststeht
  • Cookie-consent-freie Lösung weiterführen (RockSolid Slider, Lightbox prüfen)
  • Responsive Typo per clamp() evaluieren