/*! © 2026 ЗАТОЧИ! / Путь Ножа · https://zatochi.pro * Закрытое программное обеспечение. Все права защищены. */ /* ============================================================================ desktop.css — слой широких экранов. Подключается ПОСЛЕ main.css. ⭐ ПРИНЦИП СЛОЯ: приложение МОБИЛЬНО-РОЖДЁННОЕ. На компьютере оно не превращается в настольную программу — оно остаётся собой, выросшим до планшета. Фрейм занимает примерно половину монитора и стоит ПО ЦЕНТРУ, поля по бокам симметричны. Так живут все мобильно-рождённые: лента Instagram на компьютере держит колонку ~470 точек, Twitter — 600, и никто не растягивает запись на весь монитор. Симметричная пустота — это паспарту, рамка вокруг картины, а не дыра. ⚠️ Правило слоя: ВСЁ только внутри @media (min-width: …). Ни одного правила, которое достанет до телефона. Мобильная вёрстка дома не трогается вообще. ⛔ Три захода, которые здесь стояли и провалились — чтобы не повторять: 1) РАСТЯЖКА (v=879-887): фрейм 1000/1240, содержимое во всю ширину. Поле ввода на 938 точек, кнопка на 952, строка прайса — «с "Топоры" наааа "Цену за единицу"» (Евгений Бедняков, 13.08.2026). Взгляд идёт от подписи к значению дольше, чем читает саму строку. 2) МЕРА С ЛЕВОЙ ОСЬЮ: органы вернули к 640, но колонку прижали влево — и вся пустота собралась справа одним куском. Асимметричная пустота читается не как воздух, а как недостача: «здесь что-то должно стоять и не стоит». 3) ВТОРАЯ КОЛОНКА (supporting pane: расчёт справа, чек справа, рельс вкладок слева): пустоту заполнили делом, но силуэт распался — левый край, правый край, канава посередине. Раскладка настольного приложения, которым мы не являемся. «Просто всё разъехалось в стороны» (Андрей, 13.08.2026). Общий корень всех трёх: пытались ЗАНЯТЬ ширину, которая приложению не нужна. ⭐ Что тогда остаётся в этом файле: сам фрейм, мера СТРОКИ ТЕКСТА (она не растёт вместе с окном) и мелкие поправки, которые на широком экране ведут себя иначе. Всё остальное содержимое живёт ровно так, как на телефоне. ============================================================================ */ /* ── Ноутбук ─────────────────────────────────────────────────────────────── */ @media (min-width: 1100px) { /* Фрейм 688 = 664 рабочей ширины + гуттеры. Внутри поле встаёт в 664 — это та же мера, которой держится строка текста, и вдвое от телефонных 366. Больше не берём: с 736 начинается «поле для романа», с 938 — жалоба Евгения. Таббар и шапка идут той же мерой и тем же центром — силуэт цельный, ничего не прыгает при переходе между вкладками (урок v=870: рамка не должна скакать между страницами). */ .tbar, .tabbar, .content { max-width: 688px; } /* ⚠️ Липкие панели: .content с overflow-x:hidden делает себя контейнером прокрутки, а листается body — из-за этого position:sticky в приложении не работал вовсе, и его обходили через fixed (урок карты зерна v=826, main.css:10444). Берём `clip`: обрезает так же, как hidden, но контейнер прокрутки НЕ создаёт — страховка от разъезда вбок остаётся, а sticky считается от body и наконец работает. Оживают одиннадцать объявлений sticky из main.css: заголовок дня в Журнале, поиск Знаний, полоса итога в реставрации, пилюли каталогов. Все они писались рабочими — теперь такие и есть. Только на широких: на телефоне правило дома остаётся как было. */ .content { overflow-x: clip; } /* Подписи кнопок. На телефоне `.btn-lines > span` держит width:min-content — это заставляет длинную подпись переноситься по словам и не раздувать колонку на 320 точках. В фрейме 688 места хватает, перенос не нужен. */ .btn-lines > span { width: auto; } /* ── Мера СТРОКИ. Единственное, что не растёт вместе с окном ─────────────── Колонка текста 640 при кегле 13 — это ~95 знаков, верх нормы. Длиннее — глаз теряет начало следующей строки. В фрейме 688 статья и так почти в мере, но центрируем её явно: заголовок, кнопка «Знания» и текст идут одним блоком. ⛔ Как было в v=879 и почему так нельзя: меру резали у ТЕКСТА внутри растянутого раздела и прижимали влево через margin-left:0 — выходила узкая колонка в углу, пустое поле справа и текст впритык к краю (сносился гуттер 12px, который статья ставит себе сама). ⛔ Как было в v=881: колонку получали три раздела из восемнадцати, узнанные по обёрткам .bu-wrap/.ot-wrap/.el-wrap — «Заусенец» рядом с «Термичкой» выглядели из разных приложений. Теперь правило одно и по умолчанию, метку data-col ставит renderTables. */ #tablesContent[data-col="mera"] { max-width: 640px; margin-left: auto; margin-right: auto; } /* Заметки внутри каталогов идут кеглем мельче основного (12,5 против 13), и в пикселях та же колонка даёт им на десяток знаков больше. Поэтому мера в em — она держится одинаковой при любом кегле (замер 13.08.2026: подпись зерна 211 знаков, заметка абразива 213, вступление материалов 188). */ #tablesContent:not([data-col="mera"]) p, #tablesContent:not([data-col="mera"]) li, #tablesContent:not([data-col="mera"]) .r-grit-note, #tablesContent:not([data-col="mera"]) .grit-ladders-hint, #tablesContent:not([data-col="mera"]) .abr-row-note, #tablesContent:not([data-col="mera"]) .hm-lead { max-width: 47em; } /* Матчасть живёт своим видом, кнопки-возврата над ней нет — центрируем обёртку. */ .view-glossary .gl-wrap { max-width: 640px; margin-left: auto; margin-right: auto; } /* Подсказки Кабинета — тот же закон меры, и тоже в em: они идут кеглем 11-12 инлайн-стилем (profile.js:631,657), в пикселях мера обманывает — 664 при кегле 12 это 110 знаков вместо 95. Дефект жил и при фрейме 1000 (167 знаков), а сторож молчал, потому что вкладку «Работа» не открывал. */ .view-profile .dim, .view-profile .p-hint { max-width: 47em; } /* Иллюстрации и диаграммы идут в той же колонке и по её центру: svg с width:100% раздувается в полотно и перетягивает внимание на себя. */ .view-tables .bu-kind-fig svg, .view-tables .bu-svg, .view-tables .el-svg svg { max-width: 520px; margin-left: auto; margin-right: auto; } } /* ── Большой монитор ─────────────────────────────────────────────────────── */ @media (min-width: 1440px) { /* 720 — примерно половина типового монитора и потолок роста. Дальше фрейм не идёт НИКОГДА, даже на 2560: «полэкрана» задаётся константой, а не долей, иначе на большом мониторе растяжка вернётся сама (поле 696 против 366 на телефоне — это уже предел, за которым начинается заход №1). */ .tbar, .tabbar, .content { max-width: 720px; } }