/** * s14.de — Galerien der Redaktion * * Vier Muster, alle auf dem KERN-Galerieblock (core/gallery) statt auf * Jetpacks gekachelter Galerie. Warum, steht ausführlich in den Mustern * selbst (patterns/galerie-*.php) — kurz: handgeschriebenes Jetpack-Markup * bricht die Blockvalidierung, und Jetpacks Regel * `.tiled-gallery__item > img` verlangt das Bild als DIREKTES Kind, was der * -Wrapper aus inc/webp.php zerlegt. * * BEIM KERNBLOCK GREIFT DAS NICHT — nachgemessen am 09.09.2026 gegen das * echte Core-Stylesheet: alle vier Regeln, die dort die Bildgröße setzen, * sind Nachfahren-Selektoren („figure.wp-block-image img"), keine * Kind-Selektoren. Dieselbe Galerie mit und ohne gerendert ergab * bei gleichen wie bei gemischten Seitenverhältnissen exakt dieselben Maße. * Die drei Regeln des Kernblocks, die „>" benutzen, zielen auf `a` und `div`, * nicht auf `img`. * * Trotzdem steht unten eine Regel für `picture` — nicht als Reparatur, * sondern damit die eigenen Raster (Dreier, Große) das Bild auch dann * greifen, wenn es eine Ebene tiefer liegt. */ /* Gemeinsame Grundlage aller vier Muster. */ /* * LUECKE 4px — abgemessen: 760 - 504,7 - 251,3 = 4,0. * * RUNDUNG 6px, UND ZWAR NUR AUSSEN. Das war zweimal falsch, bevor es stimmte: * erst ein geratener --s14-radius-tile an jedem Bild, dann gar keine Rundung. * Der zweite Irrtum kam davon, dass ich .tiled-gallery__gallery gemessen habe * — den inneren Kasten. Die Rundung sitzt eine Ebene hoeher. * * Nachgemessen am Beitrag „Airbox im Cabrio", Vorfahrenkette von innen nach * aussen: * img radius 0px * .tiled-gallery__item radius 0px overflow hidden * .tiled-gallery__col / __row radius 0px * .tiled-gallery__gallery radius 0px overflow visible * .wp-block-jetpack-tiled-gallery radius 6px overflow hidden <-- hier * * Also: die vier AUSSENECKEN der Galerie sind rund, alle INNENKANTEN scharf. * Das overflow:hidden ist dabei kein Beiwerk, sondern der ganze Trick — ohne * es wuerden die eckigen Felder ueber die runde Ecke hinausstehen und die * Rundung waere unsichtbar. */ .s14-gal { --s14-gal-luecke: 4px; --s14-gal-radius: 6px; } /* * Die Huelle rundet, nicht die Felder — fuer die drei GALERIE-Muster. * * ZWEITE STELLE, BITTE MITAENDERN: Beim Einzelbild (Muster 1) gibt es keine * Huelle um mehrere Felder, dort traegt das Bild selbst die Rundung. Die Regel * steht weiter unten bei `.s14-gal-einzel img`. Wer hier den Radius aendert, * muss ihn dort auch aendern, sonst rundet Muster 1 anders als die anderen * drei — und das faellt erst im fertigen Beitrag auf. */ .wp-block-gallery.has-nested-images.s14-gal-zwei, .wp-block-gallery.has-nested-images.s14-gal-dreier, .wp-block-gallery.has-nested-images.s14-gal-gross { border-radius: var(--s14-gal-radius); overflow: hidden; } /* * Der -Wrapper soll für das Layout durchsichtig sein. display:contents * nimmt den Kasten aus dem Fluss, das Bild wird damit direktes Rasterkind — * genau das, was die Regeln unten erwarten. Fällt ein Browser darauf zurück, * es nicht zu können, greift die zweite Zeile. */ .s14-gal picture { display: contents; } @supports not (display: contents) { .s14-gal picture { display: block; height: 100%; } } /* ---------- 1 · Einzelbild, volle Spaltenbreite ---------- */ /* * Beim Einzelbild gibt es keine Huelle um mehrere Felder — das Bild selbst ist * die aeussere Kante, also traegt es die Rundung. * * ZWEITE STELLE, BITTE MITAENDERN: Die drei Galerie-Muster runden dagegen die * HUELLE und lassen Felder und Bilder eckig; die Regel steht weiter oben bei * `.s14-gal-zwei, .s14-gal-dreier, .s14-gal-gross`. Beide Stellen tragen * denselben Wert aus --s14-gal-radius, aber an verschiedenen Elementen — wer * nur eine findet, baut einen Unterschied ein, den niemand beabsichtigt hat. */ .s14-gal-einzel img { display: block; width: 100%; height: auto; border-radius: var(--s14-gal-radius); } /* ---------- 2 · Zwei nebeneinander, je 50 % ---------- */ /* * SPEZIFITAET — GEMESSEN, NICHT GESCHAETZT (09.09.2026). * * Core setzt die Breite der Galeriefigur so: * * .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) * { width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px)/2) } * * Das `:not(#individual-image)` ist kein Versehen, sondern Absicht: eine ID im * :not() zaehlt voll zur Spezifitaet. Core steht damit auf (1,3,1) — eine ID, * drei Klassen, ein Element. Eine Themenregel mit fuenf Klassen steht auf * (0,5,1) und VERLIERT, weil eine ID jede Zahl von Klassen schlaegt. * * Nachgemessen: mit der Klassenfassung stand die Figur auf 266,5 px, also * calc(50% - 8px) ihres 549 px breiten Rasterfeldes — das Raster stimmte, die * Figur halbierte sich darin noch einmal. * * Die Regeln unten tragen deshalb dasselbe `:not(#individual-image)` und * stehen damit auf (1,4,1). Kein einziges !important noetig — und wenn Core * die Regel eines Tages aendert, faellt das hier auf, statt von einem * !important verdeckt zu werden. */ .wp-block-gallery.has-nested-images.s14-gal-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s14-gal-luecke); } .wp-block-gallery.has-nested-images.s14-gal-zwei figure.wp-block-image:not(#individual-image) { margin: 0; width: auto; flex: none; } .wp-block-gallery.has-nested-images.s14-gal-zwei figure.wp-block-image:not(#individual-image) img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; } /* * ZWEI BILDER IM DREIER: DANN EIN ZWEIER (09.09.2026). * * Am Beitrag 5101 stand ein Dreier mit zwei Bildern — links das grosse ueber * beide Zeilen, rechts oben eines, rechts unten ein Loch. Das kann ein * Bedienfehler sein, aber stillschweigend hinnehmen soll die Form ihn nicht: * ein Loch sieht aus wie ein Fehler in der Ausgabe, nicht wie eine * Entscheidung des Autors. * * Bei zwei Bildern gilt deshalb die Form des Zweiers — beide gleich gross * nebeneinander. Das ist die naechstliegende richtige Form, und der Leser * sieht nichts Kaputtes. Im Editor steht dazu eine Meldung * (assets/css/s14-galerie-editor.css), damit Sven es merkt und entscheiden * kann: drittes Bild dazu oder Muster wechseln. * * :has() traegt in allen aktuellen Browsern. Kann es einer nicht, greift die * Regel nicht und es bleibt beim Dreier mit Loch — dieselbe Anzeige wie * bisher, kein neuer Schaden. */ .wp-block-gallery.has-nested-images.s14-gal-dreier:not(:has(> figure.wp-block-image:nth-child(3))) { grid-template-columns: 1fr 1fr; } /* * DIE BREITE MUSS HIER NOCH EINMAL STEHEN — und mit ZWEI Nullen im :not(). * * Core hat fuer „genau zwei Bilder" eine eigene Regel, und sie greift ueber * den Geschwister-Kombinator auf das zweite Bild: * * .wp-block-gallery.has-nested-images.columns-default * figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2) * ~ figure.wp-block-image:not(#individual-image) * { width: calc(50% - gap*.5) } * * Das `:not(#individual-image)` steht darin ZWEIMAL — einmal vor dem ~ und * einmal danach. Die Regel zaehlt damit ZWEI IDs und steht auf (2,7,2). * * GEMESSEN, WIE ES SICH AUSWIRKT: Mit nur einem :not() stand das erste Feld * richtig auf 378 px und das zweite auf 181 — genau die Haelfte seines * Rasterfeldes, und nur das zweite, weil der Kombinator nur dieses trifft. * Ein halbes Loch statt eines ganzen; von aussen sieht das nach einem * Zufallsfehler aus. * * Deshalb steht `:not(#individual-image)` hier doppelt. Das ist keine * Schreibschlamperei, sondern dieselbe Waehrung, in der Core rechnet. */ .wp-block-gallery.has-nested-images.s14-gal-dreier:not(:has(> figure.wp-block-image:nth-child(3))) figure.wp-block-image:not(#individual-image):not(#individual-image):nth-child(1), .wp-block-gallery.has-nested-images.s14-gal-dreier:not(:has(> figure.wp-block-image:nth-child(3))) figure.wp-block-image:not(#individual-image):not(#individual-image):nth-child(2) { grid-area: auto; width: auto; flex: none; margin: 0; } .wp-block-gallery.has-nested-images.s14-gal-dreier:not(:has(> figure.wp-block-image:nth-child(3))) figure.wp-block-image:not(#individual-image) img { height: auto; aspect-ratio: 3 / 2; } /* * ---------- 3 · Dreier: links quer und gross, rechts zwei gestapelt ---------- * * ABGEMESSEN AN DEN LIVE-BEITRAEGEN, nicht geschaetzt (325ix Trockeneis und * E46 Cabrio, Fenster 1280, Spaltenbreite 760): * * links 504,7 x 339,1 V = 1,488 * rechts 251,3 x 167,5 V = 1,500 (zweimal, uebereinander) * Luecke 4,0 px * 167,5 + 4 + 167,5 = 339,0 = Hoehe links * Breitenverhaeltnis 2,008 : 1, links 66,4 % der Breite * * DAS LINKE BILD IST QUER, NICHT HOCH. Die erste Fassung zog ein hochkantes * Bild ueber zwei Zeilen — anderes Bild, anderer Eindruck. * * WER DIE HOEHE VORGIBT: die beiden RECHTEN sind exakt 3:2, das linke ist mit * V = 1,488 leicht beschnitten. Also bekommen die rechten das * aspect-ratio, und das linke fuellt seine beiden Zeilen und schneidet — * nicht umgekehrt. Genau so rechnet Jetpack. * * GENAU DREI BILDER. Ein viertes setzt die Form NICHT fort: die drei Plaetze * sind fest vergeben, ein viertes Bild landet sichtbar darunter statt * stillschweigend in der Reihe. Dazu die Meldung im Editor, siehe * assets/css/s14-galerie-editor.css. */ .wp-block-gallery.has-nested-images.s14-gal-dreier { display: grid; grid-template-columns: 2fr 1fr; gap: var(--s14-gal-luecke); } .wp-block-gallery.has-nested-images.s14-gal-dreier figure.wp-block-image:not(#individual-image) { margin: 0; width: auto; flex: none; } /* Feste Plaetze: erstes Bild links ueber beide Zeilen, zwei und drei rechts. */ .wp-block-gallery.has-nested-images.s14-gal-dreier figure.wp-block-image:not(#individual-image):nth-child(1) { grid-area: 1 / 1 / 3 / 2; } .wp-block-gallery.has-nested-images.s14-gal-dreier figure.wp-block-image:not(#individual-image):nth-child(2) { grid-area: 1 / 2 / 2 / 3; } .wp-block-gallery.has-nested-images.s14-gal-dreier figure.wp-block-image:not(#individual-image):nth-child(3) { grid-area: 2 / 2 / 3 / 3; } /* * ACHTUNG, HIER LAG EIN FEHLER (09.09.2026): erst stand `height:100%` auf * ALLEN Bildern, auch auf den rechten. Eine feste Hoehe schlaegt aber * aspect-ratio — die rechten gaben die Zeilenhoehe dann nicht mehr vor, * sondern liessen sich von der Hoehe des linken Bildes strecken. Gemessen kam * V = 0,75 statt 1,5 heraus. * * Deshalb: die RECHTEN bekommen nur das Verhaeltnis und keine Hoehe, das LINKE * nur die Hoehe und kein Verhaeltnis. Damit rechnen die Zeilen von rechts nach * links, so wie Jetpack es tut. */ .wp-block-gallery.has-nested-images.s14-gal-dreier figure.wp-block-image:not(#individual-image) img { display: block; width: 100%; object-fit: cover; } .wp-block-gallery.has-nested-images.s14-gal-dreier figure.wp-block-image:not(#individual-image):nth-child(1) img { height: 100%; } .wp-block-gallery.has-nested-images.s14-gal-dreier figure.wp-block-image:not(#individual-image):nth-child(2) img, .wp-block-gallery.has-nested-images.s14-gal-dreier figure.wp-block-image:not(#individual-image):nth-child(3) img { aspect-ratio: 3 / 2; } /* Ein viertes Bild und weitere: eigene Zeile ueber die volle Breite, sichtbar anders — kein stilles Einreihen. */ .wp-block-gallery.has-nested-images.s14-gal-dreier figure.wp-block-image:not(#individual-image):nth-child(n+4) { grid-column: 1 / -1; } /* * ---------- 4 · Grosse Galerie, gekachelt, letztes Feld ist der Knopf ---------- * * KEIN GLEICHMAESSIGES RASTER, UND KEIN KURZER RHYTHMUS. Die zweite Fassung * hatte einen Fuenfer-Rhythmus — bei 23 Bildern sah man ihn: grosses Feld mit * zwei gestapelten, zwei Halbe, dann wieder dasselbe. Jetzt ein Rhythmus aus * fuenfzehn Bildern, gebaut aus FUENF der Zeilenformen, die am 325ix-Beitrag * tatsaechlich vorkommen. Innerhalb der ersten zehn Felder wiederholt sich * damit nichts. * * ZWOELF SPALTEN statt sechs — nur damit gehen alle gemessenen Formen auf. * Bei Spaltenbreite 760 und Luecke 4 ist eine Spalte 59,67 px: * * A 8 Spalten ueber zwei Zeilen + 4 + 4 505,3 · 250,7 · 250,7 * B 5 + 2 + 5 314,3 · 123,3 · 314,3 * C 4 + 4 + 4 250,7 dreimal * D 6 + 6 378 zweimal * E 3 + 3 + 3 + 3 187 viermal * * Live gemessen waren: 505+251/251 · 307+137+307 · 250,7x3 · 378x2 · 187x4. * A, C, D und E treffen das auf unter einem Pixel; B liegt bei 314/123 gegen * 307/137 — die Zwoelfteilung gibt es nicht genauer her, und die Form (breit, * schmal-hochkant, breit) ist dieselbe. * * Das zehnte Bild faellt damit in Form D und ist 378x252 gross — reichlich * Platz fuer den Knopf. * * Wie beim Dreier gilt: die Bilder mit festem Verhaeltnis geben die * Zeilenhoehe vor, die fuellenden bekommen height:100% und kein Verhaeltnis. * Umgekehrt schlaegt die Hoehe das Verhaeltnis und die Zeile rechnet falsch. */ /* * ---------- 4 · Grosse Galerie: Mosaik aus Zeilen und Spalten ---------- * * ZWEI STUFEN, WIE IM VORBILD (gemessen an 41 Zeilen aus vier Live- * Beitraegen): Eine Zeile besteht aus SPALTEN, und eine Spalte kann mehrere * Bilder UEBEREINANDER tragen. Erst dadurch entsteht das Mosaik — eine * Fassung, die nur nebeneinanderstellt, bleibt flach. * * DIE RECHNUNG STEHT IM PHP (inc/galerie.php). Hier steht nur, wie das * Ergebnis getragen wird: * --s14-b Anteil der Spalte an der Zeilenbreite * --s14-r Wirkverhaeltnis der Spalte (fuer schmale Schirme) * --s14-v Verhaeltnis des einzelnen Bildes * * KEIN BILD WIRD GEGEN SEIN FORMAT BESCHNITTEN: die Figur bekommt das * Verhaeltnis des Bildes, das darin steht. Ein Hochformat steht nie * gestapelt, sondern allein in seiner Spalte — gestapelt werden die * Querformate daneben, damit ihre Spalte schmal genug wird. * * RUECKFALL OHNE RECHNUNG: Ohne Huellen (eine alte Galerie im * Zwischenspeicher, ein Bild ohne Masse) greifen die Regeln ganz unten — * dann stehen die Figuren wie bisher nebeneinander und brechen um. */ .wp-block-gallery.has-nested-images.s14-gal-gross { display: flex; flex-direction: column; /* * nowrap IST HIER PFLICHT, und das ist gemessen (09.09.2026). * * WordPress schreibt an den Galerieblock die Klasse `is-layout-flex` * und gibt dazu inline aus: * * .is-layout-flex { flex-wrap: wrap; align-items: center; } * * Zusammen mit flex-direction: column bedeutet das: Spaltenfluss MIT * Umbruch bei unbestimmter Hoehe. Der Browser bricht dann nach jeder * Zeile um, statt sie zu stapeln — die Huellen fallen auf null zusammen * und die Figuren ragen heraus. * * GEMESSEN AM ECHTEN STILBLATTSATZ: Galerie 12 px, Zeile 4 px, Spalte * 4 px, Figur 337 px. Mit flex-wrap: nowrap: Galerie 770, Zeile 337, * Spalte 337. Nichts anderes half — weder align-items noch gap. * * Meine eigene Vorrichtung hatte den Fehler NICHT gezeigt, weil ihr die * Klasse is-layout-flex fehlte. Wer hier prueft, nimmt die Klassenliste * des echten Blocks. */ flex-wrap: nowrap; gap: var(--s14-gal-luecke); } .s14-gal-gross .s14-gal-zeile { display: flex; gap: var(--s14-gal-luecke); align-items: stretch; } .s14-gal-gross .s14-gal-spalte { display: flex; flex-direction: column; gap: var(--s14-gal-luecke); flex: 0 0 auto; width: var(--s14-b, auto); } /* * Die Figur traegt ihr Verhaeltnis. Weil die Spaltenbreite so gerechnet ist, * dass die Hoehen einer Spalte zusammen die Zeilenhoehe ergeben, stimmen die * Zeilen von selbst — ohne dass irgendwo eine Pixelhoehe steht, die beim * Verkleinern falsch wuerde. */ .wp-block-gallery.has-nested-images.s14-gal-gross figure.wp-block-image:not(#individual-image) { margin: 0; flex: 0 0 auto; width: 100%; aspect-ratio: var(--s14-v, 1.5); position: relative; /* * inline-size, NICHT size: `container-type: size` verlangt eine feste * Hoehe. inline-size macht die Figur zum Breiten-Container — davon lebt * die Schriftgroesse des Knopfes, die in cqw steht. */ container-type: inline-size; } .wp-block-gallery.has-nested-images.s14-gal-gross figure.wp-block-image:not(#individual-image) img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; } /* * Ohne Zeilenhuellen — Figuren also direkt in der Galerie — wird wieder * gleichmaessig verteilt. Das ist keine gerechnete Zeile, aber eine ganze * Galerie ohne Luecken. */ .wp-block-gallery.has-nested-images.s14-gal-gross > figure.wp-block-image:not(#individual-image) { flex: var(--s14-v, 1.5) 1 calc(var(--s14-v, 1.5) * 150px); width: auto; } .wp-block-gallery.has-nested-images.s14-gal-gross:not(:has(> .s14-gal-zeile)) { flex-direction: row; flex-wrap: wrap; } /* * Eingeklappt: alles ab dem elften Bild weg. Die Regel greift NUR, wenn das * Skript die Klasse gesetzt hat — ohne Skript steht die Galerie vollstaendig * da. Der richtige Ausfall ist ein vollstaendiger Beitrag, nicht zehn von * dreissig Bildern. */ /* * WELCHE Bilder verschwinden, entscheidet das Skript — es misst, wo eine * Zeile endet. Eine feste Regel „ab dem elften" liesse das Knopf-Feld je nach * Bildzahl allein in einer halben Zeile stehen; genau das war bei fuenfzehn * Bildern zu sehen. Hier steht deshalb nur noch, WIE versteckt wird. */ /* * Eingeklappt wird ZEILENWEISE, seit es Zeilen gibt. Mitten in einer Zeile * zu schneiden wuerde sie halb leer stehen lassen — die Spalten sind auf die * volle Breite gerechnet. Die Figurenregel daneben bleibt fuer den Rueckfall * ohne Huellen. */ .wp-block-gallery.s14-gal-gross.ist-eingeklappt .s14-gal-zeile.ist-versteckt { display: none; } .wp-block-gallery.s14-gal-gross.ist-eingeklappt figure.wp-block-image.ist-versteckt { display: none; } /* * DER KNOPF IST DAS LETZTE SICHTBARE FELD, kein Knopf unter der Galerie. * * GROESSE AUS DEM FELD, NICHT GERATEN. Im Live-Beitrag gibt es kein solches * Feld zum Abmessen — dort stehen alle 34 Bilder ohne Einklappen. Also aus den * Feldmassen abgeleitet: das zehnte Feld ist 378x252. Die erste Fassung hatte * 34px, das sind 13,5 % der Feldhoehe und viel zu wenig. Jetzt 19cqw, also * 19 % der FELDBREITE — bei 378 sind das 71,8 px oder 28,5 % der Hoehe. Und * weil es in Container-Einheiten steht, waechst es mit dem Feld mit, statt * auf schmalen Schirmen ueber den Rand zu laufen. * * ABDUNKLUNG 0,66, NICHT 0,58 — nachgerechnet, nicht geschaetzt. Weisser Text * ueber einem WEISSEN Bild ist der schlimmste Fall: * 0,58 -> rgb(116,120,125) 4,4:1 reicht nur fuer grossen Text * 0,66 -> rgb( 97,102,107) 5,8:1 reicht fuer jede Textgroesse * Ueber einem schwarzen Bild sind es 19:1, das war nie das Problem. * Der Schattenwurf faengt zusaetzlich Bilder mit hellen Spitzlichtern ab. */ .s14-gal-mehr { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1em; background: rgba(16, 23, 31, .66); border: 0; cursor: pointer; color: #fff; text-align: center; padding: 0; text-shadow: 0 1px 3px rgba(0, 0, 0, .45); transition: background .18s ease; } .s14-gal-mehr:hover, .s14-gal-mehr:focus-visible { background: rgba(16, 23, 31, .76); } .s14-gal-mehr .zahl { font: 800 italic 19cqw/.95 Kanit, Inter, sans-serif; } .s14-gal-mehr .wort { font: 600 4.2cqw/1.2 Inter, sans-serif; letter-spacing: .04em; } /* Rueckfall fuer Browser ohne Container-Einheiten. */ @supports not (font-size: 1cqw) { .s14-gal-mehr .zahl { font-size: 68px; } .s14-gal-mehr .wort { font-size: 15px; } } /* * DAS AUSFAHREN. Zwei Bewegungen, versetzt: erst geht die Hoehe auf, dann * blenden die nachgereichten Bilder ein. * * DIE HOEHE UEBER height, NICHT UEBER grid-template-rows. Der Kniff mit * 0fr -> 1fr braucht eine Huelle um das, was aufgeht; hier ist die Galerie * aber SELBST das Raster (zwoelf Spalten, Felder mit span), und die Bilder, * die dazukommen, sind Felder darin. Eine Huelle liesse sich nur um die * ganze Galerie legen, und die soll nicht von null aufgehen, sondern von der * Hoehe der ersten zehn Bilder auf die volle. Genau diese zwei Werte misst * das Skript vor und nach dem Aufklappen und setzt sie als height — * gemessen, nicht geraten. Ein max-height waere bei jeder Bildzahl anders * falsch; darum steht hier keines. * * overflow: hidden traegt die Galerie schon (siehe Radius weiter oben) — die * ueberzaehligen Bilder ragen waehrend der Fahrt also nicht heraus. */ .wp-block-gallery.s14-gal-gross.ist-faehrt { transition: height .42s cubic-bezier(.22, .61, .36, 1); will-change: height; } /* * SICHTBAR IST DER NORMALFALL. Hier steht KEIN Zustand, in dem ein Bild * dauerhaft unsichtbar sein kann: `ist-neu` ist der kurze Weg von * durchsichtig nach sichtbar, und das Skript nimmt die Klasse gleich wieder * ab (mit Wecker dahinter, falls requestAnimationFrame ausbleibt). * * WARUM NICHT MEHR ALS KEYFRAME-ANIMATION: Die vorige Fassung war * `animation: … both` mit opacity 0 im from-Zustand. Laeuft eine solche * Animation nicht an, haelt der Fuellmodus die Bilder fuer immer auf 0 — * am Entwurf 5065 genau so beobachtet. Als Uebergang zwischen zwei * Klassenzustaenden kann das nicht passieren: faellt der Uebergang aus, * ist das Bild sofort da. * * DIE VERZOEGERUNG von .16s laesst die Hoehe vorlaufen: erst geht Platz auf, * dann erscheint, was hineingehoert. Ohne sie blenden die Bilder in eine * Flaeche ein, die es noch nicht gibt. */ .wp-block-gallery.s14-gal-gross .ist-neu { opacity: 0; transform: translateY(6px); } .wp-block-gallery.s14-gal-gross .ist-neu.ist-da { opacity: 1; transform: none; transition: opacity .3s ease .16s, transform .3s ease .16s; } @media (max-width: 820px) { /* * SCHMAL WIRD NEU UMGEBROCHEN. Der Server rechnet die Zeilen fuer 760 px * Spaltenbreite; auf einem Telefon stuenden dieselben drei Bilder in * einer Zeile und waeren achtzig Pixel hoch. Hier zaehlt deshalb nicht * die gerechnete Breite, sondern das Verhaeltnis: die Felder wachsen * proportional dazu und brechen um, wo der Platz endet. * * Das geht nur, weil die Rechnung als --s14-b in einer eigenen * Eigenschaft steht und nicht als width im style-Attribut — sonst * braeuchte es hier ein !important gegen die eigene Ausgabe. * * Jedes Bild behaelt auch hier sein Verhaeltnis; die Zeilen sind nur * nicht mehr auf das Pixel buendig, weil die letzte in einer Zeile * wachsen darf. */ /* * Gerechnet ist fuer 760 px Spaltenbreite. Auf einem Telefon stuenden * dieselben vier Spalten nebeneinander und waeren siebzig Pixel hoch. * Hier brechen die Zeilen deshalb um: die Spalten behalten ihr * Wirkverhaeltnis, verteilen sich aber neu und duerfen wachsen. * * Das geht nur, weil die Rechnung in eigenen Eigenschaften steht und * nicht als width im style-Attribut — sonst braeuchte es hier ein * !important gegen die eigene Ausgabe. * * Die Bilder behalten auch hier ihr Format; nur die Zeilen sind nicht * mehr auf das Pixel buendig. */ .s14-gal-gross .s14-gal-zeile { flex-wrap: wrap; } .s14-gal-gross .s14-gal-spalte { width: auto; flex: var(--s14-r, 1.5) 1 calc(var(--s14-r, 1.5) * 120px); min-width: 38%; } /* Halbe Feldbreite, also doppelter cqw-Wert fuer dieselbe Wirkung. */ .s14-gal-mehr .zahl { font-size: 22cqw; } .s14-gal-mehr .wort { font-size: 5cqw; } } @media (prefers-reduced-motion: reduce) { /* * Ohne Bewegung: kein Ausfahren, kein Blenden. Sichtbar bleibt es * trotzdem — `ist-neu` allein wird vom Skript sofort um `ist-da` * ergaenzt, und ohne Uebergang steht der Zielwert augenblicklich da. */ .wp-block-gallery.s14-gal-gross.ist-faehrt { transition: none; } .wp-block-gallery.s14-gal-gross .ist-neu, .wp-block-gallery.s14-gal-gross .ist-neu.ist-da { transition: none; transform: none; } }