/* * Die Hauptnavigation, dort nachgebessert, wo sie sich nicht bedienen liess. * * Nach main.css geladen, wie focus-visible.css und verified-badge.css. Die * Regeln, gegen die hier gearbeitet wird, stehen im Template selbst; das ist * eine Datei von 187 kB, die bei jeder Aktualisierung neu kommt, und eine * Korrektur darin waere beim naechsten Mal weg. Was hier steht, ueberlebt. * * Der Fokusring gehoert ausdruecklich nicht hierher - der wird in * focus-visible.css an einer Stelle fuer die ganze Seite gesetzt, auch fuer * .navbar-toggler. */ /* * Der Burger-Knopf war 24 x 20 px gross. * * .menu-toggle zeichnet drei Striche in 1.5rem x 1.25rem, und .navbar-toggler * setzt padding auf 0 - zusammen ein Ziel, das mit dem Daumen kaum zu treffen * ist. Die Striche bleiben genau so gross, wie sie sind; der Knopf darum * herum waechst auf 44 px, das kleinste Mass, das sich verlaesslich treffen * laesst. Sichtbar aendert sich nichts, nur die Flaeche, die zaehlt. */ .navbar-toggler { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; } /* * .menu-toggle brachte margin-top: 5px mit, um die Striche im alten, * randlosen Knopf auszurichten. In einem zentrierten Knopf sitzt es damit * schief. */ .navbar-toggler .menu-toggle { margin-top: 0; } /* * Die drei mobilen Schalter kommen zurueck in den Fluss. * * Das Theme zieht Lupe, Upload-Pfeil und Anmeldeknopf mit position: absolute * und festen right-Werten (90px, 50px, 20px) aus der Zeile, waehrend der * Burger darin stehen bleibt. Beides zusammen kann nicht passen: die * Trefferflaechen ueberlappten sich, gemessen bei 991px der Anmeldeknopf von * 745 bis 808 und der Burger von 800 bis 844 - acht Pixel, in denen ein Tipp * knapp neben der Glyphe den Login ausloeste. Gemalt lagen zwei Pixel Luft * dazwischen, gefuehlt war es ein Fehlgriff. * * Nachgerechnete Abstaende waeren nur eine andere Zahl an derselben Stelle. * Die vier sind ohnehin Geschwister in derselben Flexzeile - in der Reihenfolge * Logo, Lupe, Anmelden beziehungsweise Upload, Burger -, also stehen sie * jetzt wieder darin. Flex verteilt sie, die Luecke haelt sie auseinander, * und ueberlappen koennen sie sich nicht mehr, weil kein Kasten mehr aus der * Zeile heraussteht. * * margin-inline-start: auto schiebt die Gruppe an die Endkante, wo sie vorher * auch sass - logisch, also im Arabischen an die andere Seite. Die frueheren * RTL-Korrekturen der right-Werte sind damit entfallen; sie hatten nur die * absolute Positionierung gespiegelt, die es hier nicht mehr gibt. */ @media screen and (max-width: 991.98px) { /* * Wenn es eng wird, gibt das Logo nach - nicht die Zeile. * * Der Anmeldeknopf traegt uebersetzten Text, und der ist nicht ueberall * gleich breit: "Login" misst 62px, das arabische "تسجيل الدخول" gut 100. * Bei 360px reichte die Zeile damit nicht mehr, und der Burger rutschte * in eine zweite - derselbe Umbruch, der auf dem Desktop schon das * Chat-Symbol erwischt hatte. * * Die Schalter behalten ihr Mass, das Logo nimmt, was uebrig bleibt. Es * ist das einzige Element hier, das Groesse hergeben kann, ohne dass ein * Ziel kleiner als 44px wird; img-fluid skaliert das Bild darin mit. * * Basis 0, nicht auto: Flex entscheidet ueber den Umbruch anhand der * Basisgroessen und schrumpft erst danach innerhalb der Zeile. Mit * flex-basis: auto zaehlte das Logo mit seinen vollen 140px, die Zeile * galt als zu voll und brach - geschrumpft wurde dann gar nichts mehr. * Mit Basis 0 zaehlt es mit null, die Zeile passt immer, und das Logo * waechst anschliessend in den freien Platz. max-width haelt es bei * seiner natuerlichen Groesse, damit es auf breiteren Schirmen nicht * ueber sie hinauswaechst. */ .navbar > .logo { flex: 1 1 0; min-width: 0; max-width: 140px; /* * Und der Rest der Zeile liegt hinter dem Logo, nicht zwischen den * Schaltern. * * Der Kommentar oben nahm an, das wachsende Logo fuelle die Zeile * und schiebe die Gruppe von selbst an die Kante. Bis 140px stimmt * das - darueber greift max-width, das Logo hoert auf zu wachsen, * und was uebrig bleibt, verteilt das justify-content: space-between * des Themes gleichmaessig auf die Luecken. Gemessen bei 961px: * Logo 125px vom Rand, dann 127, 138 und 139px Abstand zwischen * Lupe, Anmelden und Burger - vier Schalter ueber die ganze Breite * gestreut statt einer Gruppe an der Endkante. * * Eine auto-Marge nimmt sich den freien Platz, bevor * justify-content ihn verteilt. Damit landet er vollstaendig an * einer Stelle, und space-between hat nichts mehr zu verteilen - * ohne dass die Regel des Themes angefasst werden muesste. * * inline-end, nicht right: im Arabischen sitzt das Logo rechts und * die Gruppe links, und zwar ohne eine zweite Regel dafuer. */ margin-inline-end: auto; } } /* * Im eingeklappten Menue braucht jeder Eintrag dieselbe Hoehe. Die Links * waren ueber ihre Schriftgroesse und ein wenig Innenabstand hoch, was bei * kleiner Schrift auf 30 bis 34 px hinauslief. */ @media screen and (max-width: 991.98px) { .primary-menu .primary-menu__link, .primary-menu .primary-menu__sub-link { display: flex; align-items: center; min-height: 44px; } /* * Das geoeffnete Menue rollt nach unten, nicht zur Seite. * * Der gemeldete Querlauf kam nicht von einem zu breiten Eintrag. Die * Liste ist im Menue ein Spaltenkasten (flex-direction: column) und * traegt vom Theme flex-wrap: wrap - in einer Spalte bricht das nicht * in eine neue Zeile um, sondern in eine **zweite Spalte**. Sobald der * Inhalt hoeher wird als der Kasten, wandert der Rest nach rechts * daneben, die Zeilenbreite waechst ueber den Kasten hinaus, und * align-items: center schiebt das Ganze noch um die halbe Differenz * versetzt: gemessen 344px Inhalt in einem 336px-Kasten, alle Eintraege * 8px zu weit rechts. * * Deshalb trat er nur angemeldet auf - erst mit Profilmenue und Chat * ist die Liste hoch genug. Als Gast war in DE, RU und AR bei 390, 375, * 360 und 320px nichts zu sehen. * * Geprueft und verworfen: die Hoehenbegrenzung darunter. Ohne sie * bricht die Liste genauso um; sie ist nicht die Ursache. * * nowrap heisst hier: die Eintraege bleiben in einer Spalte, und der * Kasten rollt senkrecht - was die Regel darunter ohnehin vorsieht. * Kein overflow-x: hidden, das den Ueberlauf nur unsichtbar machen * wuerde. */ .navbar-collapse .primary-menu { flex-wrap: nowrap; } /* * Und der zweite Verursacher: ein waagerechter Aussenabstand an einem * Eintrag, der ohnehin die volle Breite hat. * * Der Chat-Eintrag traegt die Bootstrap-Klasse me-3. In einem * LTR-Build ist das kein logisches margin-inline-end, sondern ein * physisches margin-right: 1rem. In der Spaltenliste sind alle * Eintraege 336px breit; 336 + 16 ergibt 352 in einem 336er-Kasten. * Im Arabischen kommt dazu, dass der physische Rand nicht mitspiegelt * und damit auf der Anfangsseite landet - gemessen: 16px Ueberlauf, mit * der nowrap-Regel allein blieben davon 8. * * margin-inline: 0 statt margin-right: 0, damit es in beiden * Schreibrichtungen dieselbe Aussage ist. !important, weil die * Bootstrap-Utilities selbst !important tragen - ohne das bleibt die * Regel wirkungslos, was hier zuerst passiert ist. * * Eng gefasst: nur direkte Kinder der Liste im aufgeklappten Menue. * In der Desktopzeile behalten die Eintraege ihre Abstaende, dort * stehen sie nebeneinander und brauchen sie. */ .navbar-collapse .primary-menu > li { margin-inline: 0 !important; } /* * Der Chat-Knopf im aufgeklappten Menue war 40 x 40 px. * * Der Stilblock in header.blade.php setzt Hoehe und Breite fest auf 40; * im Menue ist das ein Ziel unter dem Mass, das sich mit dem Daumen * verlaesslich treffen laesst. Die uebrigen Eintraege dort haben ihre * 44px laengst. * * Nicht ueber die Reihenfolge geloest: jener Block wird per @push nach * allen Stilblaettern ausgeliefert und gewaenne bei gleicher * Spezifitaet. Drei Klassen statt einer entscheiden das unabhaengig * davon, wer zuletzt kommt. */ .navbar-collapse .primary-menu .chat-button { width: 44px; height: 44px; } /* * Das eingeklappte Menue kann laenger werden als der Bildschirm - acht * Sprachen, Explore, Lizenz, Kategorien, Konto. Es rollt dann in sich * selbst, statt die Seite unter sich wegzuschieben. */ .navbar-collapse.show { max-height: calc(100vh - 70px); overflow-y: auto; overscroll-behavior: contain; } } /* * Der Desktop-Header ist eine Zeile. Immer. * * Das Theme laesst .primary-menu umbrechen (flex-wrap: wrap), und die Summe * der Eintraege lag bei 1440px um rund zwei Dutzend Pixel ueber der * Menuebreite - gemessen: 1032px Inhalt plus Raender und Luecken in einer * 1111px-Zeile. Umgebrochen ist dann genau das letzte Stueck, das runde * Chat-Symbol, das unter dem Profilbild in einer zweiten Zeile landete. * * Die Loesung haelt nichts mit Pixelpositionen fest. Die Zeile darf nicht * mehr umbrechen, kein Eintrag darf schrumpfen - bis auf einen: die * eingebettete Suche ist das einzige elastische Stueck und gibt ihre Breite * her, bis alles passt. Sprache, Profil und Chat behalten ihr Mass und * bleiben zusammen, in beiden Schreibrichtungen, weil hier nur Flex-Regeln * stehen und keine Kanten. */ @media screen and (min-width: 992px) { .primary-menu { flex-wrap: nowrap; } .primary-menu > li { flex-shrink: 0; } /* * Die Suche fuellt den weissen Raum zwischen Logo und Aktionsgruppe. * * Hier stand max-width: 460px - aus 4.2D.6, wo die Suche nur das eine * schrumpfbare Stueck sein sollte, damit die Zeile nie umbricht. Das * hat sie geleistet, aber der Deckel wirkte in beide Richtungen: bei * 1920px mass das Feld weiterhin 460px, und zwischen Logo und Suche * lagen 590px Weiss. flex-grow war die ganze Zeit da und wirkungslos. * * Der Deckel bleibt, aber weit oben. Gemessen wird er im Bereich, den * diese Phase abdeckt, nie erreicht - bei 1920px waechst das Feld auf * 1020px (Gast) beziehungsweise 852px (angemeldet, dort steht mehr * rechts). Er greift erst auf sehr breiten Schirmen und verhindert * dort, dass aus einem Suchfeld ein Banner wird. * * min-width bleibt unveraendert: das ist die Grenze, unterhalb derer * die Suche nicht weiter nachgibt, und sie ist der Grund, dass die * Zeile in keiner Sprache umbricht. */ .primary-menu > li.header-search-item { flex: 1 1 auto; min-width: 330px; max-width: 1040px; } .header-search-item .search-box { min-width: 0; } /* * Die Navigationszeile fuellt ihren Kasten. * * Die nav ist ein Flexkind neben dem Logo und war nur so breit wie ihr * Inhalt - solange die dehnbare Suche drinsteckte, fiel das nicht auf, * denn die zog die Zeile ohnehin auf volle Breite. Ohne Suche schrumpfte * die nav auf Inhaltsmass, klebte am Logo und liess rechts 121px liegen * (gemessen bei 993px). Mit flex waechst sie, justify-content: flex-end * packt den Inhalt an die rechte Kante, und die Luft liegt wieder * zwischen Logo und Menue, wo sie hingehoert. */ .header-primary__content > .navbar { flex: 1 1 auto; min-width: 0; } /* Und dieselbe Zusage die restliche Kette hinunter: der Collapse fuellt die gewachsene nav, und weil er selbst ein Flexkasten ist, fuellt der nav-container den Collapse. Erst dann kommt die volle Breite beim Menue an, und justify-content: flex-end hat etwas zu verteilen. */ .navbar > .navbar-collapse { flex: 1 1 auto; min-width: 0; } .navbar-collapse > .nav-container { flex: 1 1 auto; min-width: 0; } /* * Der eine widerspruechliche Pixel bei genau 992. * * Bootstrap schaltet den Header ueber navbar-expand-lg auf min-width: 992 * um, das Theme seine mobilen Regeln ueber max-width: 992 - beide Grenzen * schliessen den Wert ein, also galten bei 992 beide Baender zugleich. * Gemessen kippten dabei genau zwei Dinge: der Desktop-Upload-Knopf * verschwand (list-item -> none) und der mobile Upload-Pfeil erschien * (none -> block), waehrend Sprache, Profil und Chat schon im * Desktopzustand standen. Der Uploadzugang ging nie verloren, aber die * Kopfzeile zeigte zwei Zustaende gleichzeitig. * * Ab einschliesslich 992 gilt jetzt der Desktopzustand vollstaendig. * !important, weil die Themeregeln es ebenfalls fuehren; korrigiert wird * hier und nicht in main.css, die mit jedem Template-Update neu kommt. */ .navupload_mobilen { display: list-item !important; } /* * Und die Einträge behalten ihr Mass. * * Dasselbe Themeband setzt .primary-menu .nav-item auf width: 100%, damit * die Eintraege im eingeklappten Menue untereinander stehen. Zusammen mit * dem nowrap dieser Datei war das bei genau 992 verheerend: gemessen wurde * jeder Eintrag 751px breit, und weil nichts umbrechen darf, schob * justify-content: flex-end die vorderen aus dem Bild - Sprache bei -1337, * der Upload-Knopf bei -4373. Sichtbar blieben Logo und Chat. * * Auto statt 100%: so breit, wie der Eintrag ist. Der mobile Zustand * unter 992 bleibt unberuehrt, dort gilt das Themeband allein. */ .primary-menu .nav-item { width: auto; } /* Der Chat-Knopf wurde im selben Band mittig gestellt; im Desktopband gehoert er ans Ende der Zeile, nicht in deren Mitte. */ .primary-menu .chat-button { margin-left: 0; margin-right: 0; } } /* * Schmaler Desktop: die eingebettete Suche weicht - aber nur, wo sie * wirklich nicht mehr hineinpasst. * * Hier stand ein pauschales Ausblenden von 992 bis 1400px. Die Begruendung * von damals stimmte fuer den angemeldeten Kopf und wurde ungeprueft auf * den Gastkopf mituebertragen: der traegt weder Profilbild noch * Chat-Symbol und hat rund 170px mehr Platz. * * Nachgemessen am gerenderten Dokument, Gastkopf: * * 1400px Container 1320, Liste 1111, Suche 540 - passt * 1280px Container 1140, Liste 931, Suche 360 - passt * 1200px Container 1140, Liste 931, Suche 360 - passt * 1199px Container 960, Liste 751 - erzwungen sichtbar klemmt sie auf * ihre Untergrenze von 330px und schiebt sich 120px ueber das * Logo * * Die Grenze liegt also am Containerwechsel bei 1200px, nicht bei 1400. * Fuer den angemeldeten Kopf bleibt es bei 1400: dieselbe Rechnung ergibt * dort in der 931px-Liste nur noch rund 190px fuer die Suche. * * Aufgebaut als Ausnahme von der Sperre, nicht als zweite Sperre. Ein * Browser ohne :has() wendet die Ausnahme nicht an und bleibt beim alten, * sicheren Verhalten - Suche versteckt. Andersherum waere ein solcher * Browser bei der Ueberlappung gelandet. * * !important, weil das Theme sie ueber d-lg-flex (ebenfalls !important) * einblendet und das Skript im Header die d-none-Klasse wegnimmt - beides * wuerde eine gewoehnliche Regel ueberstimmen. */ @media screen and (min-width: 992px) and (max-width: 1399.98px) { .primary-menu > li.header-search-item { display: none !important; } } @media screen and (min-width: 1200px) and (max-width: 1399.98px) { /* Ohne Profilmenue ist es der Gastkopf, und dort ist der Platz da. */ .primary-menu:not(:has(> .user-dropdown)) > li.header-search-item { display: flex !important; } } /* * Rechts nach links. * * Der Aufklapppfeil der Untermenues sass an einer festen Kante. Im Arabischen * spiegelt sich die Navigation, der Pfeil blieb stehen und zeigte damit von * seinem Eintrag weg. */ [dir="rtl"] .primary-menu__link, [dir="rtl"] .primary-menu__sub-link { text-align: start; } [dir="rtl"] .primary-menu .fa-angle-down, [dir="rtl"] .primary-menu .la-angle-down { margin-left: 0; margin-inline-start: 6px; } /* * Der Aufklapppfeil der Menueeintraege gehoert im Arabischen auf die andere * Seite. * * Das Theme setzt ihn als ::after auf `right`, im eingeklappten Menue auf * right: 15px. Im Arabischen steht der Text rechts, der Pfeil blieb dort und * legte sich darueber - beim Eintrag mit den drei Punkten sichtbar auf die * Punkte selbst, weil deren Symbol dort ebenfalls rechts beginnt. * * Nur im eingeklappten Menue: auf dem Desktop ist der Pfeil dieses Eintrags * `color: transparent`, dort gibt es nichts zu verschieben. */ @media screen and (max-width: 991.98px) { [dir="rtl"] .primary-menu > li.has-sub .primary-menu__link::after, [dir="rtl"] .primary-menu > li.has-sub.nav-more > .primary-menu__link::after { right: auto; inset-inline-end: 15px; } } /* * Der klebende Header gehoert ueber den Seiteninhalt, unter dem er klebt. * * main.css gibt ihm `position: sticky` und `z-index: 19`. Die * Sortiersteuerung der Startseite - der Knopf mit der Beschriftung "New" - * bekommt in derselben Datei `.home-filter-dropdown { z-index: 30 }`. * * Beide liegen im selben Stapelkontext: zwischen ihnen und der Wurzel steht * nichts, was einen eigenen aufmachte. `body` und die Bannersektion sind * zwar `position: relative`, aber beide mit `z-index: auto`, und das * genuegt dafuer nicht. Also entscheidet allein die Zahl, 30 gewinnt gegen * 19, und beim Herunterscrollen schiebt sich "New" sichtbar ueber die * Navigation. * * Korrigiert wird die Seite, die im Unrecht ist: ein klebender Header ist * dafuer da, dass Inhalt unter ihm durchlaeuft. 40 liegt ueber allem, was * auf diesen Seiten gewoehnlicher Inhalt ist (der hoechste Wert dort ist * eben jene 30) - und deutlich unter allem, was absichtlich ueber dem * Header liegen soll: Sprachwahl 1050, Modals 1055, Vorlader 9999, * Cookiehinweis 999999. Die aufgeklappte Liste des Bedienelements traegt * z-index 20 innerhalb ihres Wrappers und bleibt damit dort, wo sie * hingehoert: ueber dem Seiteninhalt, unter dem Header. * * Der Elementselektor statt eines !important: `header.header-primary` ist * um eine Stelle spezifischer als das `.header-primary` aus main.css und * gewinnt damit unabhaengig von der Ladereihenfolge der Stylesheets. */ header.header-primary { z-index: 40; } /* ========================================================================== Die Steuerung der Kopfzeile am Handy: Suche und Menue ========================================================================== Vorher waren es lose Geschwister in der Flexzeile, jedes mit eigenem Abstand: mal margin-inline-end, mal padding, bei zweien eine Trefferflaeche aus einem Pseudoelement, das ueber schmaleren Kaesten lag. Die Symbole kamen aus zwei Schnitten und zwei Groessen. Ausgerichtet war daran nichts - es sah nur ungefaehr gleich aus, und genau so wirkte es. Jetzt traegt .mnav die Anordnung: gleich grosse Zellen, ein Abstand, eine Symbolgroesse. Kein Kind bringt noch eigene Masse mit. Seit 5.7 stehen nur noch zwei Zellen darin. Die vier Ziele - Hochladen, Wall, Nachrichten, Reaktionen - sind in die feste Leiste am unteren Rand gewandert (assets/css/mobile-nav.css); hier bleibt, was die Seite steuert und kein Ort ist. **Am Desktop loest sich die Huelle auf.** display: contents nimmt sie aus dem Layout, die Kinder haengen wieder unmittelbar in der Navigationszeile, und das Theme entscheidet wie zuvor, was davon sichtbar ist. So aendert diese Datei am grossen Bild nichts. Kein Gold. Die Navigation bleibt hell und indigo. */ .mnav { display: contents; } @media screen and (max-width: 991.98px) { .mnav { display: flex; align-items: center; /* 4px: zwei 44er-Zellen mit sichtbarer Fuge. Bis 5.6 standen hier sechs Zellen und es waren 2px - noetig war das nur, solange die Zeile eng war. */ gap: 4px; /* An die Endkante, logisch - im arabischen Satz also nach links. */ margin-inline-start: auto; /* Die Gruppe gibt nichts her; wenn es eng wird, gibt das Logo nach. */ flex: 0 0 auto; } /* * Eine Zelle. Vierundvierzig mal vierundvierzig, immer. * * Nicht min-width plus Fuellung, sondern ein festes Quadrat: nur so * sitzen die Symbole wirklich auf einer Linie, und nur so ist die * Flaeche dieselbe, egal wie breit die Glyphe darin ist. */ .mnav > .mnav__btn { position: relative; display: inline-flex; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; flex: 0 0 44px; margin: 0; padding: 0; border: 0; border-radius: 12px; background: transparent; color: #23283a; font-size: 18px; line-height: 1; text-decoration: none; transition: background-color .18s ease, color .18s ease, transform .12s ease; } /* Die Glyphe traegt keine eigene Ausrichtung mehr - die Zelle zentriert. */ .mnav > .mnav__btn > i { display: block; font-size: inherit; line-height: 1; } /* Die Lage aus dem Theme aufheben - in der Gruppe traegt die Zeile. main.css stellt die Lupe absolut auf right: 90px; top: 15px. */ .mnav > .nav-search-sm { position: relative; inset: auto; top: auto; right: auto; left: auto; } /* --- Zustaende der uebrigen ------------------------------------- */ .mnav > .mnav__btn:hover { background: rgba(69, 46, 184, .08); color: #452eb8; } .mnav > .mnav__btn:active { transform: scale(.94); } /* * Der Ring selbst steht nicht hier. * * focus-visible.css setzt ihn an einer Stelle fuer die ganze Seite, * und zwar fuer jedes a[href] und jeden button - die Zellen der * Gruppe sind beides. Ihn hier zu wiederholen hiesse, zwei Orte zu * pflegen, die sich widersprechen koennen. Was diese Datei beitraegt, * ist nur die Flaeche darunter. */ .mnav > .mnav__btn:focus-visible { background: rgba(69, 46, 184, .08); color: #452eb8; } /* * Ganz schmale Geraete. * * Die Regel ist entfallen. Sie nahm der Gruppe bei 360px den Abstand, * weil dort sechs Zellen zu 44px neben dem Logo standen. Mit zwei * Zellen ist die Zeile selbst bei 320px nicht mehr eng: 12 Rand + 140 * Logo + 44 + 4 + 44 + 12 Rand ergibt 256 von 320, es bleiben 64px * Luft. Ein Abstand von null waere jetzt nur noch zwei Knoepfe, die * sich beruehren. */ } @media (prefers-reduced-motion: reduce) { .mnav > .mnav__btn { transition: none; } .mnav > .mnav__btn:active { transform: none; } } /* * Die Aussparung am iPhone. * * Heute greift sie nicht: die Seite setzt keinen viewport-fit=cover, und * ohne den haelt iOS den Inhalt von sich aus aus Kerbe und Home-Leiste * heraus - env() liefert dann ueberall null. Die Regel steht hier fuer den * Tag, an dem jemand cover einschaltet; ohne sie lege der Suchknopf sich * im Querformat unter die Kerbe. * * max() statt einer Addition: der vorhandene Rand bleibt der Mindestwert, * die Aussparung kann ihn nur vergroessern. Logische Seiten, damit es im * arabischen Satz mitwandert. */ @media screen and (max-width: 991.98px) { .header-primary .custom--container { padding-inline-start: max(12px, env(safe-area-inset-left)); padding-inline-end: max(12px, env(safe-area-inset-right)); } } /* ========================================================================== Die Hoehe der Kopfzeile am Handy ========================================================================== Seit 5.7 traegt die Zeile nur noch Logo, Suche und Menue. Zwei Reste aus der Zeit mit sechs Knoepfen machten sie hoeher und das Logo schief, und beide fallen erst auf, wenn nichts anderes mehr davon ablenkt. Gemessen bei 375px. */ @media screen and (max-width: 991.98px) { /* * 67px waren es, angestrebt sind 56. * * main.css gibt .nav-sm unterhalb von 992px ein padding-bottom von 15px * mit - zusammen mit den 8px, die Bootstraps .navbar oben und unten * setzt, ergab das 8 + 44 + 15. Der Zweck war einmal, dem absolut * gesetzten Anmeldeknopf Platz zu machen; den gibt es hier nicht mehr. * * 6px oben und unten um die 44er-Zelle sind 56 - dieselbe Hoehe, die * die Kopfzeile am Desktop hat, und genug Luft, dass die Zellen nicht * an der Kante kleben. */ .header-primary .navbar.nav-sm { padding-top: 6px; padding-bottom: 6px; } /* * Und das Logo sitzt wieder mittig. * * Dieselbe Themeregel gibt dem Bild margin-top: 10px. In einem * Flexkasten mit align-items: center ist das kein Ausgleich mehr, * sondern eine Verschiebung: gemessen sass das 23px hohe Bild bei * y=23,5 in einem Kasten von y=10 bis y=50 - drei Pixel zu tief, * waehrend Suche und Menue daneben genau mittig standen. */ .header-primary .logo .logo__is { margin-top: 0; } }