/* * Мобильная вёрстка. ДОБАВЛЕНА 05.09.2026 — до этого сайта на телефоне просто не было: * в шапке не стояло `viewport`, и телефон рисовал страницу в десктопном окне 980px, уменьшая её * до нечитаемого. Сама разметка при этом НЕ ПЕРЕПИСЫВАЛАСЬ: ни один блок, класс или идентификатор * не тронут — правки живут здесь, отдельным слоем поверх старых стилей. Это условие владельца: * «изменения в вёрстку минимальные, Гугл не должен особо почувствовать». * * Отсюда и приём: ширины, которые шаблон печатает ИНЛАЙНОМ (`#center style="width:1200px"`), * перебиваются `!important` — иначе их не достать, не трогая шаблон. * * Порядок правил — от общего к узкому: сперва защита от горизонтальной прокрутки на любом экране, * потом планшет (≤1240px), потом телефон (≤720px). */ /* ─────────── На любом экране ─────────── */ /* Тумблер бургер-меню и сама кнопка. На десктопе их нет: меню там стоит строкой, как всегда. */ .menu_toggle, .menu_burger { display: none; } /* Считаем ширину вместе с рамками и отступами: у старых блоков `width:100%` соседствует с `padding:20px`, и без этого страница выезжала за экран на ширину отступов. */ *, *::before, *::after { box-sizing: border-box; } /* Горизонтальной прокрутки быть не должно ни при какой ширине. */ html, body { max-width: 100%; overflow-x: hidden; } /* Картинки в текстах статей приезжают с прода с зашитыми размерами (`width:400px`) — на узком экране они распирали страницу. Высоту отпускаем, чтобы не плющило пропорции. */ #main img, .page_content img { max-width: 100%; height: auto; } /* Блок верхней рекламы держал ровно 100px высоты ВСЕГДА — и когда баннер не пришёл тоже. Между заголовком и текстом зияла пустая полоса (владелец: «что за разрыв?»). Высоту отпускаем: придёт баннер — займёт своё место сам, не придёт — места не занимает. Ширина шаблона не меняется. */ #top_ads { height: auto !important; } /* Текстовые вставки на страницах инструментов: колонка страницы — 1200px, и строка во всю её ширину читается тяжело (владелец: «не растянутый на всю страницу»). Держим текст на читаемой мере и по центру. Класс ставится только там, где он нужен, — старые страницы прода не трогаем. */ .tool_intro { max-width: 860px; margin: 0 auto 16px; text-align: left; } /* Текст ПОД инструментом на новых страницах — на той же читаемой мере, что и вводная строка. Обёртка ставится классом только там, где нужна: страницы прода её не знают и не меняются. */ .tool_text { max-width: 860px; margin: 0 auto; text-align: left; } /* Таблица соответствий «буква → чем её набрать» (фонетика и транслит). Три пары колонок: 33 буквы укладываются в 11 строк и видны целиком, без прокрутки и без простыни на экран. */ .kbmap { width: 100%; border-collapse: collapse; margin: 0 0 18px; } .kbmap th, .kbmap td { border: 1px solid #d5deea; padding: 5px 8px; text-align: left; } .kbmap thead th { background: #eef3fb; } .kbmap .kb_ru { width: 8%; font-weight: bold; white-space: nowrap; } /* Моноширинный набор: скобки, тильда и апостроф в обычном шрифте читаются как случайный мусор. */ .kbmap .kb_key { font-family: Consolas, "Courier New", monospace; white-space: nowrap; } /* ─────────── Карточки соседних клавиатур (главная, под инструментом) ─────────── Под клавиатурой оставалось пустое поле: у #center задан min-height 950px, а инструмент ниже. Теперь там две карточки. Смысл не декоративный: человек, пришедший тыкать мышкой, узнаёт, что тот же русский текст набирается прямо с английских клавиш. Цвета взяты из скина azure самой клавиатуры (#6699ff дека, #4d80ea нажатие, #1b3565 текст), чтобы блок читался её продолжением. */ .kb_cards { max-width: 900px; margin: 22px auto 0; } .kb_cards_title { margin: 0 0 12px; font-size: 18px; text-align: center; } .kb_cards_row { display: flex; gap: 16px; } .kb_card { flex: 1 1 0; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid #dde3ee; border-radius: 10px; background: #fff; color: inherit; text-decoration: none; } .kb_card:hover { border-color: #6699ff; background: #f7faff; } /* «Картинка» карточки: характерная пара — что набираешь и что выходит. Рисуется клавишами, а не файлом: масштабируется, не мылится на ретине и не тянет лишний запрос. */ .kb_card_pic { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; } .kb_kc { min-width: 36px; padding: 7px 9px; border: 1px solid #c9d6f2; border-bottom-width: 2px; border-radius: 6px; background: #eef3ff; color: #1b3565; font: bold 17px/1 Consolas, "Courier New", monospace; text-align: center; } .kb_kc_ru { background: #6699ff; border-color: #4d80ea; color: #fff; } .kb_card_arrow { color: #6699ff; font-size: 18px; } /* Заголовок карточки подчёркнут: без подчёркивания карточка не читалась как ссылка (владелец 05.09.2026 — «карточки не выглядят кликабельными»). Сама карточка ссылкой была и раньше. */ .kb_card_txt strong { display: block; margin-bottom: 3px; color: #1b3565; text-decoration: underline; } .kb_card_txt span { display: block; font-size: 13px; line-height: 1.4; color: #4a4a4a; } /* Таблицы и блоки кода в текстах статей — со своей прокруткой, а не общей страницы. */ .page_content table { max-width: 100%; } /* ─────────── Планшет и узкий десктоп ─────────── */ @media (max-width: 1240px) { /* Рабочая колонка перестаёт быть фиксированной. Ширина приходит инлайном из шаблона (1200px), поэтому только `!important`. Минимальную высоту тоже отпускаем: на узком экране она оставляла пустое поле под инструментом. */ #center { width: auto !important; max-width: 100%; min-height: 0 !important; padding: 0 12px; } #tool_padding { padding-left: 0 !important; } } /* ─────────── Телефон ─────────── */ @media (max-width: 720px) { /* ШАПКА. Была строкой фиксированной высоты (102px), в которой логотип и меню стояли рядом флоатами. На телефоне они не помещаются — раскладываем в столбик, высоту отпускаем. Скругления углов оставлены: это узнаваемая деталь сайта, а не помеха. */ header { height: auto; overflow: hidden; border-bottom-left-radius: 20px; } #logo_part { height: auto; float: none; padding: 8px 12px; border-top-right-radius: 20px; border-bottom-left-radius: 20px; text-align: center; } #logo_url { display: inline-flex; align-items: center; justify-content: center; } #logo_img { float: none; display: flex; align-items: center; } #logo_img img { max-height: 44px; width: auto; } #logo_text { float: none; padding: 0 0 0 12px; /* Заголовок сайта ужимается по ширине экрана, но не мельче читаемого. */ font-size: 20px; line-height: 1.2; text-align: left; } /* МЕНЮ — ПОД БУРГЕР. Четыре ссылки списком занимали пол-экрана, и человек, пришедший за клавиатурой, до неё не доскроливал (владелец 05.09.2026). Открывается тумблером-чекбоксом, без JS; ссылки остаются в разметке, поэтому поисковик их видит как раньше. */ #header_menu { width: 100%; } /* Кнопка без подписи — одни полоски. Ширина держится по площади нажатия (44px — минимум, ниже которого промахиваются пальцем), а не по тексту. */ .menu_burger { display: flex; align-items: center; justify-content: center; width: 48px; min-height: 44px; padding: 11px 14px; border-top: 1px solid #e5e5e5; color: #000; cursor: pointer; user-select: none; -webkit-user-select: none; } /* Три полоски — фоном, без картинки и без иконочного шрифта: лишний файл ради трёх линий грузить незачем. */ .menu_burger_ic { width: 20px; height: 14px; background: linear-gradient(#000, #000) top / 100% 2px no-repeat, linear-gradient(#000, #000) center / 100% 2px no-repeat, linear-gradient(#000, #000) bottom / 100% 2px no-repeat; } #top_menu { float: none; height: auto; width: 100%; margin: 0; } /* Меню закрыто, пока тумблер не взведён. Правила стоят ПОСЛЕ блока выше: у селекторов одинаковая специфичность, и решает порядок. */ #top_menu { display: none; } .menu_toggle:checked ~ #top_menu { display: block; } #top_menu tbody, #top_menu tr { display: block; } #top_menu .m_item { display: block; width: 100%; padding: 0; border-top: 1px solid #e5e5e5; } /* Ссылка занимает всю строку — по ней удобно попасть пальцем (высота 44px — минимум, ниже которого промахиваются). */ #top_menu .domain_page_url { display: block; margin: 0; padding: 12px 14px; min-height: 44px; font-size: 16px; } /* ТЕЛО СТРАНИЦЫ. */ #center { padding: 0 10px; } #tool_name, #tool_title_h1 { font-size: 24px !important; margin: 16px 0 !important; } .page_content h1 { font-size: 24px; } /* ОПИСАНИЕ ПОД ИНСТРУМЕНТОМ. Внутренний блок был 90% ширины с отступом 20px — на телефоне это съедало треть экрана. Текст выравниваем по левому краю: «по ширине» на узкой колонке рвёт строки дырами. */ #opisanie { float: none; } #left_opisanie { width: 100% !important; padding: 12px 2px !important; text-align: left !important; } .page_content { text-align: left; } /* Картинки в статьях не обтекаются текстом: на телефоне рядом с картинкой в 400px не остаётся места под слова. */ #main img, .page_content img { float: none !important; margin: 10px auto !important; display: block; } /* ПОДВАЛ. Копирайт стоял справа флоатом и налезал на меню. */ #menu { padding: 16px 10px; } .b_item { float: none; } #site_copyright { float: none; text-align: center; padding: 0 10px 20px; margin-top: 10px; } /* Пустая распорка в 100px под инструментом — на телефоне это лишний экран пустоты. */ #chto-to { height: 24px !important; } /* Кнопка «На главную» на посадочных страницах. */ #back_button { margin-left: 12px; } /* Карточки в столбик: рядом на 360px от подписи осталась бы колонка в два слова. */ .kb_cards { margin-top: 16px; } .kb_cards_row { flex-direction: column; gap: 10px; } .kb_cards_title { font-size: 16px; } /* Таблица соответствий: шесть колонок на 360px влезают только поджатыми. */ .kbmap { font-size: 14px; } .kbmap th, .kbmap td { padding: 4px 4px; } .kbmap .kb_ru { width: 10%; } }