Дизайн домену

У панелі: «Домен» → «Дизайн». Один екран, яким фарбується весь домен — і звичайні сторінки, і сторінка завдання в грі.

Раніше оформлення збирали, перебиваючи правила движка по одному: писали в css домену довгий список селекторів і на кожен ставили свій колір. Тепер у цього є два простіші шари — тема і токени, — і свій css пишуть уже поверх них, а не замість них.

Тема — це готовий набір значень, поверх яких лягає ваш css. Обирається на вкладці «Налаштування домену», рядок «Тема оформлення».

• Без теми — те, як домен виглядав завжди.
• Зелена
• Dark Purple
• Dark Radix
• Light Radix

Тема фарбує домен цілком, а не лише гру. Один і той самий набір описує і сайт, і гру, і світлий режим, і темний, — тож домен не може опинитися з піщаним днем і кіберпанковою ніччю.

Тема — це поправка, а не повний набір: чого вона не назвала, лишається від движка. Тому «Без теми» — це не «зламано», а «все за замовчуванням».

Верхній ряд — екрани:

• «Меню» — рядок посилань під шапкою, на кожній сторінці сайту.
• «Сайт» — звичайні сторінки: головна, список ігор, профіль.
• «Гра» — сторінка завдання. Своя тема на світлу і на темну.
• «Налаштування домену» — title, стартова сторінка і вибір теми.

Другий ряд — слоти, тобто самі поля, куди ви пишете:

Під вкладками — рядок про те, на що лягає відкритий слот, і поряд із кожним css-слотом посилання «Токени теми».

Ліворуч — редактор, праворуч — вітрина. Вітрина — не жива сторінка домену, а зразок, зібраний студією: у «Сайту» це меню, базова сторінка, список ігор, статистика, карта кодів і лог відповідей (у вітрини є свій зміст), у «Гри» — контейнер завдання, інвентар, спойлер і алерт. Так зроблено навмисно: чернетка більше не потрапляє на справжні сторінки, де її міг би побачити будь-хто.

У вітрини свої перемикачі: «Світла» / «Темна» (лише на екрані «Гра»), на всю ширину або як на телефоні, і «Перемалювати».

css застосовується на кожному натисканні клавіші, без перезавантаження вітрини. HTML так не вміє — його збирає сервер, і вітрина перемальовується через паузу після того, як ви перестали друкувати.

Токен — це ім'я кольору (чи розміру), яким движок користується в усіх своїх правилах: –qeng-body-bg, –qeng-surface-bg, –qeng-accent і ще кілька сотень. Задали ім'я — і колір розійшовся по всіх правилах сам, перебивати селектори не потрібно:

:root {
  --qeng-body-bg: #050505;
}

Список відкривається посиланням «Токени теми» поряд із будь-яким css-слотом.

• Імена згруповані, і першою стоїть палітра — ті кілька десятків, якими описано весь сайт. Зазвичай вистачає її: ролі екранів беруть колір із палітри і змінюються слідом. Розкривайте решту груп, лише якщо потрібно відвести вбік щось одне.
• Квадратик поряд з ім'ям показує колір після вашого css, а не значення за замовчуванням, — так видно, що ви вже перевизначили.
• Групи, які до відкритого слота не стосуються, сховані.
• Частина токенів позначена як движкова: їх не перебити нічим, і на слотах вони не пропонуються зовсім.

Це довідник, а не поле введення: правите ви й далі css, токени тут лише перелічені.

Над вітриною стоїть смуга перевірки контрастності: «Контрастність: OK (N елементів)» або «N проблем контрастності», стрілки «◀ ▶» по проблемах і «Показати всі». Пороги в ній навмисно м'якші за вимоги WCAG — це пошук явно нечитабельного, а не аудит доступності.

Кнопка «🔍 Інспектор» вмикає вибір елемента: клацаєте по чому завгодно у вітрині і бачите, з якого шару прийшло правило:

• 📄 на сторінці (inline і <style>),
• 🌐 дизайн домену (ваш css),
• 🎨 тема,
• ⚙️ базовий дизайн qeng (движок),
• 🅱️ Bootstrap.

Кнопка «➕ У редактор» вставляє селектор у відкритий слот. На html-слоті вона не працює — вставляти правило нікуди.

Обидва інструменти працюють лише на css-слоті. Коли відкритий html-слот, у вітрині крутиться ваш html, і вона віддається в пісочниці; інспектор при цьому закривається сам, а смуга контрастності мовчить. Це не поломка, а межа безпеки.

• Чернетка лежить у вашому браузері. Повернулися на сторінку — студія запитає: «Знайдено незбережену чернетку від … Відновити її?». Якщо за цей час слот устигли змінити на сервері, вона назве, який саме, і попросить подивитися його в списку змін.
• «Зберегти» спершу показує вікно «Зміни перед збереженням» — порядково, по кожному зміненому слоту. Те саме вікно, що й у редакторі завдань.
• «Історія (N)» — до 30 останніх збережених версій, підписані датою і логіном того, хто зберігав.
• Межі: html-слот — 64 КБ, файл css — 512 КБ. Не влізло — студія скаже, що саме і наскільки.

Зламали верстку так, що сторінка не відкривається? Додайте до адреси ?safe — домен покажеться зовсім без свого оформлення і без теми, і студія відкриється.

Адмінські сторінки і редактори на своїх сторінках оформлення домену не беруть — ні теми, ні вашого css, ні вашої шапки. Вони виглядають однаково на будь-якому домені; екрана для них у студії немає зовсім.

Дві тонкощі, об які найпростіше спіткнутися:

• Смуга адмінки над сторінками сайту і гри — фарбується. Не беруть оформлення адмінські сторінки, а не сама панель.
• Редактор завдань бере тему лише вбудованим — коли він відкритий просто на сторінці гри. На своїй окремій сторінці він завжди світлий.

Світлий і темний режим у грі обирає гравець — перемикачем «Темний режим» у меню гри. Це не тема домену і з нею не пов'язано: тема описує обидва режими одразу.

Технічно режим — це атрибут на кореневому елементі сторінки:

:root[data-theme="dark"]  { /* ніч */ }
:root[data-theme="light"] { /* день */ }

Атрибут ставить лише сторінка гри. На сторінках сайту його немає зовсім, тож html:not([data-theme]) — це сторінка сайту, а не день. Правило дня пишеться [data-theme=“light”].

У css домену для гри цього зазвичай писати не треба: у домену світла і темна теми лежать двома різними слотами, і движок підключає потрібний файл сам.

Якщо тему треба нав'язати на одному рівні — це робиться скриптом завдання: Елементи сторінки завдання.

• Темне оформлення правилами — як це робили до тем; приклад лишився.
• Налаштування меню домену
• Сторінки домену
• Переклад домену