/* * Шапка: название школы рядом с гербом на телефоне. * * Правила только для `#mobile-header` и только до 767 px. Планшет и desktop * шапку рисуют своим рядом (`#main-header`) и сюда не попадают вовсе. * * Что чинится. Название школы длинное — «Київська Міська Школа Вищої * Спортивної Майстерності», — а места справа от герба остаётся мало: при * гербе 85 px и кегле 16 px на телефоне 360 px под текст приходится около * 170 px, и строка разваливается на пять. Шапка от этого вырастает вдвое. * * Ширину, которую перебивают правила, тема печатает динамическим стилем в * `` (`.site-branding a.brand img`, `.site-branding .site-title`). * Поэтому селекторы здесь начинаются с `#mobile-header`: они выигрывают по * специфичности, а не по порядку подключения, — тот же приём, что у Hero. * * Ни текста, ни регистра, ни шрифта, ни цвета правила не касаются. Заглавные * буквы каждого слова даёт `text-transform: capitalize` из `style.css`, синий * `#023480` — «Додатковий CSS» кастомайзера, семейство наследуется от `body`. * Всё это одно на телефон и на desktop и здесь не переопределяется — меняются * только кегль, перенос по строкам и отступы. */ @media screen and ( max-width: 767px ) { /* * Герб. 48 px вместо 85 — это и есть главная экономия высоты: картинка * квадратная, и прежние 85 px в одиночку задавали рост всей шапки. Поле * справа от герба тема ставит в `1em`; половины хватает, а разница уходит * тексту. */ #mobile-header .site-branding a.brand img { max-width: 48px; } #mobile-header .site-branding a.brand img.svg-logo-image { width: 48px; } #mobile-header .site-branding.branding-mobile-layout-standard:not( .site-brand-logo-only ) a.brand img { margin-right: 0.375em; } /* * Левая часть ряда забирает всю ширину, которая осталась от кнопок справа. * * Ряд шапки — не флекс, а **сетка**: `.site-header-row{display:grid; * grid-template-columns:auto auto}` (`basetheme/assets/css/header.min.css`). * Обе колонки `auto`, то есть по содержимому, и название само решает, * сколько занять. Свободного места ему при этом никто не отдаёт: колонка * ровно такая, какой её сделал текст, и в узком экране он ужимается до * одного слова в строке. * * Поэтому левая колонка объявляется `minmax( 0, 1fr )` — весь остаток * после правой, которая остаётся `auto` и держит свои две кнопки. Ноль * нижней границей обязателен: у голого `1fr` минимум равен `min-content`, * и колонка снова считалась бы по тексту. * * Дальше внутри колонки идёт обычная флекс-цепочка: секция → элемент → * блок бренда → обёртка названия. На каждом её звене нужны два свойства: * `min-width: 0` — разрешение сжиматься ниже длины текста — и явный рост, * о котором ниже. Разорвись цепочка на любом звене, ширина снова стала бы * считаться по содержимому. */ #mobile-header .site-main-header-inner-wrap.site-header-row { grid-template-columns: minmax( 0, 1fr ) auto; } #mobile-header .site-main-header-inner-wrap > .site-header-main-section-left { min-width: 0; } /* Поле справа от бренда лишнее: за ним сразу кнопки со своим отступом. */ #mobile-header .site-header-main-section-left > .site-header-item:last-child { margin-right: 0; } /* * Каждому звену цепочки нужен не только `min-width: 0`, но и **явный * рост**. Причина в контейнерном запросе ниже: `container-type` включает * сжатие по инлайновой оси, и обёртка названия перестаёт отдавать наружу * свою ширину — для родителей её содержимое считается нулевым. Флекс * тогда меряет элемент по остатку содержимого, то есть по одному гербу: * блок бренда садился на 56 px, названию доставалось около нуля, и оно * рассыпалось по слову в строке. `flex: 1 1 auto` снимает вопрос — ширина * берётся у колонки сетки, а не у содержимого. */ #mobile-header .site-header-main-section-left > .site-header-item { flex: 1 1 auto; min-width: 0; } /* * Заодно снимается поле справа у самого блока бренда: `style.css` * (строка 1125) держит там `body .site-branding{padding:0em 2em 0em 0em}`, * то есть 32 px, которые на узком экране нужнее тексту. Правило десктопа * (`padding: 0em 3em 0em 0em`) не задето — оно вне этого медиазапроса. */ #mobile-header .mobile-site-branding { flex: 1 1 auto; min-width: 0; padding: 0; } #mobile-header .mobile-site-branding a.brand { min-width: 0; } /* * `flex: 1 1 0` — отсчёт от нуля, а не от длины текста: обёртка получает * ровно остаток ряда после герба и его поля, и эта ширина не зависит от * того, во сколько строк ляжет название. */ #mobile-header .mobile-site-branding .site-title-wrap { flex: 1 1 0; min-width: 0; } /* * Правая часть ряда отдаёт тексту всё, что может. * * Ширина названия — это остаток: экран минус краевые поля, минус кнопки, * минус герб. Каждая из этих величин своя, и лишние пиксели набираются * понемногу отовсюду: отступ между кнопками 10 → 2 px, боковые поля самих * кнопок вдвое, краевое поле ряда 10 → 8 px. В сумме около тридцати — * ровно та разница, из-за которой «Вищої» не помещалось в первую строку. * * Ужимаются только боковые поля: `padding-block` кнопок не трогается, и * по высоте зона касания остаётся прежней — ряд всё равно 60 px. */ #mobile-header .site-header-main-section-right > .site-header-item { margin-left: 2px; } #mobile-header .site-header-main-section-right .search-toggle-open { padding-inline: 0.25em; } #mobile-header .site-header-main-section-right .menu-toggle-open { padding-inline: 0.3em; } #mobile-header .site-header-row-container-inner > .site-container { padding-inline: 8px; } /* * Название. Кегль запасной, на случай браузера без контейнерных запросов * (правило ниже): 13 px читаемы и дают две-три строки вместо пяти. * * Слова не рвутся никогда: перенос по буквам выключен всеми тремя * свойствами сразу, а самое длинное слово — «Майстерності» — занимает * 7.52 кегля, то есть 120 px даже на верхней границе 16 px, и помещается * в любую колонку, которая на телефоне вообще получается. */ #mobile-header .site-branding .site-title { font-size: 13px; line-height: 1.2; overflow-wrap: normal; word-break: normal; hyphens: none; } } /* * Кегль по реальной ширине, оставшейся под название. * * Считать его от ширины экрана нельзя: между краем окна и текстом стоят поля * контейнера, герб и две кнопки, и их суммарная ширина от кегля не зависит. * Контейнерный запрос снимает вопрос — `cqw` меряет саму обёртку названия, * то есть ровно тот остаток, который посчитала флекс-раскладка выше. * * Коэффициент выведен из шрифта — и считан по тому виду, в каком название * показывается на экране, то есть с заглавной каждого слова: `capitalize` * заметно шире строчных, и по ним коэффициент вышел бы завышенным. Самая * длинная строка переноса — «Київська Міська Школа Вищої», её ширина в * Montserrat 700 равна 16.42 кегля. Значит две строки получаются при кегле не * больше ширины/16.42, то есть 6.09 cqw; взято 5.9 — запас на округление и на * подстановочный шрифт, пока не загрузился Montserrat. * * Границы: не крупнее 16 px (кегль темы, выше незачем) и не мельче 12 px. * Нижняя граница важнее двух строк: на самых узких телефонах название уйдёт * в три строки, и это лучше нечитаемого текста. Пять строк не получаются * ни при какой ширине — на них не хватает высоты ни одного слова. */ @supports ( container-type: inline-size ) { @media screen and ( max-width: 767px ) { #mobile-header .mobile-site-branding .site-title-wrap { container-type: inline-size; } #mobile-header .site-branding .site-title { font-size: clamp( 12px, 5.9cqw, 16px ); } } }