Logo-Downloadseite /logo mit Erzeuger-Skript
Damit die Abteilungen das Wappen selbst holen können, statt jedes Mal zu fragen: drei Varianten (farbig, einfarbig schwarz, einfarbig weiß) in SVG, PDF, PNG und JPG, dazu ein ZIP über alles und die Vereinsfarben. Verlinkt nur in der Fußzeile. Bisher lag das Logo genau einmal im Projekt, als eine einzige SVG. Es gab kein PNG, kein JPG, kein PDF und keine einfarbige Fassung. bin/logo-build.php erzeugt alle Dateien aus einer Master-SVG unter storage/logo-quellen/. Gerastert wird mit headless Chrome, weil GD kein SVG lesen kann und weder Inkscape noch rsvg-convert noch ImageMagick verfügbar sind; das PDF ist dabei echter Vektor. Das Skript läuft einmalig lokal, nichts davon im Request-Pfad. bin/preflight.php meldet als Fehler, wenn eine Download-Datei fehlt: die Komponente ließe den Knopf sonst still weg. Die beiden einfarbigen Fassungen sind exakte Negative voneinander, nur Linien, alle Flächen frei. EPS gibt es bewusst nicht, dafür fehlt jedes Werkzeug; SVG und PDF decken die Druckereien ab. Frühere Vereinslogos sind vorbereitet, aber im Projekt liegt bisher kein einziges historisches Wappen vor. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01J9mubC8gtpjtJntbhSJBRS
This commit is contained in:
@@ -5325,6 +5325,211 @@ a.match-row__link:hover {
|
||||
}
|
||||
}
|
||||
|
||||
/* === logo-downloads (Logo-Seite: Varianten, Paket, Farben) === */
|
||||
.logo-downloads__head {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo-downloads__intro {
|
||||
max-width: 60ch;
|
||||
margin: var(--space-s) auto 0;
|
||||
}
|
||||
|
||||
.logo-downloads__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
|
||||
gap: var(--space-l);
|
||||
margin: var(--space-3xl) 0 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.logo-card {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
background: var(--clr-glass-bg);
|
||||
border: 1px solid var(--clr-glass-border);
|
||||
border-radius: var(--radius-card);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Die Vorschaufläche zeigt, WORAUF die Variante gehört: Karo heißt „der Grund ist
|
||||
frei", die dunkle Fläche steht für den dunklen Untergrund, auf dem die weiße
|
||||
Fassung gedacht ist. Ohne sie wäre das weiße Wappen schlicht unsichtbar. */
|
||||
.logo-card__preview {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: var(--space-l);
|
||||
}
|
||||
|
||||
.logo-card__preview--karo {
|
||||
background-color: var(--clr-checker-b);
|
||||
background-image: conic-gradient(
|
||||
var(--clr-checker-a) 25%, transparent 0 50%,
|
||||
var(--clr-checker-a) 0 75%, transparent 0
|
||||
);
|
||||
background-size: 22px 22px;
|
||||
}
|
||||
|
||||
.logo-card__preview--dunkel {
|
||||
background-color: var(--clr-bg-deep);
|
||||
}
|
||||
|
||||
.logo-card__img {
|
||||
display: block;
|
||||
width: auto;
|
||||
height: 170px;
|
||||
}
|
||||
|
||||
.logo-card__body {
|
||||
display: grid;
|
||||
grid-template-rows: auto auto 1fr;
|
||||
gap: var(--space-2xs);
|
||||
padding: var(--pad-card);
|
||||
}
|
||||
|
||||
.logo-card__title {
|
||||
margin: 0;
|
||||
font-size: var(--fs-650);
|
||||
letter-spacing: var(--ls-heading);
|
||||
}
|
||||
|
||||
.logo-card__text {
|
||||
margin: 0;
|
||||
font-size: var(--fs-400);
|
||||
color: var(--clr-text-muted);
|
||||
}
|
||||
|
||||
/* Eine Zeile je Format über die volle Kartenbreite: vorher liefen die Knöpfe als
|
||||
umbrechende Reihe, wodurch in jeder Karte eine andere Treppe entstand (zwei oben,
|
||||
dann einer, dann zwei). Untereinander sind sie gleich breit, in allen drei Karten
|
||||
auf derselben Höhe und am Handy ohnehin die einzige sinnvolle Form. */
|
||||
.logo-card__files {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: var(--space-3xs);
|
||||
margin: var(--space-s) 0 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* (0,2,0), damit die Regeln gegen die .btn-Basis aus utilities.css gewinnen:
|
||||
utilities.css laedt spaeter, bei gleicher Spezifitaet bliebe zentriert stehen. */
|
||||
.btn.logo-card__btn {
|
||||
justify-content: flex-start;
|
||||
gap: var(--space-2xs);
|
||||
width: 100%;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
/* Format links am Icon, Größe rechts an der Kante: so stehen die Angaben in allen
|
||||
Zeilen untereinander und die Zeile bleibt als Ganzes lesbar. */
|
||||
.logo-card__meta {
|
||||
margin-left: auto;
|
||||
font-size: var(--fs-300);
|
||||
color: var(--clr-text-muted);
|
||||
}
|
||||
|
||||
.logo-card__btn:hover .logo-card__meta {
|
||||
color: var(--clr-text);
|
||||
}
|
||||
|
||||
/* Der ZIP-Knopf sitzt unter dem Raster, in derselben Sektion: „alles davon" gehört
|
||||
direkt unter das, worauf es sich bezieht. Eine eigene Sektion mit Überschrift war
|
||||
gebaut und ist am 17.09.2026 wieder raus (Entscheidung Felix). */
|
||||
.logo-downloads__paket {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--space-2xs);
|
||||
margin: var(--space-3xl) 0 0;
|
||||
}
|
||||
|
||||
.logo-downloads__paket-meta {
|
||||
font-size: var(--fs-400);
|
||||
color: var(--clr-text-muted);
|
||||
}
|
||||
|
||||
.logo-farben__head {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo-farben__intro {
|
||||
max-width: 60ch;
|
||||
margin: var(--space-s) auto 0;
|
||||
}
|
||||
|
||||
.logo-farben__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: var(--space-l);
|
||||
margin: var(--space-3xl) 0 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.logo-farbe {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
background: var(--clr-glass-bg);
|
||||
border: 1px solid var(--clr-glass-border);
|
||||
border-radius: var(--radius-card);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Die Farbfläche kommt aus dem Token, die JSON nennt nur den Namen — ein
|
||||
style-Attribut waere hier der naheliegende Weg und wird von der CSP verworfen. */
|
||||
.logo-farbe__swatch {
|
||||
display: block;
|
||||
height: 90px;
|
||||
border-bottom: 1px solid var(--clr-glass-border);
|
||||
}
|
||||
|
||||
.logo-farbe__swatch--accent { background: var(--clr-accent); }
|
||||
.logo-farbe__swatch--black { background: #000000; }
|
||||
.logo-farbe__swatch--bg { background: var(--clr-bg); }
|
||||
.logo-farbe__swatch--white { background: #ffffff; }
|
||||
|
||||
.logo-farbe__body {
|
||||
padding: var(--pad-card);
|
||||
}
|
||||
|
||||
.logo-farbe__name {
|
||||
margin: 0 0 var(--space-xs);
|
||||
font-size: var(--fs-650);
|
||||
letter-spacing: var(--ls-heading);
|
||||
}
|
||||
|
||||
.logo-farbe__werte {
|
||||
display: grid;
|
||||
gap: var(--space-3xs);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.logo-farbe__werte > div {
|
||||
display: flex;
|
||||
gap: var(--space-2xs);
|
||||
font-size: var(--fs-400);
|
||||
}
|
||||
|
||||
.logo-farbe__werte dt {
|
||||
min-width: 4.5em;
|
||||
color: var(--clr-text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--ls-wide);
|
||||
}
|
||||
|
||||
.logo-farbe__werte dd {
|
||||
margin: 0;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.logo-farbe__hinweis {
|
||||
margin: var(--space-s) 0 0;
|
||||
font-size: var(--fs-400);
|
||||
color: var(--clr-text-muted);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
FROSTED GLASS — globaler Look für alle Glas-Oberflächen.
|
||||
EINZIGE Stelle für Blur + Ruhe-Glow (DRY statt 28× wiederholt).
|
||||
@@ -5355,6 +5560,8 @@ a.match-row__link:hover {
|
||||
.stadionzeitung-card,
|
||||
.department-choice__card,
|
||||
.legal__card,
|
||||
.logo-card,
|
||||
.logo-farbe,
|
||||
.fee-table,
|
||||
.league-table,
|
||||
.membership-card,
|
||||
@@ -5382,6 +5589,8 @@ a.match-row__link:hover {
|
||||
.stadionzeitung-card,
|
||||
.department-choice__card,
|
||||
.legal__card,
|
||||
.logo-card,
|
||||
.logo-farbe,
|
||||
.membership-card,
|
||||
.sportheim-bento__addr,
|
||||
.form {
|
||||
|
||||
Reference in New Issue
Block a user