DogFatherGitandClaude Opus 5
be3599239d
Diese Runde ging eine Ebene tiefer als "sieht es gut aus": Ist das
System, aus dem das Aussehen entsteht, ueberhaupt eines?
DIE MESSUNG VORWEG
Markenfarben ausgeschrieben im Quelltext: 155 Stellen
davon Blau 74, Gold 33, Lila 22, Gruen 16, Rot 10
verschiedene Eckenradien: 12
darunter 5px, 7px, 9px, 11px
Die Farben gab es laengst als Variablen. Sie standen trotzdem ueberall
ausgeschrieben da, weil halbdurchsichtige Toene -- Raender, Leuchten,
sanfte Flaechen -- einen Alphawert brauchen, und das mit einer fertigen
Farbvariablen nicht geht: rgba(127, 208, 232, .16).
Die Folge waere beim ersten Farbwechsel sichtbar geworden: Man findet
150 Stellen, uebersieht fuenf, und die Seite hat danach zwei Blautoene,
die sich um eine Nuance unterscheiden. Genau das ist der Unterschied
zwischen einer gewachsenen und einer gestalteten Oberflaeche.
WAS GEAENDERT WURDE
Kanalvariablen (--wd-blau-rgb: 127 208 232) neben den fertigen Farben.
Damit schreibt man rgb(var(--wd-blau-rgb) / .16), und eine Aenderung
wirkt ueberall. 164 Stellen umgestellt, verteilt ueber CSS und neun
Seiten.
Auch die abgeleiteten Farben zeigen jetzt auf die Kanaele statt eigene
Werte zu fuehren -- und die vier Prozessfarben (--wd-p1 bis p4) sind
keine eigenen Farben mehr, sondern Rollen: --wd-p1: var(--wd-blau).
Sonst haette man vier weitere Stellen, die beim naechsten Farbwechsel
stillschweigend zurueckbleiben.
Ergebnis: Jede Markenfarbe hat genau EINE Quelle. Ausgeschriebene
Markenfarben im Quelltext: 0.
Radien auf vier Stufen plus Pillenform: 6 / 10 / 14 / 20 / 999. Kein
Wert wurde um mehr als 2px verschoben, optisch aendert sich also nichts
Spuerbares -- 12 verschiedene Werte sind auf 3 tatsaechlich verwendete
zusammengeschmolzen. Zwischenwerte wie 7px oder 11px entstehen nicht aus
Absicht, sondern weil man beim Bauen einer neuen Kachel nicht nachschaut,
was nebenan schon gilt.
DER BEWEIS, DASS ES EIN SYSTEM IST
Neue Pruefung pruef-system.mjs. Sie behauptet nicht, sie STELLT UM: Die
Markenfarbe wird von Babyblau auf kraeftiges Orange gesetzt und dann
nachgezaehlt, ob irgendwo der alte Ton stehen bleibt.
658 von 1975 sichtbaren Elementen tragen die Markenfarbe
0 bleiben nach der Umstellung beim alten Ton
Prozessfarben folgen nachweislich mit
Radien: 3 Stufen
UND DIE WICHTIGSTE ERKENNTNIS -- ueber das Messen selbst
Der erste Anlauf meldete 110 haengengebliebene Elemente, alle in Kopf-
und Fusszeile. Die naheliegende Erklaerung waere gewesen: "da steht die
Farbe noch ausgeschrieben". Sie war falsch.
Nachgewiesen ueber die DevTools-Schnittstelle: Auf diese Elemente wirkt
die Regel ".wd a:not(.wd-btn) -> var(--wd-blau)", und --wd-blau
resolviert an genau dieser Stelle korrekt zum neuen Orange. Trotzdem
blieb die berechnete Textfarbe alt -- auch nach erzwungener
Neuberechnung.
Der Unterschied: Kopf- und Fusszeile werden von wd-core.js per innerHTML
eingefuegt. Chromium erneuert solche Teilbaeume nicht zuverlaessig, wenn
man eine Variable NACHTRAEGLICH umstellt. Laedt man dieselbe Seite mit
bereits geaenderter Variable, sind sie orange -- gegengeprueft mit einem
Minimalbeispiel, in dem derselbe Mechanismus einwandfrei funktioniert.
Das Pruefverfahren wurde deshalb umgestellt: Die Variable wird VOR dem
Laden ueberschrieben. Das entspricht genau dem, was eine Aenderung in der
CSS-Datei bewirkt -- also dem Fall, um den es wirklich geht.
Haette ich der ersten Messung geglaubt, haette ich 110 einwandfreie
Stellen "repariert" und dabei das gerade aufgebaute System wieder
zerlegt. Es ist der siebte Fehlalarm in eigener Messtechnik innerhalb
von zwei Runden -- und der subtilste.
ALLE PRUEFUNGEN GRUEN: Gestaltung 0 Befunde (13 Seiten x 5 Sprachen
gegen WCAG 2.2 AA), Anfragedetail 20, Verwaltung 69, Portal 32,
Widerruf 58, Textkodierung 55 Kombinationen, Designsystem 5.
Versionsstempel und Cache-Name auf v9.
Co-Authored-By: Claude Opus 5 <[email protected]>
199 lines
9.9 KiB
HTML
199 lines
9.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de" data-i18n-titel="seiten_titel">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Portfolio — Dogfather Webdesign</title>
|
|
<meta name="description" content="Echte Projekte statt erfundener Beispiele: Dogfather Universe und Van's DIY & Bastelbedarf — mit Ausgangslage, Lösung und Ergebnis." />
|
|
<meta name="robots" content="noindex, nofollow, noarchive" />
|
|
<link rel="icon" type="image/png" href="/assets/img/favicon.png" />
|
|
<meta name="theme-color" content="#05070b" />
|
|
<link rel="manifest" href="/webdesign/app.webmanifest" />
|
|
<link rel="apple-touch-icon" href="/assets/img/wd-app-180.png" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
|
<meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
|
|
<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd9" />
|
|
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd9" />
|
|
<style>
|
|
.pfo-projekt { overflow: hidden; padding: 0; margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
|
|
.pfo-bild {
|
|
width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center;
|
|
border-bottom: 1px solid var(--wd-rand);
|
|
}
|
|
.pfo-inhalt { padding: clamp(1.3rem, 3vw, 2rem); }
|
|
.pfo-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1rem; margin-bottom: 1rem; }
|
|
.pfo-kopf h2 { margin: 0; font-size: clamp(1.4rem, 3.2vw, 1.9rem); }
|
|
|
|
.pfo-block { margin-bottom: 1.1rem; }
|
|
.pfo-block h3 { font-size: 0.8rem; letter-spacing: .13em; text-transform: uppercase; color: var(--wd-blau); margin-bottom: .35em; }
|
|
.wd-karte--lila .pfo-block h3 { color: var(--wd-lila); }
|
|
.pfo-block p { margin: 0; }
|
|
|
|
/* Die Detailangaben stecken in einem aufklappbaren Bereich: die Karte
|
|
bleibt beim Überfliegen kurz, wer mehr will, klappt auf. Bewusst das
|
|
native Klapp-Element des Browsers, damit Tastatur und Screenreader
|
|
ohne Zusatzcode funktionieren.
|
|
(Der Tag-Name steht hier absichtlich nicht ausgeschrieben — sonst
|
|
zählt ihn die Tag-Balance-Prüfung in server/pruefe-webdesign-i18n.mjs
|
|
als öffnendes Element mit und meldet einen Fehler, den es nicht gibt.) */
|
|
.pfo-mehr { margin-top: .4rem; }
|
|
.pfo-mehr > summary {
|
|
cursor: pointer; list-style: none;
|
|
display: inline-flex; align-items: center; gap: .4rem;
|
|
min-height: 44px; padding: .5rem .1rem;
|
|
font-weight: 700; color: var(--wd-blau); font-size: .95rem;
|
|
}
|
|
.wd-karte--lila .pfo-mehr > summary { color: var(--wd-lila); }
|
|
.pfo-mehr > summary::-webkit-details-marker { display: none; }
|
|
.pfo-mehr > summary::after { content: "▾"; transition: transform var(--wd-zeit) ease; }
|
|
.pfo-mehr[open] > summary::after { transform: rotate(180deg); }
|
|
.pfo-mehr-inhalt { padding-top: .6rem; border-top: 1px solid var(--wd-rand); margin-top: .3rem; }
|
|
</style>
|
|
</head>
|
|
<body class="wd">
|
|
|
|
<div id="wd-kopf"></div>
|
|
|
|
<main id="wd-inhalt">
|
|
|
|
<section class="wd-abschnitt wd-abschnitt--eng" style="padding-top:clamp(2.4rem,6vw,4rem)">
|
|
<div class="wd-container">
|
|
<span class="wd-eyebrow" data-i18n="pf_eyebrow">Portfolio</span>
|
|
<h1 data-i18n="pf_h1">Zwei Projekte, die man anfassen kann</h1>
|
|
<p class="wd-lead" style="max-width:72ch" data-i18n="pf_lead">Beide Seiten laufen wirklich, unter ihrer eigenen Adresse, auf einem eigenen Server. Die Vorschaubilder sind echte Aufnahmen der laufenden Seiten — keine gezeichneten Entwürfe.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="wd-abschnitt" style="padding-top:0">
|
|
<div class="wd-container">
|
|
|
|
<!-- ---------------- Projekt 1 ---------------- -->
|
|
<article class="wd-karte pfo-projekt wd-auf">
|
|
<img class="pfo-bild" src="/assets/img/wd-projekt-universe.jpg"
|
|
alt="Startseite von dogfather-universe.com" width="1200" height="750" loading="lazy" decoding="async"
|
|
data-i18n-attr="alt:p1_alt" />
|
|
<div class="pfo-inhalt">
|
|
<div class="pfo-kopf">
|
|
<h2 data-i18n="p1_h2">Dogfather Universe</h2>
|
|
<span class="wd-tag" data-i18n="p1_art">Umfangreiche Website</span>
|
|
</div>
|
|
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="pf_ausgang">Ausgangslage</h3>
|
|
<p data-i18n="p1_ausgang">Drei getrennte Welten sollten unter ein Dach, ohne dass Besucher sich verlaufen.</p>
|
|
</div>
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="pf_loesung">Umgesetzte Lösung</h3>
|
|
<p data-i18n="p1_loesung">Eine Seite mit drei farblich klar getrennten Welten, gemeinsamer Navigation und durchgängig fünf Sprachen.</p>
|
|
</div>
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="pf_ergebnis">Ergebnis</h3>
|
|
<p data-i18n="p1_ergebnis">Seit August 2026 öffentlich und im täglichen Einsatz.</p>
|
|
</div>
|
|
|
|
<details class="pfo-mehr">
|
|
<summary data-i18n="pf_details">Details ansehen</summary>
|
|
<div class="pfo-mehr-inhalt">
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="pf_funktionen">Wichtigste Funktionen</h3>
|
|
<ul class="wd-liste">
|
|
<li data-i18n="p1_f1">Fünf Sprachen, inklusive echtem Schweizerdeutsch</li>
|
|
<li data-i18n="p1_f2">Verwaltungsbereich mit Rollen und Rechten</li>
|
|
<li data-i18n="p1_f3">Bewerbungssystem mit Statusverfolgung</li>
|
|
<li data-i18n="p1_f4">Supporter-Abo mit Zahlungsanbindung</li>
|
|
<li data-i18n="p1_f5">Automatische Live-Erkennung des Streams</li>
|
|
<li data-i18n="p1_f6">Als App installierbar</li>
|
|
</ul>
|
|
</div>
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="pf_stil">Stilrichtung</h3>
|
|
<p data-i18n="p1_stil">Dunkel und cinematisch, mit einer eigenen Leitfarbe je Welt.</p>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
|
|
<div class="wd-btn-reihe" style="margin-top:1rem">
|
|
<a class="wd-btn wd-btn--zweit wd-btn--klein" href="https://dogfather-universe.com/" target="_blank" rel="noopener" data-i18n="pf_ansehen">Live ansehen</a>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- ---------------- Projekt 2 ---------------- -->
|
|
<article class="wd-karte wd-karte--lila pfo-projekt wd-auf">
|
|
<img class="pfo-bild" src="/assets/img/wd-projekt-vandiy.jpg"
|
|
alt="Startseite von vans-diy-bastelbedarf.com" width="1200" height="696" loading="lazy" decoding="async"
|
|
data-i18n-attr="alt:p2_alt" />
|
|
<div class="pfo-inhalt">
|
|
<div class="pfo-kopf">
|
|
<h2 data-i18n="p2_h2">Van's DIY & Bastelbedarf</h2>
|
|
<span class="wd-tag wd-tag--lila" data-i18n="p2_art">Onlineshop</span>
|
|
</div>
|
|
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="pf_ausgang">Ausgangslage</h3>
|
|
<p data-i18n="p2_ausgang">Handgemachtes wurde bis dahin über Nachrichten verkauft.</p>
|
|
</div>
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="pf_loesung">Umgesetzte Lösung</h3>
|
|
<p data-i18n="p2_loesung">Ein vollständiger Shop mit Kategorien, Artikeln, Warenkorb und Gutscheincodes.</p>
|
|
</div>
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="pf_ergebnis">Ergebnis</h3>
|
|
<p data-i18n="p2_ergebnis">Artikel werden selbstständig angelegt und gepflegt, ohne Rückfrage und ohne Wartezeit.</p>
|
|
</div>
|
|
|
|
<details class="pfo-mehr">
|
|
<summary data-i18n="pf_details">Details ansehen</summary>
|
|
<div class="pfo-mehr-inhalt">
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="pf_funktionen">Wichtigste Funktionen</h3>
|
|
<ul class="wd-liste">
|
|
<li data-i18n="p2_f1">Kategorien, Artikel und Varianten</li>
|
|
<li data-i18n="p2_f2">Warenkorb und Kasse, auf dem Handy geprüft</li>
|
|
<li data-i18n="p2_f3">Gutscheincodes und Versandregeln</li>
|
|
<li data-i18n="p2_f4">Adminbereich für die eigenständige Artikelpflege</li>
|
|
<li data-i18n="p2_f5">Mehrsprachig</li>
|
|
</ul>
|
|
</div>
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="pf_stil">Stilrichtung</h3>
|
|
<p data-i18n="p2_stil">Dunkel mit warmen Violett- und Rosétönen, passend zum handgemachten Sortiment.</p>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
|
|
<div class="wd-btn-reihe" style="margin-top:1rem">
|
|
<a class="wd-btn wd-btn--zweit wd-btn--klein" href="https://vans-diy-bastelbedarf.com/" target="_blank" rel="noopener" data-i18n="pf_ansehen">Live ansehen</a>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Ehrliche Leerstelle statt erfundener Kundenstimmen. -->
|
|
<div class="wd-notiz wd-auf">
|
|
<p><strong data-i18n="pf_regeln_titel">Was hier bewusst fehlt</strong><br />
|
|
<span data-i18n="pf_regeln_text">Es steht kein einziges Kundenzitat auf dieser Seite. Nicht, weil es keine zufriedenen Kunden gäbe, sondern weil noch niemand ein Zitat geschrieben und freigegeben hat.</span></p>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<section class="wd-abschnitt wd-abschnitt--gehoben">
|
|
<div class="wd-container wd-container--schmal" style="text-align:center">
|
|
<h2 data-i18n="pf_cta_h2">Soll deins das dritte sein?</h2>
|
|
<p class="wd-lead" data-i18n="pf_cta_p">Ob dein Projekt hier später auftaucht, entscheidest ausschließlich du — die Aufnahme ins Portfolio ist von der Veröffentlichung deiner Seite getrennt und braucht deine ausdrückliche Erlaubnis.</p>
|
|
<div class="wd-btn-reihe" style="justify-content:center">
|
|
<a class="wd-btn wd-btn--haupt" href="/webdesign/anfrage.html" data-i18n="nav_anfrage">Projekt anfragen</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<div id="wd-fuss"></div>
|
|
|
|
<script src="/assets/js/i18n-wd-portfolio.js?v=20260823wd9"></script>
|
|
<script src="/assets/js/wd-core.js?v=20260823wd9"></script>
|
|
</body>
|
|
</html>
|