MINT.FV Design System & Style Architektur

Übersicht

Das Design System besteht aus zwei unabhängigen aber synchronisierten Teilen:

  1. Jekyll Website (assets/css/events.css + _data/)
  2. Decap CMS Admin (cms-static/admin/) – deployed zu Netlify, autark

🎨 Token System

Zentrale CSS-Variablen (assets/css/events.css)

:root {
  --color-primary: #003d82;
  --color-primary-strong: #002855;
  --color-primary-stronger: #001a3d;
  --color-surface: #ffffff;
  --color-surface-muted: #f5f5f5;
  --color-surface-soft: #f9f9f9;
  --color-border: #d0d0d0;
  --color-text: #111111;
  --color-text-muted: #444444;
  --color-link: #0066cc;
  --color-link-strong: #004999;
  --color-focus: #ffd700;
  --radius-sm: 6px;
  --radius-md: 8px;
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.15);
}

Diese Tokens werden verwendet für:

🎯 Event-Type Farben

Event-Typ-Farben sind zentral definiert in _data/event_types.yml:

mach-mit-mathe:
  color: "#E8F4F8"  # Hellblau
  emoji: "📐"

offene-werkstatt:
  color: "#F0F8E8"  # Hellgrün
  emoji: "🔧"

ferienpass:
  color: "#FFF4E6"  # Hell-Orange
  emoji: "🎪"

sonstige:
  color: "#F5F0F8"  # Hellviolett
  emoji: "📅"

Synchronisations-Anforderungen

⚠️ WICHTIG: Event-Type Farben müssen in 3 Dateien synchron gehalten werden:

Datei Zweck Bereich
_data/event_types.yml Single Source of Truth Jekyll Event-System
cms-static/admin/event-types.json CMS Defaults + Quick-Buttons Decap Admin (Netlify)
cms-static/admin/custom-admin.css Admin UI Farben CMS Styling (autark)

Hinweis zur Name-Asymmetrie:

Workflow bei Farb-Änderung:

  1. Ändere Farbe in _data/event_types.yml
  2. Kopiere denselben Wert nach cms-static/admin/event-types.json
  3. Aktualisiere CSS-Variable in cms-static/admin/custom-admin.css: 
    :root {
  --event-color-TYPENAME: #NEWCOLOR;
}
  4. Test lokal: bundle exec jekyll serve
  5. Test CMS-Admin: http://localhost:4000/cms-static/admin/

📁 Datei-Struktur

Jekyll (Local + GitHub Pages)

assets/css/events.css          ← Zentrale Tokens (--color-*, --radius-*, etc.)
_data/event_types.yml          ← Event-Type Definitionen (Single Source of Truth)
_includes/event-card.html      ← Event Cards (nutzen --event-type-color Custom Property)
_includes/event-filters.html   ← Filter Buttons (nutzen --event-type-color)
_pages/veranstaltungen.md      ← Hauptseite (nutzt Klassen statt Inline-Styles)

Decap CMS (Netlify-Deploy, autark)

cms-static/admin/
  ├── config.yml               ← CMS Konfiguration
  ├── index.html               ← Admin UI Entry
  ├── event-types.json         ← Event-Type Defaults (für Quick-Buttons, JavaScript)
  ├── custom-admin.css         ← Admin Styling (CSS-Variablen lokal)
  ├── preview.css              ← Preview-Styling
  └── index.html               ← JavaScript für Event-Type Auto-Fill

🎨 Styling-Patterns

1. Event-Type-Farben in Komponenten

In HTML/Liquid (Jekyll):

<article style="--event-type-color: ;">
  <div class="event-card__badge"><!-- nutzt --event-type-color --></div>
</article>

In CSS:

.event-card {
  border-left: 4px solid var(--event-type-color, var(--color-border));
}

.event-card__badge {
  background-color: var(--event-type-color, var(--color-surface-muted));
}

2. Zentrale Button-Styles

Alle CTA-Buttons nutzen:

.events-navigation__link,
.events-feeds__link,
.btn.btn--info {
  background-color: var(--color-primary);
  border: 2px solid var(--color-primary-strong);
  color: #fff;
  /* ... etc */
}

Nie: Hardcoded Farben direkt in Komponenten.

3. Focus-States

Konsistent überall:

.event-filter-btn:focus,
.pagination__link:focus {
  outline: 3px solid var(--color-focus);  /* #ffd700 */
  outline-offset: 1px;
}

📋 Checkliste für Änderungen

Neue Event-Type hinzufügen:

Token-Farben ändern:

Event-Type-Farbe ändern:

🔍 Wichtige Hinweise

⚠️ cms-static/ ist autark

✅ Single Source of Truth

Obwohl es mehrere Dateien gibt, gibt es einen klaren Ownership:

📖 Referenzen