/* ============================================================================ SARMAT — ОФОРМЛЕНИЕ КНИГИ (руководство и учебка). Стояло внутри guide.html. Когда у книги появилась вторая страница («Учебка», заказ 7 сентября), выбор был из двух: скопировать двести строк стилей во вторую страницу — или вынести их сюда. Копия означала бы, что правка отступов в оглавлении делается дважды и однажды будет сделана один раз; движок книги вынесен по той же причине (assets/guidebook.js). ============================================================================ */ /* `minmax(0, 1fr)`, а не `1fr`. У колонки сетки нижняя граница по умолчанию — ширина её содержимого, и одна широкая таблица (или поле ввода) растягивает колонку, а с ней и страницу. Замерено: на телефоне 390 px колонка выходила 533 px, и вбок ехала вся страница. */ .guide { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; } @media (max-width: 900px) { .guide { grid-template-columns: minmax(0, 1fr); gap: 24px; } } .guide > * { min-width: 0; } /* Оглавление липнет НИЖЕ шапки и полосы правки, иначе первый раздел уезжает под них и по нему нельзя щёлкнуть. Полоса видна ВСЕГДА (в ней поле ключа), поэтому отступ один и на чтении: 65 шапка + 60 полоса. */ /* `min-width: 0` — не украшение. Колонка сетки по умолчанию не уже своего содержимого, а у поля ввода есть собственная минимальная ширина (около двадцати знаков). Поставив поиск в оглавление без этой строки, мы получили колонку в 533 px на телефоне шириной 390 — и вбок поехала ВСЯ страница. Замерено, а не предположено. */ .toc { position: sticky; top: 136px; align-self: start; min-width: 0; } /* --------------------------------------------------------------------- ПОИСК ПО РУКОВОДСТВУ. Сорок три тысячи знаков в двадцати девяти разделах читают не подряд: человек приходит с вопросом («сколько жизней», «почему не приехала колонна») и ищет ответ. Поиск браузера (Ctrl+F) на этой странице помогает плохо — он ищет по видимому тексту, а свёрнутого текста тут нет, зато есть длинные разделы, и найденное слово оказывается посреди чужого раздела без заголовка. Поле ищет по ЗАГОЛОВКУ И ТЕКСТУ раздела и оставляет на странице только подходящие разделы: ответ приходит вместе со своим заголовком, а не строкой из середины. --------------------------------------------------------------------- */ .gfind { position: relative; margin-bottom: 14px; } .gfind input { width: 100%; min-width: 0; padding: 9px 30px 9px 11px; font-size: 13px; } .gfind button { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border: 0; background: none; cursor: pointer; color: var(--ink-3); font-size: 16px; line-height: 1; padding: 0; } .gfind button:hover { color: var(--ink); } .gcount { display: block; font-size: 11px; letter-spacing: .10em; text-transform: uppercase; color: var(--ink-3); margin: 8px 0 2px; } .blk[hidden] { display: none; } .toc a { display: block; padding: 7px 0 7px 10px; font-size: 12px; letter-spacing: .10em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line); border-left: 2px solid transparent; } .toc a:hover { color: var(--ink); } /* Где мы сейчас — видно в оглавлении. Отметка ставится по тому же признаку, по которому человек это и понимает: какой раздел стоит в верхней трети экрана. */ .toc a.on { color: var(--ink); border-left-color: var(--brand); } /* ===================================================================== ВИД РАЗДЕЛА — ЗАГОЛОВОК БАННЕРОМ (по образцу заказчика, strikepackagestudios.com/serverguide/full-guide). Заголовок разделов на голом фоне терялся в сплошном тексте: на длинной странице человек не видит, где кончился один раздел и начался другой. Баннер с цветной полосой слева — это та же граница, только видимая, а надстрочная надпись даёт разделу место в целом. ===================================================================== */ .gsec { background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 10px; padding: 13px 18px; } .gsec .kick { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); font-weight: 600; margin-bottom: 2px; } .gsec h3 { margin: 0; font-size: 22px; } .gdate { margin-top: 4px; font-size: 11px; letter-spacing: .10em; text-transform: uppercase; color: var(--ink-3); } .gbody { margin-top: 18px; } .gbody > img.shot:first-child { margin: 0 0 16px; border-radius: 10px; } /* Плитки внутри раздела: строка «+ Заголовок | текст | ссылка». Разметкой, а не отдельным полем в правке: поле пришлось бы заводить каждому разделу и объяснять, а строка живёт в том же тексте и переводится вместе с ним. */ .gcards { display: grid; gap: 14px; margin: 16px 0; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } /* КРОМКИ ПЛИТОК — БЕЛАЯ, СИНЯЯ, КРАСНАЯ (решение заказчика 7 сентября). Это флаг, а не язык карты: цвета сторон живут своими переменными (--side-red, --side-blue) и здесь не используются нарочно — иначе через месяц кто-нибудь прочитает синюю кромку плитки как «этот раздел про синих». Синий взят светлее флажного: тёмно-синяя полоса в 2 пикселя на почти чёрном фоне не видна вовсе, а кромка должна быть видна. */ .gcard { background: var(--bg-2); border: 1px solid var(--line); border-top: 2px solid #ffffff; border-radius: 10px; padding: 14px 16px; } .gcard:nth-child(3n+2) { border-top-color: #2f6fd0; } .gcard:nth-child(3n+3) { border-top-color: #e02b3c; } .gcard b { display: block; font-size: 14px; margin-bottom: 6px; color: var(--ink); } .gcard p { margin: 0; font-size: 13px; color: var(--ink-2); max-width: none; } .gcard a { display: inline-block; margin-top: 8px; font-size: 13px; } /* ВСТУПЛЕНИЕ ПОД ВЕРХНИМ ОКНОМ. Своих плиток у него нет: они те же `.gcards`, что и в тексте разделов, — иначе через полгода на странице оказалось бы два разных ряда плиток, похожих, но не одинаковых. */ .gintro { margin: 18px 0 30px; } .gintro h2 { font-size: clamp(22px, 2.6vw, 32px); line-height: 1.18; margin: 0 0 10px; letter-spacing: -.01em; } .gintro .gintro-p > p { color: var(--ink-2); max-width: 74ch; } .gintro .gcards { margin-top: 18px; } article h3 { margin-top: 0; font-size: 24px; } article p { color: var(--ink-2); max-width: 74ch; } article ul { color: var(--ink-2); max-width: 74ch; padding-left: 20px; } article li { margin: 7px 0; } article b, article strong { color: var(--ink); font-weight: 500; } article img.shot { max-width: 100%; border: 1px solid var(--line); margin-top: 14px; display: block; } /* ОДНО ОКНО НА РАЗДЕЛ — И ФОТО, И РОЛИК (заказ 7 сентября: «в гайде сделай окна больше для фото + возможность загрузить видео с ютуба»). Было два разных места: полоса под картинку у каждого раздела и ОТДЕЛЬНАЯ полоса под ролик — но только у разделов из списка `VIDSEC`, вписанного руками. То есть добавить ролик к любому другому разделу было нельзя, не правя файл страницы. Теперь окно одно, и в нём то, что хозяин туда положил: кадр, свой файл или ссылка YouTube. Ничего нового для этого не заводилось — ровно так устроен баннер на главной: `data-bi` под кадр, `data-bv` под ролик, обе кнопки даёт склад блоков. Ролик лежит ПОВЕРХ кадра и закрывает его целиком, пока играет. Не доехал (нет сети, вырезан расширением) — под ним остаётся фотография, а не чёрный прямоугольник; поэтому прятать окно, как прятали пустую полосу ролика, больше не нужно. */ .gpic > [data-bv] { position: absolute; inset: 0; } .gpic video, .gpic iframe { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; } .blk { margin-top: 40px; } .blk:first-child { margin-top: 0; } .blk[data-id="g1"] > .body > p:first-child { border-left: 2px solid var(--brand); padding-left: 18px; } /* правка прямо на странице */ /* Шапка сайта — 66 px и z-index 60. Полоса правки обязана стоять ПОД ней и ПОВЕРХ содержимого; прежние 64 px и z-index 30 задвигали её под шапку, и поля ключа на экране не оказывалось. */ /* 65, а не 66: полоса подлезает под шапку на один пиксель. Ровно «встык» оставляло щель в один пиксель, и в неё было видно бегущий текст — видно на снимке страницы. Шапка выше по z-index и накрывает этот пиксель сама. */ .editbar { position: sticky; top: 65px; z-index: 55; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; background: var(--bg); border-bottom: 1px solid var(--line); padding: 12px 0; margin-bottom: 26px; } .editbar input[type=password] { min-width: 220px; } .editbar input.ask { border-color: var(--red); } .editbar .cap { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); } .blk.edit { border: 1px solid var(--line); padding: 18px; } .blk .e-title { width: 100%; font-family: Oswald, sans-serif; font-size: 20px; } .blk .e-text { width: 100%; min-height: 150px; resize: vertical; font-family: Inter, sans-serif; font-size: 14px; line-height: 1.6; margin-top: 10px; } .blk .tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; } .blk .tools .grow { flex: 1 1 auto; } .blk .st { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; } .blk .cap { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 14px 0 6px; } /* показ отделён от поля, иначе читается как второй экземпляр текста */ .blk.edit > .body { border-top: 1px solid var(--line); padding-top: 4px; margin-top: 14px; } .ok { color: var(--ok); } .bad { color: var(--red); } .hint { font-size: 12px; color: var(--ink-3); margin-top: 8px; }