Portfolio: zwei Projekte nebeneinander

Die Kacheln nahmen bisher die volle Breite ein -- ueber 1180 Punkte pro
Stueck. Jetzt stehen zwei nebeneinander, jede etwa 574 Punkte breit.

ZWEI UMWEGE, DIE NICHT FUNKTIONIERT HABEN

Zuerst stand hier auto-fit mit einer Mindestbreite von 420 Punkten. Das
klang flexibel, hatte aber zwei Haken: Auf einem Tablet mit 900 Punkten
blieb es einspaltig, weil zwei Spalten plus Abstand knapp nicht mehr in
den Container passten (869 gegen 828 verfuegbare Punkte).

Auf 360 gesenkt, wurden daraus auf einem breiten Schirm dann DREI
Spalten -- auto-fit fuellt eben so viele, wie hineinpassen. Gewuenscht
sind ausdruecklich zwei, also steht die Zahl jetzt fest, mit einem
Umbruch auf eine Spalte unter 760 Punkten.

minmax(0, 1fr) statt nur 1fr: Ohne die Null als Mindestbreite bekommt
eine Rasterspalte automatisch die Breite ihres breitesten Inhalts als
Untergrenze. Ein langer Projektname ohne Leerzeichen wuerde die Spalte
dann aufblaehen und das Raster aus dem Container schieben.

WAS SICH NEBENBEI VON SELBST ERLEDIGT

Der Kippwinkel haengt an der Kachelgroesse. Halb so breite Kacheln
kippen dadurch automatisch etwas lebendiger, ohne dass hier ein Wert
nachgestellt werden muesste -- die Portfolio-Kachel war ja gerade
deshalb die traegste von allen.

Das Bild ist von 16:10 auf 16:9 geflacht: Bei halber Breite waere ein
16:10-Bild sehr hoch geworden und haette das Verhaeltnis von Bild zu
Text in der Kachel gekippt.

Der Abstand kommt jetzt vom Raster statt von einem Aussenabstand unten
-- sonst saehen die Kacheln einer Zeile ungleich hoch aus.

GEPRUEFT UEBER SECHS BILDSCHIRMBREITEN

  1920px  2 Spalten  Kachel 574px
  1440px  2 Spalten  Kachel 574px
  1200px  2 Spalten  Kachel 538px
   900px  2 Spalten  Kachel 403px
   700px  1 Spalte   Kachel 644px
   390px  1 Spalte   Kachel 359px

Jeweils mit Gegenprobe, dass nichts seitlich ueberlaeuft. Ein Test auf
nur einer Breite haette den Dreispalten-Fall nie bemerkt.

Geprueft: 310 Pruefungen gruen (Portfolio 31, Bewegung 34, Verwaltung 62,
CRYONOVA 53, Blickfang 13, System 5, Abmelden 16, Abbruch 42,
Angebot 54).

Co-Authored-By: Claude Opus 5 <[email protected]>

webdesign/portfolio.html

@@ -21,7 +21,37 @@
 <link rel="stylesheet" href="/assets/css/main.css?v=20260823wd20" />
 <link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd20" />
 <style>
-  .pfo-projekt { overflow: hidden; padding: 0; margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
+  /* GENAU zwei Projekte nebeneinander.
+
+     Zuerst stand hier auto-fit mit einer Mindestbreite. Das fuellt aber
+     so viele Spalten, wie hineinpassen -- auf einem breiten Schirm
+     waren es drei. Gewuenscht sind ausdruecklich zwei, also steht die
+     Zahl jetzt fest.
+
+     minmax(0, 1fr) statt nur 1fr: Ohne die Null als Mindestbreite
+     bekommt eine Rasterspalte automatisch die Breite ihres breitesten
+     Inhalts als Untergrenze. Ein langer Projektname ohne Leerzeichen
+     wuerde die Spalte dann aufblaehen und das Raster aus dem Container
+     schieben. */
+  .pfo-raster {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: clamp(1.2rem, 2.4vw, 2rem);
+    align-items: start;
+  }
+  @media (max-width: 760px) {
+    /* Darunter waeren zwei Spalten so schmal, dass Ueberschrift und
+       Schilder im Kachelkopf umbrechen. Dann lieber untereinander. */
+    .pfo-raster { grid-template-columns: 1fr; }
+  }
+
+  /* Der Abstand kommt jetzt vom Raster. Ein zusaetzlicher Abstand unten
+     wuerde die Kacheln einer Zeile ungleich hoch aussehen lassen. */
+  .pfo-projekt { overflow: hidden; padding: 0; margin-bottom: 0; }
+
+  /* Bei halber Breite ist ein 16:10-Bild sehr hoch. Etwas flacher
+     gehalten, damit Bild und Text in der Kachel im Verhaeltnis bleiben. */
+  .pfo-raster .pfo-bild { aspect-ratio: 16 / 9; }
   .pfo-bild {
     width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center;
     border-bottom: 1px solid var(--wd-rand);
@@ -84,6 +114,13 @@
     <div class="wd-container">
 
       <!-- ---------------- Projekt 1 ---------------- -->
+      <!-- Zwei Projekte nebeneinander. Der Umbruch auf eine Spalte
+           passiert ueber auto-fit, nicht ueber eine feste Bildschirm-
+           breite: So bricht das Raster genau dann um, wenn eine Kachel
+           schmaler als 420 Punkte wuerde -- unabhaengig davon, wie
+           breit das Fenster gerade ist oder ob spaeter eine Spalte
+           dazukommt. -->
+      <div class="pfo-raster">
       <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"
@@ -340,6 +377,8 @@
       </article>
 
       <!-- Ehrliche Leerstelle statt erfundener Kundenstimmen. -->
+      </div>
+
       <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>

webdesign/sw.js

@@ -34,7 +34,7 @@
    Start alle alten Zwischenspeicher weg. Muss bei jeder Änderung an den
    Dateien unten hochgezählt werden, sonst hängen Nutzer auf einem alten
    Stand fest. */
-const CACHE_NAME = "dogfather-webdesign-v46";
+const CACHE_NAME = "dogfather-webdesign-v47";
 
 /* Bausteine, die die Oberfläche zum Anzeigen braucht. Bewusst KEINE
    HTML-Datei in dieser Liste. */