Skip to main content

MEC-Template Green – Legacy CSS Checklist

This page documents the status of pixel fidelity of the Cockpit MEC Template Green compared to the original (Live Reference: Elisen Park Greifswald).

Sources:

  • 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 implementation: apps/center-website/components/templates/mec-template-green/

The corresponding CSS file in the Cockpit implementation:

  • apps/center-website/components/templates/mec-template-green/template-green-home.css – all original tokens under [data-template="mec-template-green"].

Concept​

As with Template A/D/Grooss/C, the original classes (.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) are used in the Cockpit component, so the central style rules in template-green-home.css apply.

Inline styles in info-boxes.tsx are retained as a safety net because the component was already closely oriented to the original (#859599, #AFB584, Karla, aspect ratios). The additional classes are a hook for future CSS adjustments.

Status Overview​

AreaStatusNotes
Hero Slider (.home-slider)ConceptualModern background image + overlay (Cockpit), original has image on the right with white title area (124px blog font, 50%/50% split). Conscious UX deviation.
Hero Arrows/DotsOKModern (rounded buttons + dots) instead of the original .slider-navigation. Cosmetic deviation.
Info Boxes Row 1 (box-times + box-einkaufswelt)OK#859599/#AFB584, Karla, title/subtitle in original position. SVG icons from home.tpl.
Info Boxes Row 2 (Photo Tile box-einkaufswelt/box-news)OKpadding-bottom trick (50%/50%, 25% padding), background photo with object-cover.
Info Boxes Row 3 (box-gutschein/box-anfahrt/box-einkaufswelt-kategorien/box-facebook)OK4×25% aspect ratio 1:1, all SVG icons (ribbon, map pin, bag, steps) 1:1 from home.tpl.
Box Title (.box-title)OKKarla, uppercase, white on colored boxes, black on white boxes, top: 50px / left: 50px (desktop), responsive.
Box SubtitleOKKarla 300, top: 95px / left: 50px (desktop), responsive.
Hover BehaviorOKfilter: brightness(0.9) (original _info-boxes.css lines 35–37).
Responsive ≤768pxOKBox titles at top: 25px, subtitles with margin-top: 25px !important, h2 bottom: 32px (≤768) or 28px (arrival).
Responsive ≤670pxOKSubtitle font size 14px, subtitles with margin-top: 15px !important, box-times svg { bottom: 15px; right: 15px; height: 50% }.
Responsive ≤480pxOKBottom boxes width: 100% !important, flex-wrap: wrap.

Conscious Deviations​

AreaDeviationJustification
Hero Slider AppearanceBackground image + dark overlay instead of original "image right + 124px blog text left"Current Cockpit Center data contains hero images intended as backgrounds. Original look with 124px blog text would only make sense if the centers also maintain corresponding data. CSS tokens are prepared in template-green-home.css, so a future adjustment is possible (.home-slider-title, .home-slider-text, .home-slider-image).
Hero Slider Textclamp(48px, 8vw, 124px) instead of fixed 124px blog fontPragmatically responsive without blog font setup. The original Blog font is not loaded in apps/center-website/styles/fonts. Optionally for later expansion.
Offers Boxcompleted – Shared MecHomeAngeboteSlider (variant="green") in the first .home-infobox-top box, markup like home.tplLive parity with slider, green % badge, dots; CTA /angebote
Shop Logo Stripcompleted – Shared MecFooterShopLogoSlider (classPrefix="mec-green"), grayscale like liveSame Embla component as D/Grooss/C; no Tailwind card slider anymore
.slider-navigation rounded buttonsModern: chevron icons in bg-black/30 buttonsBetter UX (touchscreen targets), original has rounded 32px buttons with border: 2px solid #AFB584. Original style is prepared in CSS (.home-slider-arrow).
Header & FooterStandalone Cockpit components (modern)Pixel fidelity of header/footer is not part of this phase (homepage).

Future Tasks (nice-to-have)​

  • Hero Slider 1:1: Locally integrate Blog font + slider component with original layout (image on the right, white area on the left) as a variant behind a config flag.
  • Offers Slider in first top box: accomplished via Shared Slider + info-boxes.tsx.
  • .slider-navigation rounded buttons: Change hero arrows to original style (rounded buttons with border: 2px solid var(--mec-green)).
  • Header & Footer pixel-perfect against template_green/_header.css / _footer.css.

See also​

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