/* * Schriften, Farb-Custom-Properties und Keyframes aus dem Design-Export. Muss zuerst geladen werden: alles Weitere greift darauf zu. * * Teil des Design-Stylesheets. Die Reihenfolge der Dateien steht in * MenuStylesheets — Kaskade heißt, dass sie zählt. */ /* * Design des SPO-Menüs – aus dem Design-Export übernommen. * Schriften, Keyframes und Farbwerte stammen 1:1 aus SPO-Desktop-Menu.html; * die Assets liegen in Resources/Public/Design/. */ /* * Die Schriften, je Zeichenvorrat eine Datei. * * Welche Datei welchen Vorrat enthält, war beim Übernehmen der Assets * durcheinandergeraten — die Namen stimmten nicht mit dem Inhalt. `unicode-range` * sagte dem Browser, die lateinischen Buchstaben stünden in outfit-latin.woff2, * darin lagen aber die erweiterten; für „Übernachten" fand er dort kein einziges * Zeichen und nahm die nächste Schrift der Kette. Das ganze Menü stand deshalb in * der Systemschrift, und je nach Browser sah das anders aus: Firefox rendert * Segoe UI bei font-weight 500 wie bei 400, Chromium wählt einen anderen Schnitt. * Aufgefallen ist es erst, als die Schrift überhaupt durchkam (die Sperre in * shared/10-overlay.css) — vorher gewann die Hausschrift der Website. * * Nachgesehen wird das nicht am Namen, sondern in der `cmap` der Datei. Gemessen * hat es ein WOFF2-Leser auf Node (brotli ist dort eingebaut); die Bereiche unten * stimmen seither Datei für Datei mit dem Gemessenen überein: * * outfit-latin 190 Zeichen in U+0020–00FF * outfit-latin-ext 103 Zeichen in U+0100–024F * caveat-latin 191 Zeichen in U+0020–00FF * caveat-latin-ext 183 Zeichen in U+0100–024F * caveat-cyrillic U+0301, U+0400–045F, U+0490–0491, U+04B0–04B1, U+2116 * caveat-cyrillic-ext U+0462 aufwärts * * Die beiden kyrillischen Dateien lagen bisher unbenutzt daneben: sie waren als * „latin" und „latin-ext" angesprochen und trugen für Deutsch nichts bei. Jetzt * stehen sie an ihrem Bereich — geladen wird davon nur, was ein Text wirklich * braucht. * * Alle sechs Dateien sind Variable Fonts. Auch das ist gemessen und nicht * angenommen, in der `fvar`-Tabelle und mit demselben WOFF2-Leser: * * outfit-* wght 100–900 * caveat-* wght 400–700 * * Die Angabe im `@font-face` steht deshalb auf der ganzen Achse. Sie ist keine * Beschreibung der Datei, sondern die Zusage, aus der der Browser seine * Zwischenschnitte rechnet: ist sie enger als die Achse, klemmt er auf den * deklarierten Rand, und ein `font-weight: 500` sieht aus wie 400. Vorher stand * Outfit auf 400–800 und Caveat auf 500–700 — beides enger als die Datei. */ @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../Design/Fonts/caveat-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../Design/Fonts/caveat-latin-ext.woff2') format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../Design/Fonts/caveat-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../Design/Fonts/caveat-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../Design/Fonts/outfit-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../Design/Fonts/outfit-latin-ext.woff2') format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* * Die Schrift des Menüs. Als Token, weil sie an zwei Hüllen hängt: an der * Bühne des Editors und an .spo-menu im Frontend. Stand sie nur am Editor — * und das tat sie —, erbte das Menü im Frontend still die Schrift der Site, * und die Kachelbeschriftungen sahen woanders anders aus. * * Vor Outfit standen hier 'Objektiv Mk2' und 'objektiv-mk2': die Schrift des * Design-Exports, ausgeliefert vom Sitepackage aus * /fileadmin/fonts/objektiv-mk2/ und dort auf `body` gesetzt. Sie sind * heraus, und das ist eine Entscheidung über die Schnitte und nicht über das * Aussehen. * * Dort liegen nur 400 und 700. Fallback in CSS geschieht je Zeichen und * nicht je Schnitt: sobald eine Familie das Zeichen deckt, bleibt der * Browser in ihr und nimmt den nächsten vorhandenen Schnitt. Outfit kam nie * zum Zug, und `font-synthesis` erzeugt keinen Zwischenschnitt — es * fälscht nur fett und kursiv. Das Menü verlangt 500 an elf Stellen und 600 * an fünf: 500 rastete auf 400 ein, 600 und 800 auf 700. * * Zu sehen war das nur auf der Live-Site. In der DDEV gibt es kein * /fileadmin/fonts/, die Kette fiel auf Outfit durch, und dort sind alle * Schnitte echt — der Grund, warum es lange niemandem auffiel. * * Outfit deckt als Variable Font die Achse 100–900 (oben gemessen) und * liefert damit 400 bis 700 durchgehend, auch die Stufen, die das CSS erst * morgen braucht. Liegt die Objektiv Mk2 einmal als Variable Font über * dieselbe Achse vor, gehört sie wieder an den Anfang der Kette; ein * statisches Paar 400/700 bringt das Einrasten zurück. */ --spo-font: 'Outfit', system-ui, sans-serif; /* Farben aus dem Design */ --spo-blue-dark: #003C6E; --spo-blue: #025F8D; --spo-blue-live: #0a6aa8; --spo-orange: #ff9d2e; /* * Der orange Verlauf des Mobile-Designs. Er liegt dort auf der Buchen-Fläche * der Aktionsleiste; die orange Kachel kann ihn über ihren Schalter * einschalten (65-button.css). Als Token, damit es im Menü genau einen gibt. */ --spo-orange-gradient: linear-gradient(150deg, #ff960c, #ffad42); /* Helle Karten aus dem Design (Schnellzugriffe) */ --spo-sand-card: #f0ede5; /* Der wärmere Sandton der Angebots-Zeilen in der Buchen-Ebene */ --spo-sand-warm: #FCEBD5; /* Der kräftigere Sandton: Umschalter und Navigations-Karte */ --spo-sand-strong: #E0DAC9; --spo-sand-top: rgba(233, 219, 186, .72); --spo-sand-bottom: rgba(223, 206, 167, .8); /* * Der Verlauf der Kacheln — und er ist nicht derselbe wie der des * Umschalter-Bandes, auch wenn hier bis jetzt ein Token für beide stand. * * Aufgefallen ist es im Vergleich mit der Design-Vorlage ("o background: * linear-gradient(0deg, rgb(0, 60, 110), rgb(2, 95, 141)) nao parece estar * correcto"). Nachgemessen wurde am Bild, Pixel für Pixel, senkrecht durch * die Flächen (der Design-Export liegt nicht im Repository): * * Kachel im Design oben #02527B unten #04233F * Kachel bei uns oben #025F8D unten #003C6E * Band im Design oben #025786 unten #004071 * Band bei uns oben #025887 unten #004173 * * Das Band stimmte also, die Kacheln nicht: sie standen auf den Werten des * Bandes und waren damit heller und flacher als im Entwurf. Waagerecht ist * in beiden Vorlagen nichts zu messen — der Verlauf läuft senkrecht, `0deg` * ist richtig (0deg zeigt nach oben, die erste Farbe liegt also unten). * * Die Werte hier sind gemessen und nicht abgelesen, ±1 je Kanal: sie stammen * von der Kante der Fläche im Bild. Kommt der Export einmal dazu, ist das * die Zeile, die man gegen ihn prüft. */ --spo-tile-gradient: linear-gradient(0deg, #04233F, #02527B); /* * Das gleitende Band des Persona-Umschalters. Dieselbe Richtung, hellere * Töne — und im Design nachgemessen dieselben zwei Werte, die vorher für * alles galten. */ --spo-indicator-gradient: linear-gradient(0deg, #003C6E, #025F8D); /* Design: blurStrength 16, sandOpacity .8, saturate 1.08 */ --spo-glass-blur: 16px; --spo-glass-saturate: 1.08; /* Persona-Farben */ --spo-persona-allein: #003C6E; --spo-persona-zuzweit: #194f7c; --spo-persona-familie: #33638b; --spo-persona-hund: #4c7699; /* * Die Schriftgrößen, die zwischen den beiden Vorlagen wandern. * * Sechs Rollen tragen im Mobile-Design einen anderen Wert als im * Desktop-Design. Bisher standen beide Werte da und ein Breakpoint dazwischen: * bei 761px die Aufschrift des Schreibtischs, bei 760px die des Telefons — * eine 22px-Zeile, die einen Pixel später 18px ist. Jetzt läuft der Weg * dazwischen mit der Breite. * * Verankert sind die Werte der Vorlagen, und `clamp()` hält sie: unten der * Wert des Mobile-Designs bei seinen 402px, oben der des Desktop-Designs bei * 1440px (die Fläche, in der es gezeichnet ist). Dazwischen linear. Größer * als die Vorlage wird nichts, kleiner als die Vorlage auch nicht — die 402px * sind der Boden, darunter bleibt die Schrift lesbar, während die Spalte * weiter schmaler wird. * * Gerechnet ist jede Zeile als Gerade durch die zwei Punkte: * Anstieg = (max - min) / (1440 - 402) * 100vw, Achsenabschnitt so, dass sie * bei 402px durch den Mobile-Wert geht. Nachgerechnet steht daneben. * * Gemessen wird das Fenster und nicht die Spalte. In dem Bereich, der zählt, * ist das dasselbe: unterhalb von etwa 1100px ist die Spalte so breit wie das * Fenster (Sheet-Innenabstand abgerechnet), und darüber deckelt clamp() auf * den Wert des Designs. Auf der Bühne des Editors ist es eine Näherung — die * Bühne ist schmaler als das Fenster, das gilt hier wie beim Spaltenabstand. */ /* * Was jede Aufschrift des Menüs unter 400px abgibt. * * Ausdrücklich gewünscht ("over all the text as to shrink about 2 points * under 400px"). Unterhalb von 400px ist das Gerät schmaler als die Vorlage, * mit der das Design gezeichnet ist (402px) — dort hat keine Zeile mehr die * Breite, für die ihre Größe gewählt wurde. * * Als eine Property und nicht als zweiter Satz Größen in einer Media Query: * die Schriftgrößen des Menüs stehen an 25 Stellen, acht davon hier als * Token und siebzehn bei ihrer Fläche (die Werte, die in beiden Vorlagen * gleich sind und deshalb nie ein Token brauchten). Ein zweiter Satz hätte * alle siebzehn Selektoren ein zweites Mal genannt, und der nächste Wert * wäre an einer der beiden Stellen liegen geblieben. * * Stattdessen rechnet jede Größe ihren eigenen Wert minus diesen Abzug, und * die Schwelle steht an genau einer Stelle (90-responsive.css). Oben ist er * 0px — dann ist `calc(14px - 0px)` derselbe Wert wie vorher. * * Die Einheit gehört zum Wert und nicht zur Rechnung: `calc(14px - 2)` wäre * ungültig und die Angabe fiele weg. Deshalb steht hier `0px` und nicht `0`. */ --spo-text-shrink: 0px; /* Kachel-Aufschrift: 12px (mobil) – 14px (Schreibtisch) */ --spo-text-tile: calc(clamp(12px, 11.23px + 0.193vw, 14px) - var(--spo-text-shrink)); /* Aufschrift der orangen Handlungsfläche: 18 – 22px */ --spo-text-cta: calc(clamp(18px, 16.45px + 0.385vw, 22px) - var(--spo-text-shrink)); /* Ihre zweite Zeile: 11 – 14px */ --spo-text-cta-note: calc(clamp(11px, 9.84px + 0.289vw, 14px) - var(--spo-text-shrink)); /* Aufschrift im Persona-Umschalter: 11.5 – 14px */ --spo-text-persona: calc(clamp(11.5px, 10.53px + 0.241vw, 14px) - var(--spo-text-shrink)); /* Titel des Störers: 16 – 16.5px */ --spo-text-box-title: calc(clamp(16px, 15.81px + 0.048vw, 16.5px) - var(--spo-text-shrink)); /* Aufschrift der Buchen-Fläche in der Leiste: 14 – 15px */ --spo-text-action-cta: calc(clamp(14px, 13.61px + 0.096vw, 15px) - var(--spo-text-shrink)); /* * Die Meldung, und hier ist die Untergrenze nicht die des Designs. * * Beide Vorlagen tragen 15px im Titel und 12.5px in der zweiten Zeile, auch * auf 402px — die Meldung ist die einzige Zeile des Menüs, die zwischen * Schreibtisch und Telefon gar nichts abgibt. Auf einem schmalen Gerät steht * sie damit als der größte Block im Menü: 42px Icon-Fläche plus 14px * Innenabstand oben und unten sind 70px Zeilenhöhe für eine Meldung von * zwei kurzen Zeilen. * * Deshalb geht sie hier unter die Vorlage: die obere Verankerung bleibt der * Wert des Designs bei 1440px, die untere ist gewählt und nicht abgelesen. * Ausdrücklich gewünscht ("spo-notice nao esta a reduzir o tamanho da letra * ... a altura da linha tem de reduzir tambem"). * * Die Höhe der Zeile hängt an drei Werten, und alle drei laufen mit: die * Fläche des Icons, der Innenabstand und die Schrift. Nur die Schrift zu * verkleinern hätte die Zeile so hoch gelassen, wie sie war — die 42px des * Icons sind ihr Maß, nicht der Text. */ /* Titel: 13 – 15px */ --spo-text-notice-title: calc(clamp(13px, 12.23px + 0.193vw, 15px) - var(--spo-text-shrink)); /* Zweite Zeile: 11.5 – 12.5px */ --spo-text-notice-note: calc(clamp(11.5px, 11.11px + 0.096vw, 12.5px) - var(--spo-text-shrink)); /* Fläche des Icons: 34 – 42px im Quadrat */ --spo-notice-icon-size: clamp(34px, 30.9px + 0.771vw, 42px); /* Abstand zwischen Icon und Text: 10 – 13px */ --spo-notice-gap: clamp(10px, 8.84px + 0.289vw, 13px); /* Innenabstand: 12px 14px – 14px 16px */ --spo-notice-pad-block: clamp(12px, 11.23px + 0.193vw, 14px); --spo-notice-pad-inline: clamp(14px, 13.23px + 0.193vw, 16px); } /* Keyframes aus dem Design */ @keyframes spoArrow { 0%, 100% { transform: translate(-50%, 0); opacity: .95; } 50% { transform: translate(-50%, 7px); opacity: .55; } } @keyframes spoTilesIn { 0% { opacity: .3; transform: translateY(7px) scale(.985); } 100% { opacity: 1; transform: none; } } @keyframes spoDown { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(100%); opacity: 0; } } @keyframes spoUp { 0% { transform: translateY(100%); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes spoSheetUp { 0% { transform: translateY(24px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes spoFade { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes spoFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes spoPulse { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(2.6); opacity: 0; } } .spo-scroll::-webkit-scrollbar { width: 0; height: 0; }