/* ============================================================================ NUIT NOIRE INTERNATIONAL — pages.css Die Bildflächen der Inhaltsseiten: „The House", die Reise-Einzelseite und das Reisen-Archiv. Bis hierher zeigte /house/ kein einziges Bild, und die gepflegte Bildstrecke einer Reise (_nni_gallery_ids) wurde nie ausgegeben. Diese Datei kommt NACH private.css und mobile.css in die Kaskade. Wo sie dortige Regeln ablösen muss, trägt der Selektor zusätzlich .nni-body — damit hängt die Wirkung nicht an der Ladereihenfolge, sondern an der Spezifität, und ein späteres Umsortieren der Stylesheets bricht nichts. Es werden ausschliesslich die Werte aus tokens.css verwendet. Keine neue Farbe, keine neue Schrift, kein opacity: 0 ohne .nni-js. Reihenfolge der Abschnitte: 1 The House — Kopffläche 2 The House — zweite Fläche neben dem Zitat 3 Reise — Bildstrecke hinter dem Fliesstext 4 Reisen-Archiv — das Band bekommt eine Bildspalte ========================================================================= */ /* --------------------------------------------------------------------------- 1 · The House — Kopffläche Die Vorlage gibt das Verhältnis je Figur als --nni-ratio mit. Ohne aspect-ratio springt das Layout, sobald das Bild eintrifft. ------------------------------------------------------------------------ */ .page-template-template-house .nni-main .nni-plate--wide { margin-block: clamp(28px, 5vh, 76px); } .page-template-template-house .nni-main .nni-plate .nni-figure { overflow: hidden; border: var(--nni-hair) solid var(--nni-line-soft); } .page-template-template-house .nni-main .nni-plate--wide .nni-figure { aspect-ratio: var(--nni-ratio, 16 / 9); } .page-template-template-house .nni-main .nni-plate .nni-figure img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; } /* --------------------------------------------------------------------------- 2 · The House — zweite Fläche neben dem Zitat Die Fläche steht bewusst beim Zitat und nicht allein zwischen zwei Absätzen: so hat sie ab 64em echten Text neben sich, und das Zitat steht nicht länger für sich in einer leeren Zeile. Fehlt die Option nni_house_plate, fehlt die Klasse --paired, und das Zitat steht wie zuvor über die volle Breite. ------------------------------------------------------------------------ */ .nni-house-pair { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--nni-sp-6); align-items: start; } .nni-house-pair > * { min-width: 0; } .page-template-template-house .nni-main .nni-plate--tall .nni-figure { aspect-ratio: var(--nni-ratio, 4 / 5); } @media (min-width: 64em) { .nni-house-pair--paired { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--nni-sp-7); align-items: center; } /* Das Zitat trägt eine eigene Höchstbreite und sitzt sonst am linken Rand seiner Spalte fest — hier darf es die halbe Spalte ausnutzen. */ .nni-house-pair--paired .nni-quote { max-width: 34ch; } } /* --------------------------------------------------------------------------- 3 · Reise — Bildstrecke hinter dem Fliesstext private.css zwingt jeder Figur dieser Seite 16/9 auf. Für die Strecke ist das falsch: das erste Bild liegt breit, die übrigen stehen hochformatig nebeneinander. Deshalb der längere Selektor. ------------------------------------------------------------------------ */ .nni-gallery__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nni-gap); margin-block-start: var(--nni-gap); } .nni-gallery__grid > * { min-width: 0; } .nni-body.single-nni_journey .nni-main .nni-gallery .nni-figure { margin-block: var(--nni-sp-5) 0; overflow: hidden; border: var(--nni-hair) solid var(--nni-line-soft); } .nni-body.single-nni_journey .nni-main .nni-gallery .nni-gallery__lead { aspect-ratio: var(--nni-ratio, 3 / 2); } .nni-body.single-nni_journey .nni-main .nni-gallery .nni-gallery__item { margin-block: 0; aspect-ratio: var(--nni-ratio, 4 / 5); } .nni-body.single-nni_journey .nni-main .nni-gallery .nni-figure img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; } @media (min-width: 48em) { .nni-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* --------------------------------------------------------------------------- 4 · Reisen-Archiv — das Band bekommt eine Bildspalte Belegter Fehler: parts/card-journey.php gibt seit jeher eine Figur aus, das Band in private.css rechnet aber mit den Spalten 7ch / 1fr / 30ch und legt nichts davon ausdrücklich. Die automatische Verteilung setzt die Figur in die 7ch schmale erste Spalte, den Titel in die 30ch schmale dritte, und die Ortsangaben rutschen in die zweite Zeile. Solange keine Reise ein Beitragsbild trug, fiel das nicht auf — mit Bildern ist es unübersehbar. Deshalb wird ab 48em jedes der sechs Kinder ausdrücklich gesetzt. Damit ist die Verteilung nicht mehr von der Reihenfolge im Markup abhängig. ------------------------------------------------------------------------ */ .nni-body.post-type-archive-nni_journey .nni-main .nni-grid .nni-card__figure { aspect-ratio: var(--nni-ratio, 3 / 2); overflow: hidden; margin: 0; } .nni-body.post-type-archive-nni_journey .nni-main .nni-grid .nni-card__figure img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; } /* Reisen ohne Bild: die Platzhalterfläche bringt ihr eigenes Verhältnis mit und würde sonst aus der Figur herausragen. Unter 64em erledigt das bereits mobile.css; hier gilt es für jede Breite. */ .nni-body.post-type-archive-nni_journey .nni-main .nni-grid .nni-card__figure > .nni-figure__ph { aspect-ratio: auto; block-size: 100%; } @media (min-width: 48em) { .nni-body.post-type-archive-nni_journey .nni-main .nni-grid .nni-card__link { grid-template-columns: clamp(150px, 18vw, 260px) minmax(0, 1fr) minmax(0, 22ch); align-items: start; column-gap: clamp(24px, 4vw, 64px); row-gap: var(--nni-sp-3); } .nni-body.post-type-archive-nni_journey .nni-main .nni-grid .nni-card__figure { grid-column: 1; grid-row: 1 / span 4; align-self: start; } .nni-body.post-type-archive-nni_journey .nni-main .nni-grid .nni-card__idx { grid-column: 2; grid-row: 1; } .nni-body.post-type-archive-nni_journey .nni-main .nni-grid .nni-card__title { grid-column: 2; grid-row: 2; } .nni-body.post-type-archive-nni_journey .nni-main .nni-grid .nni-card__text { grid-column: 2; grid-row: 3; } .nni-body.post-type-archive-nni_journey .nni-main .nni-grid .nni-card__more { grid-column: 2; grid-row: 4; } .nni-body.post-type-archive-nni_journey .nni-main .nni-grid .nni-card__places { grid-column: 3; grid-row: 1 / span 2; } } /* --------------------------------------------------------------------------- 6 · Reise- und Concierge-Seite — Abstand zwischen den Abschnitten Die Abstandsregel des Hauses greift auf `.nni-main > section|article|aside` (private.css:435). Auf der Reiseseite liegen alle Abschnitte eine Etage tiefer, nämlich in `
` — sie bekamen deshalb null. Gemessen bei 1440×900: „Photographs", „How it runs" und „A note" begannen jeweils exakt dort, wo der Block davor endete, während die CTA darunter 160 px Luft hatte. Denselben Abstand wie draussen zu nehmen wäre zu viel: dort trennt er ganze Seitenteile, hier Abschnitte einer Seite. Ein Schritt kleiner trägt. ------------------------------------------------------------------------ */ .nni-single--journey > .nni-section, .nni-single--journey > .nni-note, .nni-single--concierge > .nni-section { padding-block-start: var(--nnip-step-sm); } /* Faktenzeile und Notiz laufen auf dieselbe Textbreite wie der Fliesstext. */ .nni-single--journey .nni-facts { max-width: var(--nni-max-text); } /* --------------------------------------------------------------------------- 7 · Bildstrecke der Reise — ein Bild, eine Spalte Das Raster stand fest auf zwei Spalten. Jede Reise führt aber genau ein Rasterbild (das erste liegt breit darüber), sodass rechts daneben 670 px schwarze Fläche standen — auf schwarzem Grund liest sich das als Bild, das nicht geladen hat. ------------------------------------------------------------------------ */ @media (min-width: 48em) { .nni-gallery__grid:has(> :only-child) { grid-template-columns: minmax(0, 1fr); max-width: calc((var(--nni-max) - var(--nni-gap)) / 2); } } /* --------------------------------------------------------------------------- 8 · Kopfbild der Reise — das übergebene Verhältnis gilt private.css:1035 zwingt jeder Figur dieser Seite 16/9 auf; die Vorlage übergibt 3/2. Von einer 1400×1125-Aufnahme schnitt das rund 30 % der Höhe weg, und der Wert im Template weckte den falschen Eindruck, er steuere etwas. Jetzt gilt, was übergeben wird — der Rückfall bleibt 16/9. ------------------------------------------------------------------------ */ .nni-body.single-nni_journey .nni-main .nni-figure { aspect-ratio: var(--nni-ratio, 16 / 9); } /* Im Abschnitt „Where we are" standen Überschrift, Ortszeile und Absatz mit 4 und 6 px Glyphenabstand übereinander — drei Zeilen, die wie eine aussehen. */ .nni-where > * + * { margin-block-start: var(--nni-sp-5); } /* --------------------------------------------------------------------------- 9 · Reisen-Archiv auf dem Telefon — der Kartenkopf braucht Luft Auf dem Schreibtisch steht die Ortszeile in einer eigenen Spalte und die Nummer hat 12 px Abstand zum Titel. Auf dem Telefon fällt alles in eine Säule, und die Glyphenkästen überlappten: Nummer → Titel −4 px, Titel → Ortszeile −1 px. Vier Zeilen ohne Abstand lesen sich als eine Wand. ------------------------------------------------------------------------ */ @media (max-width: 47.999em) { .nni-body.post-type-archive-nni_journey .nni-main .nni-grid .nni-card__title { margin-block-start: 18px; } .nni-body.post-type-archive-nni_journey .nni-main .nni-grid .nni-card__places { margin-block-start: 16px; } .nni-body.post-type-archive-nni_journey .nni-main .nni-grid .nni-card__text { margin-block-start: 16px; } }