Skip to main content

MEC-Template Green – Legacy-CSS-Checkliste

Diese Seite dokumentiert den Stand der Pixel-Treue des Cockpit-MEC-Templates Green gegenüber dem Original (Live-Referenz: Elisen Park Greifswald).

Quellen:

  • mec-templates/site_templates/templates_green/home.tpl
  • mec-templates/sites/assets/css/template_green/_home.css
  • mec-templates/sites/assets/css/template_green/_info-boxes.css
  • mec-templates/sites/assets/css/template_green/_slider.css
  • Cockpit-Implementierung: apps/center-website/components/templates/mec-template-green/

Die zugehörige CSS-Datei in der Cockpit-Implementierung:

  • apps/center-website/components/templates/mec-template-green/template-green-home.css – alle Original-Tokens unter [data-template="mec-template-green"].

Konzept​

Wie bei Template A/D/Grooss/C werden die Original-Klassen (.box, .box-times, .box-einkaufswelt, .box-news, .box-gutschein, .box-anfahrt, .box-einkaufswelt-kategorien, .box-facebook, .box-title, .home-infobox-top, .home-infobox-bottom, .home-slider, .home-slider-item, .home-slider-content, .home-slider-title, .home-slider-text, .home-slider-image, .home-slider-badge) in der Cockpit-Komponente verwendet, sodass die zentralen Stilregeln in template-green-home.css greifen.

Inline-Styles in info-boxes.tsx bleiben als Sicherheitsnetz erhalten, weil die Komponente bereits stark an's Original angelehnt war (#859599, #AFB584, Karla, Aspect-Ratios). Die zusätzlichen Klassen sind ein Hook für zukünftige CSS-Anpassungen.

Statusübersicht​

BereichStatusAnmerkungen
Hero-Slider (.home-slider)KonzeptionellModernes Hintergrundbild + Overlay (Cockpit), Original ist Motiv-rechts mit weißem Titel-Bereich (124px Blog-Schrift, 50%/50%-Aufteilung). Bewusste UX-Abweichung.
Hero-Pfeile/DotsOKModern (runde Buttons + Dots) statt der originalen .slider-navigation. Kosmetische Abweichung.
Info-Boxen Reihe 1 (box-times + box-einkaufswelt)OK#859599/#AFB584, Karla, Titel/Subtitle in Original-Position. SVG-Icons aus home.tpl.
Info-Boxen Reihe 2 (Foto-Tile box-einkaufswelt/box-news)OKpadding-bottom-Trick (50%/50%, 25% padding), Hintergrundfoto mit object-cover.
Info-Boxen Reihe 3 (box-gutschein/box-anfahrt/box-einkaufswelt-kategorien/box-facebook)OK4×25% Aspect-Ratio 1:1, alle SVG-Icons (Ribbon, MapPin, Bag, Steps) 1:1 aus home.tpl.
Box-Titel (.box-title)OKKarla, Uppercase, weiß auf farbigen, schwarz auf weißen Boxen, top: 50px / left: 50px (Desktop), responsive.
Box-SubtitleOKKarla 300, top: 95px / left: 50px (Desktop), responsive.
Hover-VerhaltenOKfilter: brightness(0.9) (Original _info-boxes.css Z. 35–37).
Responsive ≤768pxOKBox-Titles top: 25px, Subtitles mit margin-top: 25px !important, h2 bottom: 32px (≤768) bzw. 28px (Anfahrt).
Responsive ≤670pxOKSubtitle-Schriftgröße 14px, Subtitles mit margin-top: 15px !important, box-times svg { bottom: 15px; right: 15px; height: 50% }.
Responsive ≤480pxOKBottom-Boxen width: 100% !important, flex-wrap: wrap.

Bewusste Abweichungen​

BereichAbweichungBegründung
Hero-Slider OptikHintergrundbild + dunkler Overlay statt Original "Motiv-rechts + 124px Blog-Schrift links"Aktuelle Cockpit-Center-Daten enthalten Hero-Bilder, die als Hintergrund gedacht sind. Original-Look mit 124px Blog-Schrift wäre nur sinnvoll, wenn die Center auch entsprechende Daten pflegen. CSS-Tokens sind in template-green-home.css vorbereitet, sodass eine spätere Umstellung möglich ist (.home-slider-title, .home-slider-text, .home-slider-image).
Hero-Slider-Schriftclamp(48px, 8vw, 124px) statt fest 124px Blog-FontPragmatisch responsive ohne Blog-Font-Setup. Original-Schrift Blog ist nicht in apps/center-website/styles/fonts geladen. Optional als spätere Erweiterung.
Angebote-Boxfertig – Shared MecHomeAngeboteSlider (variant="green") in der ersten .home-infobox-top-Box, Markup wie home.tplLive-Parität mit Slider, grünem %-Badge, Dots; CTA /angebote
Shop-Logo-Streifenfertig – Shared MecFooterShopLogoSlider (classPrefix="mec-green"), Grayscale wie LiveGleiche Embla-Komponente wie D/Grooss/C; kein Tailwind-Card-Slider mehr
.slider-navigation runde ButtonsModern: Chevron-Icons in bg-black/30-ButtonsBessere UX (Touchscreen-Targets), Original hat runde 32px-Buttons mit border: 2px solid #AFB584. Original-Stil ist in CSS vorbereitet (.home-slider-arrow).
Header & FooterEigenständige Cockpit-Komponenten (modern)Header/Footer-Pixel-Treue ist nicht Teil dieser Phase (Startseite).

Zukünftige Tasks (nice-to-have)​

  • Hero-Slider 1:1: Blog-Font lokal einbinden + Slider-Komponente mit Original-Layout (Motiv rechts, weißer Bereich links) als Variante hinter Config-Flag.
  • Angebote-Slider in erster Top-Box: erledigt via Shared-Slider + info-boxes.tsx.
  • **.slider-navigation runde Buttons**: Hero-Pfeile auf Original-Stil umstellen (runde Buttons mit border: 2px solid var(--mec-green)).
  • Header & Footer pixel-genau gegen template_green/_header.css / _footer.css.

Siehe auch​

Nutzungsstatistik: Seitenaufrufe werden anonymisiert erfasst. Im Umami-Dashboard nach diesem Pfad filtern: /en/developer-guide/mec-template-green-legacy-css-checklist