Style Guide v1.0.0: Indigo-Palette + lokale Web-Fonts

Komplette visuelle Umstellung nach dem generierten Style-Guide
(3d-lehrstun-de-v1.0.0). 3D-Druck-AG bekommt eine eigene Marke,
getrennt vom Teal der arduino.lehrstun.de-Schwester.

Farben: Teal #00979D -> Indigo #5B6EAE, warmes Off-White Surface
  #F0EEE9 statt Kuehlweiss, Lavendel-Akzent #9B8EC4.
Fonts: Raleway (Headings), Lato (Body), Inconsolata (Mono) — lokal
  gehostet in static/fonts/ (DSGVO-konform, kein Google-CDN),
  via @font-face + unicode-range (latin + latin-ext).
Form: Radius/Schatten/Spacing als Tokens (--radius-*, --shadow-*).

Technik:
  - base.html :root: neue --color-*/--font-*/--radius-* Tokens,
    alte Variablennamen (--primary etc.) als Aliase -> alle 33
    Templates ziehen sofort mit, kein Template-Rewrite noetig.
  - Semantische Banner-Tokens (--info/warn/success/error-bg+text+border)
    loesen ~130 Hardcoded-Pastelle ab (per sed gemappt).
  - Komponenten (Card, Button, Badge, Flash, Table, Code) auf Tokens.

Alle 13 Hauptseiten gegengeprueft (HTTP 200, keine Render-Fehler).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-06-04 12:52:14 +02:00
parent ae68da996f
commit 8a55e175a2
33 changed files with 349 additions and 110 deletions

View File

@@ -15,7 +15,7 @@
<img src="{{ url_for('api.projekt_cover', projekt_id=p.id) }}" alt=""
style="width: 100%; max-height: 240px; object-fit: cover; border-radius: 6px;">
{% else %}
<div style="height: 200px; background: linear-gradient(135deg, #ECF0F1, #D5DBDB); border-radius: 6px;
<div style="height: 200px; background: linear-gradient(135deg, var(--surface-muted), var(--surface-hover)); border-radius: 6px;
display: flex; align-items: center; justify-content: center; font-size: 3rem; color: var(--text-light);">
🎯
</div>
@@ -46,7 +46,7 @@
<div class="card">
<h2>Selbstbewertung</h2>
<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.6rem; margin-bottom: 1rem;">
<div style="text-align: center; padding: 0.6rem; background: #F4F6F7; border-radius: 6px;">
<div style="text-align: center; padding: 0.6rem; background: var(--surface-muted); border-radius: 6px;">
<div style="font-size: 0.75rem; color: var(--text-light);">Gesamt</div>
<div style="font-size: 1.4rem; margin-top: 0.2rem;">
{% if p.selbsteinschaetzung == 'zufrieden' %}🟢
@@ -55,7 +55,7 @@
</div>
<div style="font-size: 0.85rem; margin-top: 0.2rem;">{{ p.selbsteinschaetzung or '—' }}</div>
</div>
<div style="text-align: center; padding: 0.6rem; background: #F4F6F7; border-radius: 6px;">
<div style="text-align: center; padding: 0.6rem; background: var(--surface-muted); border-radius: 6px;">
<div style="font-size: 0.75rem; color: var(--text-light);">Planung</div>
<div style="font-size: 1.4rem; margin-top: 0.2rem;">
{% if p.selbsteinschaetzung_planung == 'gut' %}🟢
@@ -65,7 +65,7 @@
</div>
<div style="font-size: 0.85rem; margin-top: 0.2rem;">{{ p.selbsteinschaetzung_planung or '—' }}</div>
</div>
<div style="text-align: center; padding: 0.6rem; background: #F4F6F7; border-radius: 6px;">
<div style="text-align: center; padding: 0.6rem; background: var(--surface-muted); border-radius: 6px;">
<div style="font-size: 0.75rem; color: var(--text-light);">Ausfuehrung</div>
<div style="font-size: 1.4rem; margin-top: 0.2rem;">
{% if p.selbsteinschaetzung_ausfuehrung == 'gut' %}🟢
@@ -96,7 +96,7 @@
<h2>Rueckfragen-Historie</h2>
{% for r in rueckfragen %}
<div style="border-left: 3px solid {% if r.status == 'offen' %}var(--warning){% else %}var(--success){% endif %};
padding: 0.5rem 0.8rem; margin-bottom: 0.5rem; background: #F4F6F7; border-radius: 4px;">
padding: 0.5rem 0.8rem; margin-bottom: 0.5rem; background: var(--surface-muted); border-radius: 4px;">
<div style="font-size: 0.85rem; color: var(--text-light); margin-bottom: 0.2rem;">
{{ r.erstellt_am[:16].replace('T', ' ') }}{% if r.status == 'erledigt' %} · ✓ erledigt{% endif %}
</div>