/* ========================================================================= nachweise.css — Das Dokumentenraster und der Viewer ------------------------------------------------------------------------- Reys Vorgabe vom 26.08., zweite Runde: "Kachel auf a4. Streifen unten in unserer Gruen Farbe darueber. Darauf Titel in weisz." und "Kategorie oberhalb der Kacheln. Keine Wiederholung des kategoriennamens sondern weiterlaufender unterstrich bis Ende der Kategorie." ========================================================================= */ /* --- Die Reihe der Kategorien ------------------------------------------ DIE KACHELN SIND IN JEDER GRUPPE GLEICH BREIT, und das ist der ganze Trick an dieser Zeile. Naiv gebaut (jede Gruppe bekommt Platz nach Anzahl) waeren sie es NICHT: Eine Dreiergruppe traegt zwei Zwischenraeume, eine Einzelgruppe keinen — die Kacheln der grossen Gruppe wuerden breiter. Deshalb wird die Kachelbreite EINMAL fuer die ganze Zeile gerechnet: volle Breite minus alle Zwischenraeume, geteilt durch die Zahl aller Kacheln. Wie viele es sind, setzt js/nachweise.js als --gesamt und --gruppen; alles Weitere rechnet der Browser. */ .nachweise-gruppen { --spalt: var(--raum-5); /* zwischen zwei Kacheln derselben Kategorie */ --luft: var(--raum-8); /* zwischen zwei Kategorien - "Platz zum Atmen" */ --abzug: calc((var(--gesamt) - var(--gruppen)) * var(--spalt) + (var(--gruppen) - 1) * var(--luft)); --kachel: calc((100% - var(--abzug)) / var(--gesamt)); display: flex; align-items: start; gap: var(--luft); } .nachweis-gruppe { flex: 0 0 calc(var(--kachel) * var(--n) + var(--spalt) * (var(--n) - 1)); min-inline-size: 0; } /* Der Name steht EINMAL ueber seiner Gruppe, und der Unterstrich laeuft bis ans Ende der Gruppe — dadurch sagt die Linie, wie weit die Kategorie reicht, ohne dass der Name an jeder Kachel wiederholt werden muss. */ .nachweis-gruppe-titel { /* Schrift aus .etikett (Regel 5). Hier nur die Linie, die bis ans Ende der Kategorie laeuft. */ margin: 0 0 var(--raum-4); padding-block-end: var(--raum-3); border-block-end: 2px solid var(--vorlage-bindung); } .nachweis-gruppe-kacheln { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--spalt); } /* Auf schmalen Schirmen stehen die Kategorien untereinander. Die Rechnung oben gilt dann nicht mehr — eine Zeile aus fuenf Kacheln passt dort ohnehin nicht, und Gruppen nebeneinander waeren fingerbreit. */ /* DIE UMBRUCHPUNKTE SIND GEMESSEN, NICHT GEWAEHLT (26.08.). Reys Ansage: "Ich will keine zwei Zeilen." Was eine Kachel dafuer mindestens braucht, entscheidet der laengste Titel — hier "Allg. Hochschulreife". Nachgemessen, Zeilen je Fensterbreite: 1920 Kachel 283 px eine Zeile 1600 Kachel 256 px eine Zeile 1440 Kachel 204 px ZWEI Zeilen <- deshalb nicht 88rem 1280 gestapelt eine Zeile Ab 96rem (1536 px) bleibt die Kachel ueber 250 px, und das reicht. */ @media (max-width: 96rem) { .nachweise-gruppen { flex-direction: column; gap: var(--raum-7); /* MUSS MIT UMGESTELLT WERDEN. `align-items` regelt die Querachse, und die dreht sich mit der Richtung: In der Zeile heiszt start "oben ausrichten" (richtig), in der Spalte "auf Inhaltsbreite schrumpfen". Gemessen waren die Gruppen dadurch 200 px breit in einem 350 px breiten Container. */ align-items: stretch; } .nachweis-gruppe { flex: 1 1 auto; } .nachweis-gruppe-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 48rem) { .nachweis-gruppe-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* EINE SPALTE AUF DEM TELEFON. Bei zwei Kacheln nebeneinander misst das Schild innen 87 px — dort passt kein einziger der Titel in eine Zeile, auch "Lebenslauf" nicht. Eine Spalte gibt der Kachel die volle Breite, und nebenbei ist das auf einem Telefon ohnehin die richtige Form: ein Dokument nach dem anderen, gross genug, um etwas zu erkennen. */ @media (max-width: 30rem) { .nachweis-gruppe-kacheln { grid-template-columns: minmax(0, 1fr); } } /* --- Die Kachel -------------------------------------------------------- DIE GANZE KACHEL IST A4 (Reys Ansage). Vorher war es nur das Blatt, und die Beschriftung darunter machte aus 1:1.414 gemessene 1:1.754 — das Auge liest die Kachel als Dokument, nicht das Blatt darin. Jetzt liegt der Beschriftungsstreifen AUF dem Blatt, und das Maszverhaeltnis stimmt mit dem ueberein, was man sieht. */ .nachweis { position: relative; display: block; aspect-ratio: 1 / 1.414; min-inline-size: 0; border: var(--rand-fein); background-image: var(--karte-verlauf); box-shadow: var(--karte-schatten); border-radius: var(--radius-l); overflow: hidden; /* Ein Knopf, kein Verweis: Er oeffnet den Viewer und fuehrt nicht weg. Das Browser-Chrom muss weg — dieselbe Falle wie beim Sendeknopf. */ appearance: none; -webkit-appearance: none; padding: 0; font-family: inherit; text-align: start; cursor: pointer; transition: background-image var(--dauer-mittel) var(--kurve-weich), box-shadow var(--dauer-mittel) var(--kurve-weich), transform var(--dauer-mittel) var(--kurve-weich); } .nachweis:hover, .nachweis:focus-visible { background-image: var(--karte-verlauf-hover); box-shadow: var(--karte-schatten-hover); transform: translateY(calc(var(--karte-hub) * -1)); } .nachweis:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; } /* Ohne hinterlegte Datei ist die Kachel kein Knopf, sondern eine Ankuendigung. Sie hebt sich beim Ueberfahren nicht — sonst verspricht sie etwas, was beim Klick nicht passiert. */ .nachweis[disabled] { cursor: default; transform: none; } .nachweis[disabled]:hover { background-image: var(--karte-verlauf); box-shadow: var(--karte-schatten); } /* --- Das Blatt: fuellt die Kachel ganz aus ----------------------------- */ .nachweis-blatt { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; } .nachweis-blatt img { inline-size: 100%; block-size: 100%; object-fit: cover; /* Oben ausgerichtet: Ein Dokument erkennt man am Kopf, nicht an der Mitte. Der Streifen unten verdeckt ohnehin nur den Fusz der Seite. */ object-position: top center; display: block; } .nachweis-fehlt { display: flex; flex-direction: column; align-items: center; gap: var(--raum-3); padding: var(--raum-4); /* Das Schild liegt unten; ohne diesen Ausgleich saesze das Zeichen optisch zu tief. */ padding-block-end: var(--raum-8); text-align: center; } .nachweis-fehlt svg { inline-size: 2.5rem; block-size: 2.5rem; color: var(--feld-hinweis); } /* --- Das Schild -------------------------------------------------------- GLAS, KEINE DECKENDE FLAECHE. Reys Einwand vom 26.08.: "Unten gehoeren eig keine vollflaechigen Streifen hin, sondern unser Glass-Design." Die Rezeptur steht als .glas in komponenten.css, der Ton kommt aus --glas-auf-weiss: Das Schild liegt auf einem fast weiszen Blatt, und dort waere die Cyan-Scheibe der Knoepfe messbar doppelt so bunt. Begruendung und Messwerte in tokens.css. Hier steht nur noch, WO das Schild sitzt und wie es gepolstert ist. */ .nachweis-schild { position: absolute; /* EINGERUECKT STATT BUENDIG (26.08., Reys Ansage): "machen wir zum gleichen Button Muster ohne Buttons zu sein." Vorher lief das Schild als Streifen von Kante zu Kante — das ist eine Fusszeile, kein Schildchen. Jetzt liegt es mit Abstand ringsum auf dem Blatt, wie ein Knopf auf einer Karte liegt. */ inset-inline: var(--raum-4); inset-block-end: var(--raum-4); /* Dieselben Masze wie .schaltflaeche__inhalt in der Senkrechten. In der Waagerechten weniger als dessen 2em: Ein Knopf traegt zwei Woerter, hier steht "Arbeitszeugnis Tec-Repair" auf 283 px Kachelbreite. */ padding: 0.85em 1.25em; text-align: center; /* Und die Form des Knopfes: Rundung ringsum statt der geerbten Ecke, Linie ringsum statt nur oben, und der flache Wurf — Regel 1 und 2 des Formstandards. Die Flaeche selbst kommt aus .glas. */ border-radius: var(--radius-m); filter: var(--knopf-abheben-flach); } /* ES IST KEIN KNOPF, und das soll man merken duerfen. Die ganze Kachel ist der Schalter; das Schild ist ihre Beschriftung. Deshalb faengt es zwar Licht, wenn die Kachel ueberfahren wird (ueber .glas-traeger), hat aber keinen eigenen Zeiger und keinen eigenen Fokusring. */ .nachweis-schild { pointer-events: none; } .nachweis-titel { display: block; /* ueber dem Glanz liegt es durch .glas > * */ /* Groesze, Gewicht, Sperrung und Farbe kommen aus .bedienschrift (komponenten.css) — Regel 5 des Formstandards. Hier steht nur, was dieser eine Ort zusaetzlich braucht. */ overflow-wrap: break-word; /* KEINE RESERVE FUER EINE ZWEITE ZEILE MEHR (26.08.). Sie stand hier, damit die Schilder gleich hoch bleiben, wenn ein Titel umbricht. Seit Reys Ansage "Ich will keine zwei Zeilen" bricht keiner mehr um: Die Titel wiederholen die Kategorie nicht, und die Umbruchpunkte sind so gesetzt, dass die Kachel breit genug bleibt — nachgemessen von 390 bis 2560 px alles einzeilig. Die Reserve haette jedes Schild um eine leere Zeile hoeher gemacht. WENN SPAETER DOCH EINER UMBRICHT, ist das kein Layoutfehler, sondern der Hinweis, den Titel zu kuerzen. */ } /* ========================================================================= Der Viewer ------------------------------------------------------------------------- EIN NATIVES , kein nachgebautes Overlay. Es bringt mit, was man sonst von Hand schreibt und dabei vergisst: Fokusfalle, Esc zum Schlieszen, der Rest der Seite fuer Hilfsmittel stillgelegt. DAS PDF ZEIGT DER BROWSER SELBST (iframe). Eine eigene PDF-Bibliothek waere rund ein Megabyte fuer etwas, das jeder Desktop-Browser eingebaut hat. Der Preis steht im Markup: Auf iOS wird ein eingebettetes PDF nicht zuverlaessig gezeigt — deshalb der Verweis "im neuen Tab oeffnen", und zwar sichtbar und nicht als Notloesung im Kleingedruckten. ========================================================================= */ .nachweis-viewer { inline-size: min(92vw, 60rem); block-size: min(92vh, 56rem); padding: 0; border: var(--rand-fein); border-radius: var(--radius-l); background: var(--grund); color: var(--text); overflow: hidden; } .nachweis-viewer::backdrop { background: var(--schleier); opacity: 0.75; backdrop-filter: blur(4px); } .nachweis-viewer form { display: grid; grid-template-rows: auto 1fr; block-size: 100%; } .nachweis-viewer-kopf { display: flex; align-items: center; gap: var(--raum-4); padding: var(--raum-4) var(--raum-5); border-block-end: var(--rand-fein); } .nachweis-viewer-titel { margin: 0; flex: 1 1 auto; min-inline-size: 0; font-size: var(--schrift-m); font-weight: var(--gewicht-schwer); letter-spacing: var(--sperrung-eng); color: var(--hero-titel); } .nachweis-viewer-weg { color: var(--vorlage-bindung); font-size: var(--schrift-s); font-weight: var(--gewicht-mittel); white-space: nowrap; } .nachweis-viewer-zu { appearance: none; -webkit-appearance: none; border: 0; background: none; padding: var(--raum-2); color: var(--text-leise); font: inherit; font-size: var(--schrift-m); line-height: 1; cursor: pointer; border-radius: var(--radius-s); } .nachweis-viewer-zu:hover, .nachweis-viewer-zu:focus-visible { color: var(--text); } .nachweis-viewer iframe { inline-size: 100%; block-size: 100%; border: 0; display: block; }