From 15ddf769afc19803af1c800b2589c6982397ad64 Mon Sep 17 00:00:00 2001 From: pseidler89-sudo Date: Wed, 15 Jul 2026 14:16:14 +0000 Subject: [PATCH] =?UTF-8?q?Design-Politur=20Runde=201:=20Dark-Mode-Kontras?= =?UTF-8?q?t,=20IA-N=C3=A4hte,=20Pfad-A-Hero,=20Icons?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Owner-Auftrag „fertiges, zeitgeist-taugliches Produkt". Basis: 3 Eval-Agents (Design-Zeitgeist 2026, IA/Code-Audit, A11y/Perf/SEO). Befund: Fundament stark, „gebastelt"-Wirkung sitzt an den Nähten. Umgesetzt (sicher, ohne Identitäts-Umbau): A11y/Blocker: - Dark-Mode-CTA-Kontrast: neues Token --c-on-accent (dunkler Text auf hellem Akzent). Vorher weiß auf #6aa6ff = 2,47:1 (WCAG-Fail) auf allen Primär-Buttons, aktiven Filtern und Stufen-Schaltern. Jetzt ~7:1. - Mobile-Touch-Ziele auf 44px (Filter, Burger-Links, Theme-Toggle). Informationsarchitektur (Aufbau): - Werkzeugkasten einheitlich benannt (vorher Nav „Selbst prüfen" ≠ Footer/URL „Werkzeugkasten" ≠ H1). Jetzt durchgängig „Werkzeugkasten". - Footer spiegelt jetzt die Header-Navigation: O-Ton + Quiz ergänzt (fehlten). Ton / Pfad A: - Startseiten-H1 ruhiger und auf Doktrin: „Behauptungen prüfen — mit Belegen statt Meinung." statt „So wirst du manipuliert — und so durchschaust du es." Politur: - Emoji-Icons → Lucide (mitmachen), konsistent mit dem übrigen Icon-System. - robots.txt + Sitemap-Verweis; per-Seite og:image:alt (Prop); .q-tag-Duplikat weg. Nicht angefasst (bewusst): astro.config site/base – Deploy setzt Canonicals korrekt, war KEIN Problem. Kein Content der 21 geprüften Faktenchecks geändert. Co-Authored-By: Claude Opus 4.8 (1M context) --- CLAUDE.md | 19 ++++++++++++++++--- public/robots.txt | 4 ++++ src/components/StufenSchalter.astro | 4 ++-- src/layouts/BaseLayout.astro | 10 +++++++--- src/pages/faktenchecks/index.astro | 5 +++-- src/pages/index.astro | 4 ++-- src/pages/mitmachen.astro | 23 ++++++++++++++++------- src/pages/werkzeugkasten.astro | 4 ++-- src/styles/global.css | 19 +++++++++++++------ 9 files changed, 65 insertions(+), 27 deletions(-) create mode 100644 public/robots.txt diff --git a/CLAUDE.md b/CLAUDE.md index 1b767c8..479ae18 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -297,6 +297,19 @@ Zwei verzahnte Lernwege: **Faktenchecks** (konkrete Behauptungen) und **Maschen* - **OAuth-Scope** des Baukastens (`scope=public_repo`, Zeile ~416) ist breit; verengen nur mit Live-Test, da es den funktionierenden Fork-Flow gefährden kann. Vorerst nur Transparenz-Hinweis ergänzt. - - **Niedrig:** `astro check || true` in `ci.yml` schluckt Typfehler; Inter-Fonts vom - Google-CDN (vs. „trackingfrei"-Versprechen) selbst hosten; `display:none`-Tiefen ggf. - auf ARIA-Tab-Pattern (SEO ist aber ok, da statisch im DOM). + - **Niedrig:** `astro check || true` in `ci.yml` schluckt Typfehler; `display:none`-Tiefen ggf. + auf ARIA-Tab-Pattern (SEO ist aber ok, da statisch im DOM). (Inter-Font-Selbsthosting ist + ✅ erledigt – `InterVariable.woff2` lokal in `public/fonts/`, kein Google-CDN mehr.) +- **Design-Politur Runde 1 (07/2026, Branch `claude/design-politur-r1`, in Review, NICHT live):** + Owner-Auftrag „fertiges, zeitgeist-taugliches Produkt". 3 Eval-Agents (Design-Zeitgeist, + IA/Code-Audit, A11y/Perf/SEO) → Befund: Fundament stark, „gebastelt"-Wirkung nur an den Nähten. + Umgesetzt: **Dark-Mode-CTA-Kontrast-Fix** (neues Token `--c-on-accent`, dunkler Text auf hellem + Akzent – war WCAG-Fail 2,47:1 auf allen Primär-Buttons/aktiven Filtern/Stufen-Schaltern); + **IA:** Werkzeugkasten einheitlich benannt (vorher Nav „Selbst prüfen" ≠ Footer/URL), Footer = + Header gespiegelt (O-Ton + Quiz ergänzt); **Startseiten-H1 tonal auf Pfad A** („Behauptungen + prüfen — mit Belegen statt Meinung." statt „So wirst du manipuliert"); **Emoji-Icons → Lucide** + (mitmachen); `robots.txt` + Sitemap-Verweis; per-Seite `og:image:alt`; Mobile-Touch-Ziele 44px; + `.q-tag`-Duplikat entfernt. **SEO-Canonical/BASE_PATH war KEIN Problem** (Deploy setzt korrekt). + Offen/Runde 2 (bewusst nicht gemacht, für Review): Spacing-Token-Skala, Masche-Card-Vereinheit- + lichung, `.kurzantwort-box` als geteilte Klasse, restliche Emojis (Kopier-/Selbsttest-Button), + optional Serif-Body / partei-neutrale Teal-Akzentfarbe (subjektiv → erst mit Nutzer). diff --git a/public/robots.txt b/public/robots.txt new file mode 100644 index 0000000..5a6308e --- /dev/null +++ b/public/robots.txt @@ -0,0 +1,4 @@ +User-agent: * +Allow: / + +Sitemap: https://kompetenz.partizip.online/sitemap-index.xml diff --git a/src/components/StufenSchalter.astro b/src/components/StufenSchalter.astro index a532c45..47007a7 100644 --- a/src/components/StufenSchalter.astro +++ b/src/components/StufenSchalter.astro @@ -66,10 +66,10 @@ .stufen-schalter button span { font-size: .76rem; color: var(--c-text-soft); font-weight: 500; } .stufen-schalter button:hover { background: var(--c-surface); border-color: var(--c-border); } .stufen-schalter button[aria-pressed="true"] { - background: var(--c-accent); border-color: var(--c-accent); color: #fff; + background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); box-shadow: 0 1px 3px rgba(16,24,40,.18); } - .stufen-schalter button[aria-pressed="true"] span { color: rgba(255,255,255,.88); } + .stufen-schalter button[aria-pressed="true"] span { color: color-mix(in srgb, var(--c-on-accent) 82%, transparent); } /* Kompakt-Modus: greift, sobald die Leiste beim Scrollen oben „klebt“. Spart Platz – nur noch die drei Buttons als schlanke Leiste. */ diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index 9fc9421..1c6ab67 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -7,6 +7,7 @@ interface Props { beschreibung?: string; breit?: boolean; bild?: string; + bildAlt?: string; seitentyp?: "website" | "article"; } const { @@ -14,6 +15,7 @@ const { beschreibung = "Falschbehauptungen prüfen lernen – faktenbasiert, transparent, je nach Vorwissen aufbereitet.", breit = false, bild = "/og-default.png", + bildAlt = "Kompetenzzentrum – Falschbehauptungen prüfen lernen", seitentyp = "website", } = Astro.props; @@ -25,7 +27,7 @@ const nav = [ { href: "/faktenchecks", text: "Faktenchecks" }, { href: "/maschen", text: "Maschen" }, { href: "/o-ton", text: "O-Ton" }, - { href: "/werkzeugkasten", text: "Selbst prüfen" }, + { href: "/werkzeugkasten", text: "Werkzeugkasten" }, { href: "/methodik", text: "Wie wir arbeiten" }, { href: "/mitmachen", text: "Mitmachen", cta: true }, ]; @@ -59,7 +61,7 @@ const vollerTitel = titel === "Kompetenzzentrum" ? titel : `${titel} · Kompeten - + @@ -159,8 +161,10 @@ const vollerTitel = titel === "Kompetenzzentrum" ? titel : `${titel} · Kompeten
diff --git a/src/pages/faktenchecks/index.astro b/src/pages/faktenchecks/index.astro index ea2c727..b998f68 100644 --- a/src/pages/faktenchecks/index.astro +++ b/src/pages/faktenchecks/index.astro @@ -99,8 +99,9 @@ const vorhandeneTechniken = Object.keys(TECHNIK_LABEL).filter((t) => border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text-soft); } .filter-btn:hover { border-color: var(--c-accent); } - .filter-btn[aria-pressed="true"] { background: var(--c-accent); border-color: var(--c-accent); color: #fff; } - .filter-btn--urteil[aria-pressed="true"] { background: var(--c-text); border-color: var(--c-text); } + .filter-btn[aria-pressed="true"] { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); } + .filter-btn--urteil[aria-pressed="true"] { background: var(--c-text); border-color: var(--c-text); color: var(--c-bg); } + @media (max-width: 720px) { .filter-btn { min-height: 44px; } } .treffer { margin: .5rem 0 1.25rem; font-weight: 600; } .fc-item.versteckt { display: none; } diff --git a/src/pages/index.astro b/src/pages/index.astro index 69392c2..cce6c63 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -27,7 +27,7 @@ const maschenTop = maschen.filter((m) => m.id !== macheDerWoche?.id).slice(0, 6)

Stimmt das wirklich?

-

So wirst du manipuliert — und so durchschaust du es.

+

Behauptungen prüfen — mit Belegen statt Meinung.

Hier prüfen wir Behauptungen aus Politik und Netz – mit echten Quellen, so einfach wie möglich erklärt. Du wählst selbst, wie tief du gehst: @@ -304,7 +304,7 @@ const maschenTop = maschen.filter((m) => m.id !== macheDerWoche?.id).slice(0, 6) .val--accent { color: var(--c-accent); } .zahl__src { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--c-border); font-size: .82rem; color: var(--c-text-soft); } .zahl__src a { font-weight: 600; white-space: nowrap; } - .q-tag { font-size: .62rem; font-weight: 800; padding: .1rem .42rem; border-radius: 999px; background: var(--c-accent-soft); color: var(--c-accent); text-transform: uppercase; letter-spacing: .03em; } + /* .q-tag nutzt jetzt die globale Definition (global.css) – Duplikat entfernt. */ .zwecke { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.25rem; margin-top: 3.5rem; } .zweck { align-items: flex-start; } diff --git a/src/pages/mitmachen.astro b/src/pages/mitmachen.astro index 537bd56..5581477 100644 --- a/src/pages/mitmachen.astro +++ b/src/pages/mitmachen.astro @@ -1,15 +1,16 @@ --- import BaseLayout from "../layouts/BaseLayout.astro"; +import { Icon } from "astro-icon/components"; import { pfad } from "../lib/labels"; const repo = "https://github.com/pseidler89-sudo/Kompetenzzentrum"; const wege = [ - { icon: "🧩", titel: "Faktencheck-Baukasten (mit Live-Vorschau)", text: "Am einfachsten: Faktencheck im Formular zusammenstellen, rechts live sehen, wie er auf der Seite aussieht – und mit einem Klick als Pull Request auf GitHub anlegen. Kein Markdown, keine Technik.", link: pfad("/tools/faktencheck-baukasten"), linkText: "Baukasten öffnen" }, - { icon: "🛠️", titel: "Redaktion: Bestehendes bearbeiten", text: "Zum Pflegen statt Neu-Anlegen: bestehende Faktenchecks – und auch Maschen & Methodik – im Formular-Editor (/admin) anpassen und den Status verwalten (Entwurf · In Prüfung · Geprüft). Mit GitHub-Login.", link: pfad("/admin/"), linkText: "Redaktion öffnen" }, - { icon: "✍️", titel: "Faktencheck vorschlagen", text: "Lieber erst eine Idee einbringen? Schlag eine Behauptung vor, die geprüft werden soll.", link: `${repo}/issues/new?template=neuer-faktencheck.yml`, linkText: "Thema vorschlagen" }, - { icon: "🔍", titel: "Quellen & Zahlen prüfen", text: "Sind alle Zahlen aktuell, alle Links gültig? Sorgfältiges Gegenlesen ist Gold wert.", link: `${repo}/issues`, linkText: "Offene Aufgaben ansehen" }, - { icon: "🐛", titel: "Fehler melden", text: "Falsche Zahl, toter Link, missverständliche Formulierung? Sag uns Bescheid.", link: `${repo}/issues/new?template=fehler-melden.yml`, linkText: "Fehler melden" }, - { icon: "💻", titel: "Technik & Design", text: "Astro, CSS, Barrierefreiheit, Übersetzung: Auch an der Plattform selbst kannst du mitbauen.", link: `${repo}`, linkText: "Repository öffnen" }, + { icon: "lucide:blocks", titel: "Faktencheck-Baukasten (mit Live-Vorschau)", text: "Am einfachsten: Faktencheck im Formular zusammenstellen, rechts live sehen, wie er auf der Seite aussieht – und mit einem Klick als Pull Request auf GitHub anlegen. Kein Markdown, keine Technik.", link: pfad("/tools/faktencheck-baukasten"), linkText: "Baukasten öffnen" }, + { icon: "lucide:pencil-ruler", titel: "Redaktion: Bestehendes bearbeiten", text: "Zum Pflegen statt Neu-Anlegen: bestehende Faktenchecks – und auch Maschen & Methodik – im Formular-Editor (/admin) anpassen und den Status verwalten (Entwurf · In Prüfung · Geprüft). Mit GitHub-Login.", link: pfad("/admin/"), linkText: "Redaktion öffnen" }, + { icon: "lucide:lightbulb", titel: "Faktencheck vorschlagen", text: "Lieber erst eine Idee einbringen? Schlag eine Behauptung vor, die geprüft werden soll.", link: `${repo}/issues/new?template=neuer-faktencheck.yml`, linkText: "Thema vorschlagen" }, + { icon: "lucide:search-check", titel: "Quellen & Zahlen prüfen", text: "Sind alle Zahlen aktuell, alle Links gültig? Sorgfältiges Gegenlesen ist Gold wert.", link: `${repo}/issues`, linkText: "Offene Aufgaben ansehen" }, + { icon: "lucide:bug", titel: "Fehler melden", text: "Falsche Zahl, toter Link, missverständliche Formulierung? Sag uns Bescheid.", link: `${repo}/issues/new?template=fehler-melden.yml`, linkText: "Fehler melden" }, + { icon: "lucide:code", titel: "Technik & Design", text: "Astro, CSS, Barrierefreiheit, Übersetzung: Auch an der Plattform selbst kannst du mitbauen.", link: `${repo}`, linkText: "Repository öffnen" }, ]; --- @@ -24,7 +25,7 @@ const wege = [

{wege.map((w) => (
-

{w.icon} {w.titel}

+

{w.titel}

{w.text}

{w.linkText}
@@ -63,6 +64,14 @@ const wege = [