@charset "utf-8"; /* SUPP/m.css — общие правила для узких экранов. * * ВСЁ здесь висит на классе "mob", который ставит SUPP/m.js только тогда, * когда ширина ВЕРХНЕГО окна не больше 700 px (см. подробности и ловушку * file:// в комментарии m.js). На настольном компьютере класса нет, значит * ни одно правило не применяется и внешний вид страниц не меняется. * * Почему не @media: сайт на фреймах, медиазапрос меряет ширину своего * документа. Оглавление живёт во фрейме 130 px и на любом десктопе попало бы * под «мобильные» правила. * * Селекторы намеренно начинаются с html.mob: файл подключается в * ПЕРЕД собственными стилями страницы, и без этого запаса по весу правила * вроде "BODY {...}" из a.css/b.css/c.css перебивали бы наши. */ /* iOS Safari сам «подкручивает» кегль в узких колонках. Для подстрочника это смертельно: греческое слово и русская глосса лежат в одной табличке, и разъехавшийся кегль ломает их выравнивание. Запрещаем. */ html.mob { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; } /* Иллюстрации в пояснительных разделах (SUPP/main.htm, settings.htm, learn*.htm) заданы в натуральную величину — до 647 px, то есть шире телефона. height:auto нужен, чтобы при сжатии не поплыли пропорции: у части картинок height проставлен атрибутом. */ html.mob img { max-width: 100%; height: auto; } /* Подвал главы и таблицы-обёртки объявлены как width=100%, но у некоторых вложенных ячеек есть свои размеры. Страховка от горизонтальной прокрутки всей страницы из-за одной широкой таблицы. */ html.mob table { max-width: 100%; } /* ------------------------------------------------------------------ Точечные источники горизонтальной прокрутки. Замерено зондом в iframe шириной 360 px: всё остальное на сайте укладывается само, эти пять мест — нет. ------------------------------------------------------------------ */ /* Симфонии (S/, SL/). Список мест «Быт 1:31; Исх 2:4; ...» выводится в S/s.js одной строкой
  • ... и вылезал на 191 px. Снимаем запрет переноса с обёртки — каждая отдельная ссылка при этом остаётся неразрывной, потому что s.js оборачивает её в свой (он не является прямым потомком
  • и под это правило не попадает). */ html.mob li > nobr { white-space: normal; } /* Слишком длинное слово переносим внутри слова — но только если строка иначе не помещается (это и есть смысл break-word, обычные слова не трогаются). Нужно, например, палеографическому очерку: там сплошное письмо показано строкой «ВНАЧАЛЕБЫЛОСЛОВОИСЛОВОБЫЛОУБОГА...» в 47 знаков, и она одна растягивала страницу на 146 px. Правило намеренно ограничено абзацами и списками: в подстрочнике текста в

    и

  • нет, там каждое слово лежит в ячейке таблицы под , и переносить его внутри нельзя — разъедется пара «слово/перевод». */ html.mob p, html.mob li, html.mob dir { overflow-wrap: break-word; } /* Пояснительные страницы (SUPP/main.htm, settings.htm, learn*.htm) вложены в по два-три уровня, а у по умолчанию 40 px отступа на уровень: на телефоне это съедало треть ширины. */ html.mob dir, html.mob menu { padding-left: 14px; margin-left: 0; } /* Таблица статистики (SUPP/stats.htm) свёрстана в 12 pt Times с крупными отступами ячеек. */ html.mob table.st { font-size: 11px; } html.mob table.st td, html.mob table.st th { padding: 3px 5px; } /* Список PDF (pdf/index.html) — три колонки названий книг. */ html.mob table.pdflist { font-size: 12px; } html.mob table.pdflist td, html.mob table.pdflist th { padding: 0 3px; } /* Легенда над разбивкой (SHP/) держит подписи неразрывными. */ html.mob .legend .lg { white-space: normal; } /* Общая подложка страницы (b.css, oth.css, shv.css, shp.css и разночтения S/V) держит по 10-26 px полей с каждой стороны. На настольном экране это поля, на телефоне — вычет из длины строки, а строка тут дорога: в подстрочнике на неё приходится всего три-четыре слова. */ html.mob .page { padding-left: 5px; padding-right: 5px; } /* Аппарат разночтений (S/V) выводит подряд идущие ссылки-чтения БЕЗ пробелов между ними, а без пробела перенос строки невозможен — набегала неразрывная цепочка в 364 px. overflow-wrap:anywhere добавляет возможность переноса только там, где строка иначе не помещается, поэтому обычные слова целы: разрыв случится лишь внутри такой цепочки. */ html.mob .page > small { overflow-wrap: anywhere; } /* Самоучители (SUPP/learn*.htm) выгружены из Word: таблицы примеров набраны 12 pt Times, причём кегль задан не таблице, а абзацам внутри ячеек — поэтому правило приходится повторять для

    . */ html.mob table.MsoNormalTable { font-size: 12px; } html.mob table.MsoNormalTable p, html.mob table.MsoNormalTable li { font-size: 12px; } html.mob table.MsoNormalTable td, html.mob table.MsoNormalTable th { padding: 2px 4px !important; /* у части ячеек padding задан прямо в style= */ } /* Часть таблиц в самоучителях не ужимается никаким кеглем: это сетки склонений и парадигм, у которых просто много колонок (латинская table.g — 459 px). Ломать сетку переносами нельзя, она перестанет читаться, поэтому даём таблице собственную горизонтальную прокрутку. Страница при этом не едет: display:block превращает саму таблицу в блок по ширине родителя, а её содержимое прокручивается внутри. */ html.mob table.MsoNormalTable, html.mob table.g { display: block; overflow-x: auto; max-width: 100%; } /* ================================================================== Мишени для пальца. Замерено на месте: ссылка-номер главы занимает 8x17 px. Промахнуться по ней на телефоне легче, чем попасть. Рекомендации платформ — 44x44 (Apple) и 48x48 (Google); берём 40x38 плюс просветы, что даёт шаг около 44 px и при этом не превращает список из 50 глав в простыню. ================================================================== */ /* Полоса номеров глав. Один и тот же id используют страницы книг греческого подстрочника (OT/*.html), синодального перевода (RSV/*.html) и еврейского текста (OTH/H*.html). */ html.mob #nav { max-height: 26vh; /* около четырёх рядов плиток; дальше полоса прокручивается, а текущую главу подводит в видимую часть SUPP/booknav.js */ padding: 4px 3px; } html.mob #nav a, html.mob .chnav a, html.mob.mnav a { display: inline-block; box-sizing: border-box; min-width: 40px; min-height: 38px; margin: 3px; padding: 0 7px; line-height: 36px; text-align: center; border: 1px solid #ddd5c2; border-radius: 5px; background: #fffdf7; text-decoration: none; } /* Подсветка текущей главы (a.cur ставит booknav.js/rsvnav.js) не должна потеряться под фоном плитки. */ html.mob #nav a.cur, html.mob .chnav a.cur { background: #fff3c4; border-color: #c9a227; } /* Полоса над главой с переключателем произношения (её строит trlBar() в s.js, оформление — .topline в b.css и oth.css). На телефоне это единственный путь к транскрипции: подсказка в атрибуте title, которой пользуются мышью, на сенсорном экране не показывается вообще. Значит флажок и список систем чтения обязаны быть нажимаемыми. Выравнивание меняем с правого на левое: на узкой полосе прижатые к правому краю подписи читаются как обрывок. */ html.mob .topline { font-size: 13px; text-align: left; padding: 4px 4px 6px 2px; } html.mob .topline label { display: inline-block; margin: 0 14px 0 0; padding: 7px 0; } html.mob .topline input { width: 18px; height: 18px; vertical-align: middle; } html.mob .topline select { font-size: 14px; padding: 4px 2px; } /* Переключатели на странице настроек (SUPP/settings.htm): система чтения греческого и латыни, шрифт, подсказки, огласовка еврейского. У браузера переключатель по умолчанию около 13 px — попасть пальцем трудно. */ html.mob input[type="radio"], html.mob input[type="checkbox"] { width: 18px; height: 18px; vertical-align: middle; } /* Вертикальное меню книг (SUPP/toc.htm). Строки идут через
    , поэтому достаточно сделать сами ссылки inline-block с вертикальным полем. */ html.mob.mmenu a { display: inline-block; padding: 9px 5px; line-height: 1.15; } /* Заголовочная картинка меню (home.gif) — не пункт списка, отступы ей не нужны. :has() поддержан во всех мобильных браузерах начиная с 2022 года; там, где его нет, картинка просто получит лишние 9 px полей. */ html.mob.mmenu a:has(img) { padding: 0; } /* ================================================================== Оболочка узкого экрана (underl/index.htm). На настольном компьютере index.htm по-прежнему собирает FRAMESET COLS="130,*", и всё нижеследующее не участвует: этих элементов на странице просто нет. На узком экране вместо фреймсета собирается полоса + окно текста + выезжающая панель с оглавлением. Колонка 130 px из фреймсета на телефоне занимала бы треть экрана и оставляла тексту полосу шириной с ладонь — поэтому меню убрано с глаз и вызывается кнопкой. ================================================================== */ /* Класс mshell ставит сам index.htm сразу после сборки оболочки — только он и знает наверняка, что оболочка собрана (адрес страницы может быть и «/», и «/index.htm»). Без этой привязки height:100% и overflow:hidden уехали бы на все 14 тысяч страниц и запретили бы прокрутку текста. */ html.mob.mshell, html.mob.mshell body { margin: 0; padding: 0; height: 100%; overflow: hidden; /* прокручивается содержимое окна, а не оболочка */ } html.mob.mshell #mbar { position: fixed; top: 0; left: 0; right: 0; height: 42px; z-index: 3; display: flex; align-items: center; gap: 6px; box-sizing: border-box; padding: 0 8px 0 4px; background: #f3ecd9; border-bottom: 1px solid #d8d0bd; font-family: Arial, Helvetica, sans-serif; } html.mob.mshell #mburger { flex: 0 0 auto; width: 40px; height: 36px; font-size: 20px; line-height: 1; color: #6b1a1a; background: #fffdf7; border: 1px solid #ddd5c2; border-radius: 5px; cursor: pointer; } html.mob.mshell #mtitle { flex: 1 1 auto; overflow: hidden; font-size: 14px; color: #6b1a1a; text-decoration: none; white-space: nowrap; text-overflow: ellipsis; } /* Высота задана явно, а не парой top/bottom: