`. Damit war `.main-content` selbst ein `.column`, und `#content .column h3` traf ueber diesen Vorfahren JEDE h3 der Kategorieseite. Seit der Umstellung auf `col-12 col-lg-9` ist die Klasse weg -- und die Regel waere still gestorben, und zwar NICHT dort, wo geaendert wurde. Gemessen VOR dem Umbau, `#content .column h3` gegen „hat noch einen anderen .column-Vorfahren": /rosen/ 18 haengen NUR an main-content, 0 anderswo /clematis/ 28 haengen NUR an main-content, 3 anderswo /erde-duenger/ 4 haengen NUR an main-content, 0 anderswo Fuenfzig Ueberschriften waeren auf 1,17em zurueckgefallen. ⚠ DER ERSATZ REICHT GENAU SO WEIT, nachgezaehlt: `#content .column h3` und `#content .main-content h3` trafen vor dem Umbau dieselbe Menge (18 gegen 18, 28 gegen 28). Weiter zu greifen waere derselbe Fehler wie zu fehlen. `#content .column h3` BLEIBT stehen: auf /clematis/ haengen drei Ueberschriften an einem anderen `.column` (`div.large-12.column`), das nicht angefasst wurde. */ #content a.callout h3, #content .section-heading h3, #content .column-1 h3, #content .main-content h3, #content .column h3 { font-size: 1.125rem; } /* `.main-content > h2` trifft heute NICHTS -- aber vor dem Umbau haette `#content .column > h2` eine h2 getroffen, die direktes Kind von `.main-content` ist. Die Zeile haelt die Reichweite, die die Regel hatte, nicht die, die sie zufaellig nutzte. */ #content .hero-text h2, #content .column-1 > h2, #content .row > h2, #content .main-content > h2, #content .column > h2 { font-size: 1.375rem; } #content .callout a.button { font-size: .75rem; } /* ── Platz fuer das Heldenbild ──────────────────────────────────────────── * * Das Bild oben auf der Kategorieseite trug keine Masse. Der Browser kennt * vor dem Laden also kein Seitenverhaeltnis, reserviert keinen Platz -- und * wenn das Bild ankommt, wandert alles darunter nach unten. Gemessen auf * /rosen/, 1280 px, gedrosselt: * * 0,162 bei 1275 ms * div.sgp-row ur sans y 315 -> 764 hoch 436 -> 136 * span.image-caption y 282 -> 731 * * 449 px nach unten, CLS der Seite 0,164 bei einer Schwelle von 0,1. Bei * 375 px faellt es nicht auf, weil das Bild dort schmaler und flacher ist. * * ⚠ DIE ATTRIBUTE GEWINNEN, WENN SIE DA SIND. `sgpHeroMasse.php` setzt * `width`/`height` aus der Bilddatei -- aber nur dort, wo die Datei auch * liegt. Auf `sgpdev` gibt es das ganze Bildverzeichnis nicht, jedes * Teaserbild kommt per 302 von Live. Eine Reparatur, die nur aus PHP * bestuende, waere auf dem Entwicklungsstand nicht nachmessbar -- und was * man nicht nachmessen kann, hat man nicht behoben. * * Deshalb hier der Rueckfall, und ausdruecklich nur fuer den Fall OHNE * Attribut: `:not([width])`. Liegt die Datei, gilt ihr echtes Verhaeltnis; * liegt sie nicht, gilt das Hausmass der Teaserbilder. Gemessen an * bg-rosen.jpg und bg-clematis.jpg, beide 1200x660. * * `object-fit: cover` ist die Versicherung gegen ein Teaserbild mit anderem * Verhaeltnis: es wird dann beschnitten, nicht verzerrt. */ .sgp-row.hero .column-1 .image-wrap img { width: 100%; height: auto; } .sgp-row.hero .column-1 .image-wrap img:not([width]) { aspect-ratio: 1200 / 660; object-fit: cover; } /* ── Der Steckbrief in der Kachel ───────────────────────────────────────── * * Die Angaben unter dem Bild kamen als `
` mit Bootstrap-Spalten: * *
Wuchshoehe
ca. 200 cm
*
Bluetezeit
*
…
* * ⚠ `col-lg-*` MISST DAS FENSTER, NICHT DIE KACHEL. Die Kachel ist zwischen * 221 und 273 px breit -- bei JEDER Fensterbreite. Die lg-Stufe greift also * nie in dem Sinn, in dem sie gemeint war: `col-12` gilt immer, Bluetezeit * steht immer auf einer eigenen Zeile, und ihr Wert stand dort rechtsbuendig * allein. Drei saubere Paare und eine vierte Zeile, die aussah wie ein * Versehen. Dieselbe Falle wie bei den Kachelbreiten der Artikelseite. * * Dazu ein zweites, unsichtbares Problem: `Bluetengroesse` braucht 92 px, * `col-4` gibt bei 229 px Kachelbreite 76. Das Wort lief 16 px in den Wert * hinein -- `overflow` steht auf `visible`, es wurde also nicht abgeschnitten, * sondern ueberlagert. Auf dem Schirm faellt das kaum auf, im Messwert schon. * * Beides loest dieselbe Umstellung: ein Raster aus zwei Spalten, die linke so * breit wie ihr laengstes Wort. Die `col-*`-Breiten werden dafuer * ueberschrieben; das Markup bleibt, wie es ist. * * ⚠ UND DIE HOEHE MUSS MIT. Bisher waren alle Kacheln gleich hoch -- aber aus * Zufall: Bluetezeit nahm IMMER zwei Zeilen, egal wie kurz der Text war. Mit * dem Raster nimmt eine kurze Bluetezeit eine Zeile, und die Kachel wurde * kuerzer als ihre Nachbarn: Fusskante 1746 / 1736 / 1736 statt dreimal * gleich. `height: 100%` laesst die Kachel die Zeilenhoehe fuellen, `mt-auto` * am Fuss haelt den Knopf unten. Gemessen sind danach alle drei gleich -- und * auf der Rosenliste, die gar keinen Steckbrief hat, verschwindet dabei eine * schon vorher vorhandene Unwucht von 4 px. */ .sgp-kachel-innen { height: 100%; } .sgp-kachel-innen .sgp-steckbrief { display: grid; grid-template-columns: max-content 1fr; column-gap: .5rem; row-gap: .1rem; align-items: baseline; } .sgp-kachel-innen .sgp-steckbrief > dt, .sgp-kachel-innen .sgp-steckbrief > dd { width: auto; max-width: none; flex: none; margin: 0; padding-left: 0; padding-right: 0; } .sgp-kachel-innen .sgp-steckbrief > dd { text-align: right; }