Интерфейс в работе

Основы из действующего CSS

Значения прочитаны при сборке из tokens.css: базовая светлая тема, явные переопределения тёмной темы и desktop ≥ 1100px. Тире означает наследование базового значения.

Шрифты, размеры и композиция

Ниже — действующие правила из переданного assets/style.css, в исходном порядке, включая адаптивные переопределения. Числа и селекторы не заменены демонстрационными значениями.

body{margin:0;background:var(--color-surface);color:var(--color-text);font:var(--text-body)/var(--leading-body) var(--font-body)}
h1,h2,h3{font-family:var(--font-heading);font-weight:850;line-height:1.12;letter-spacing:-.025em;overflow-wrap:break-word}
h1{font-size:clamp(36px,4.7vw,68px);margin:16px 0 24px}
h2{font-size:clamp(29px,3vw,44px);margin:40px 0 20px}
.masthead{max-width:1320px;margin:auto;padding:24px 4vw;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:3px solid var(--color-brand)}
.masthead nav{display:flex;gap:6px 22px;flex-wrap:wrap;align-items:center}
.masthead nav a{min-height:44px;display:flex;align-items:center;font-size:15px;text-decoration:none;font-weight:700}
.masthead nav a:hover,.masthead nav a[aria-current]{text-decoration:underline;text-decoration-color:var(--color-attention);text-decoration-thickness:3px}
.article-layout{display:grid;grid-template-columns:200px minmax(0,790px);gap:48px;justify-content:center;padding:12px 4vw 72px}
.table-scroll{max-width:100%;overflow-x:auto;border:1px solid var(--color-border);margin:26px 0;scrollbar-color:var(--color-brand) var(--color-surface-muted)}
.photo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:28px;align-items:start}
.photo-grid .historical-photo{margin:0}
.photo-grid img{height:auto;object-fit:contain}
.portraits{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.portraits img{width:auto;max-width:100%;height:auto;object-fit:contain}
.portraits figcaption{font-size:13px}
.masthead{align-items:flex-start;flex-direction:column;gap:18px}
.article-layout{grid-template-columns:170px minmax(0,1fr);gap:28px}
.masthead{padding:22px 6vw 16px}
.masthead nav{gap:0 20px}
.article-layout{display:flex;flex-direction:column;padding:0 6vw 48px;gap:24px}
.photo-grid{grid-template-columns:1fr;gap:28px}
.portraits{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.masthead nav{justify-content:flex-end;flex:1}
.front-workshop{background:var(--color-inverse);color:var(--color-inverse-text);border-left:8px solid var(--color-attention);padding-top:42px;padding-bottom:46px}
.front-workshop .kicker{color:var(--color-signal)}
.front-workshop h1{font-size:clamp(40px,4.2vw,64px);line-height:1.02;letter-spacing:-.04em;margin-top:22px;overflow-wrap:normal}
.front-workshop p:not(.kicker),.front-workshop figcaption{color:var(--color-inverse-muted)}
.front-workshop .button{background:var(--color-signal);color:var(--color-signal-text);border-color:var(--color-signal)}
.front-workshop .button:hover{background:var(--color-focus-inverse)}
.front-workshop a:focus-visible{outline-color:var(--color-focus-inverse)}
.front-workshop .historical-photo img{max-width:min(100%,584px)}
.front-workshop figcaption{border-top:1px solid var(--color-inverse-border);padding-top:12px}
.masthead nav{justify-content:flex-start;flex:initial}
.front-workshop h1{font-size:clamp(38px,4.8vw,54px)}
.front-workshop{padding:30px 6vw 34px;border-left-width:6px}
.front-workshop h1{font-size:clamp(34px,9.5vw,54px)}
.front-workshop h1 br{display:initial}
.front-workshop .hero-last-line{font-size:.79em}
.masthead{display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;gap:8px 14px;padding:12px 6vw}
.masthead .brand{grid-column:1;grid-row:1;font-size:29px;min-width:0}
.masthead .brand small{display:none}
.masthead nav{grid-column:1/-1;grid-row:2;width:100%;gap:0 18px}
.masthead nav a{min-height:44px}
.masthead .brand-mark{width:40px;height:40px}
.masthead .brand{font-size:28px}
.masthead nav{grid-column:1/-1;grid-row:2}

Анатомия и свойства

title, lead, level; заголовок и необязательный вводный абзац

Варианты

H1 страницы; H2 образца; без лида

Состояния

Длинный заголовок переносится; текст не обрезается

Клавиатура

Не интерактивен; порядок заголовков

Мобильный экран

Одна колонка; естественный перенос

Источник

site_ui.shared.article_heading → pages.article

Анатомия и свойства

section, date_text, date_iso; time с машинной датой

Варианты

Раздел без даты; раздел с датой

Состояния

Историческая дата сохраняется; отсутствующая дата не выдумывается

Клавиатура

Не интерактивен

Мобильный экран

Разрешён перенос даты и категории

Источник

site_ui.shared.metadata → pages.article

Анатомия и свойства

href, label, arrow; навигационные anchors

Варианты

Основная кнопка-ссылка; текстовая ссылка

Состояния

Обычное, hover, focus-visible, visited по браузеру

Клавиатура

Tab; Enter открывает адрес

Мобильный экран

Текст переносится; размер цели сохраняется

Источник

site_ui.shared.action_link / text_link → home / not_found

Анатомия и свойства

item.url, title, date; дата, заголовок, стрелка

Варианты

chronicle; related

Состояния

Длинное название и краткая новость; реальный href

Клавиатура

Tab и Enter; стрелка декоративная

Мобильный экран

Дата и заголовок переходят в одну колонку

Источник

entities.publication.render_publication_row → pages.chronicle

Анатомия и свойства

item; ссылка целиком, time, подпись

Варианты

Предыдущий / следующий по (date,url)

Состояния

У крайнего материала один сосед; без даты блока нет

Клавиатура

Tab и Enter

Мобильный экран

Подпись переносится без усечения

Источник

features.article_navigation.render_related(demo=True) → entities.publication.render_publication_row

Анатомия и свойства

headings: (id,title); details, summary, nav

Варианты

Три и более раздела: содержание; меньше: ссылки разделов

Состояния

Закрыто / открыто; настоящие якоря

Клавиатура

Tab; Space/Enter раскрывает summary; Enter переходит к якорю

Мобильный экран

Содержание располагается перед текстом

Источник

features.article_navigation.render_contents → pages.article

Анатомия и свойства

table_html уже очищен, label; регион, caption, строки и ячейки из корпуса

Варианты

Учебная база; практика; курсы; историческое расписание секций

Состояния

Широкая таблица прокручивается; текст ячеек сохранён

Клавиатура

Tab фокусирует регион; стрелки прокручивают при переполнении

Мобильный экран

Горизонтальная прокрутка внутри региона

Источник

shared.table_region → shared.richtext.sanitize → pages.article

Анатомия и свойства

table_html уже очищен, label; регион, caption, строки и ячейки из корпуса

Варианты

Учебная база; практика; курсы; историческое расписание секций

Состояния

Широкая таблица прокручивается; текст ячеек сохранён

Клавиатура

Tab фокусирует регион; стрелки прокручивают при переполнении

Мобильный экран

Горизонтальная прокрутка внутри региона

Источник

shared.table_region → shared.richtext.sanitize → pages.article

Анатомия и свойства

table_html уже очищен, label; регион, caption, строки и ячейки из корпуса

Варианты

Учебная база; практика; курсы; историческое расписание секций

Состояния

Широкая таблица прокручивается; текст ячеек сохранён

Клавиатура

Tab фокусирует регион; стрелки прокручивают при переполнении

Мобильный экран

Горизонтальная прокрутка внутри региона

Источник

shared.table_region → shared.richtext.sanitize → pages.article

Анатомия и свойства

table_html уже очищен, label; регион, caption, строки и ячейки из корпуса

Варианты

Учебная база; практика; курсы; историческое расписание секций

Состояния

Широкая таблица прокручивается; текст ячеек сохранён

Клавиатура

Tab фокусирует регион; стрелки прокручивают при переполнении

Мобильный экран

Горизонтальная прокрутка внутри региона

Источник

shared.table_region → shared.richtext.sanitize → pages.article

Анатомия и свойства

table_html уже очищен, label; регион, caption, строки и ячейки из корпуса

Варианты

Учебная база; практика; курсы; историческое расписание секций

Состояния

Широкая таблица прокручивается; текст ячеек сохранён

Клавиатура

Tab фокусирует регион; стрелки прокручивают при переполнении

Мобильный экран

Горизонтальная прокрутка внутри региона

Источник

shared.table_region → shared.richtext.sanitize → pages.article

Анатомия и свойства

src, width, height, caption, loading; figure + img + figcaption; принятые фотографии с исходными подписями

Варианты

Одиночная; сетка из трёх разных фото; сетка из трёх разных портретов

Состояния

lazy по умолчанию; eager у главного фото практики; alt равен подписи

Клавиатура

Изображение не получает лишний tabindex

Мобильный экран

Изображение ограничено шириной; подпись переносится

Источник

shared.photo_figure → build media enrichment

Анатомия и свойства

src, width, height, caption, loading; figure + img + figcaption; принятые фотографии с исходными подписями

Варианты

Одиночная; сетка из трёх разных фото; сетка из трёх разных портретов

Состояния

lazy по умолчанию; eager у главного фото практики; alt равен подписи

Клавиатура

Изображение не получает лишний tabindex

Мобильный экран

Изображение ограничено шириной; подпись переносится

Источник

shared.photo_figure → build media enrichment

Анатомия и свойства

src, width, height, caption, loading; figure + img + figcaption; принятые фотографии с исходными подписями

Варианты

Одиночная; сетка из трёх разных фото; сетка из трёх разных портретов

Состояния

lazy по умолчанию; eager у главного фото практики; alt равен подписи

Клавиатура

Изображение не получает лишний tabindex

Мобильный экран

Изображение ограничено шириной; подпись переносится

Источник

shared.photo_figure → build media enrichment

Фиксированный светлый фон

Фиксированный тёмный фон

Открыть исходный SVG · Открыть реальный ICO · PNG 180 × 180

Анатомия и свойства

size:16/32/48/180, format:svg/png, decorative; IMG с явными width/height; осмысленный alt либо alt пустой + aria-hidden

Варианты

Нативные PNG 16/32/48; SVG в шапке; ICO во вкладке; PNG180

Состояния

Знак проверяется на фиксированных светлом и тёмном фоне без CSS-увеличения; это современная айдентика издания

Клавиатура

Знак не получает tabindex; ссылка логотипа в шапке доступна Tab

Мобильный экран

Габариты сохраняются; подпись переносится

Источник

shared.brand_mark → widgets.site_shell; /assets/icon.svg / assets/brand/icon-N.png

1. Бригады сменяют ремонтные цеха под руководством мастера и наставников. Три мастерских на рисунке обозначают принцип ротации, а не точное число цехов.
2. Квалификационный экзамен на слесаря III разряда.
3. Переход в цех эксплуатации для работы помощником машиниста.

Анатомия и свойства

Точный figure из исходного HTML, локальный SVG, alt и figcaption

Варианты

Редакционная поясняющая схема; документальные фотографии показаны отдельно

Состояния

Редакционная визуализация не объявлена архивной фотографией

Клавиатура

Схема не получает лишнего tabindex; описание доступно текстом

Мобильный экран

Пропорции SVG сохраняются; подпись переносится

Источник

shared.richtext.sanitize → pages.article; /assets/v2/practice.svg

1. Пульт и приборы — органы управления и контрольно-измерительное оборудование.
2. Узлы и обслуживание — инструменты, ремонт и проверка оборудования.
3. Сигнализация и радиосвязь — связь и наблюдение за сигнальными устройствами.

Анатомия и свойства

Точный profession-visual из исходного HTML: изображение и нумерованное объяснение

Варианты

Редакционная схема оборудования; реальные исторические описания ниже на странице

Состояния

Содержимое и порядок исходной схемы сохранены

Клавиатура

Нумерованное пояснение читается в порядке DOM

Мобильный экран

Схема и список перестраиваются глобальным production CSS

Источник

shared.richtext.sanitize → pages.article; /assets/v2/locomotive.svg

Анатомия и свойства

text; спокойное сообщение после исторического текста

Варианты

Расписание 2011; планы 2013/2014

Состояния

Отсутствующий файл не превращается в активную кнопку

Клавиатура

Не интерактивен

Мобильный экран

Текст занимает доступную ширину

Источник

shared.availability_note → pages.article

Анатомия и свойства

Краткий полный исходный текст без искусственного дополнения

Варианты

Короткая и развёрнутая публикация

Состояния

Историческая краткость отражена в корпусе

Клавиатура

Ссылки при наличии доступны Tab

Мобильный экран

Та же мера строки, что у статьи

Источник

pages.article + shared.richtext

Анатомия и свойства

form, label, input[q], button, live status, results; реальный индекс

Варианты

Пустой запрос; результаты; нет совпадений

Состояния

Введите запрос: состояние обновляет штатный search.js; отправка GET

Клавиатура

Tab; ввод; Enter; status сообщает результат

Мобильный экран

Поле и кнопка адаптируются к ширине

Источник

features.search.render_search_controls + /assets/search.js

Анатомия и свойства

state, live=False, count; тот же публичный renderer, без дублирования ID и live region

Варианты

empty / loading / results / zero / error

Состояния

Живая начальная строка находится в форме выше; образцы используют те же тексты

Клавиатура

Статические состояния не получают tabindex; живой status объявляет изменения

Мобильный экран

Текст свободно переносится

Источник

features.search.render_search_state → render_search_controls / assets/search.js

Анатомия и свойства

Код состояния, объяснение, два действующих пути восстановления

Варианты

Реальная 404-страница; здесь только образец содержимого

Состояния

Без фиктивного HTTP-статуса и без telemetry wrapper

Клавиатура

Tab / Enter на ссылках

Мобильный экран

Действия переносятся в доступную ширину

Источник

pages.not_found + shared.action_link / text_link

Анатомия и свойства

Исходные адресные абзацы и заголовки; исторический контекст

Варианты

Адрес; пояснение о действующем учебном заведении

Состояния

Исторический адрес не выдаётся за актуальные правила приёма

Клавиатура

Обычный порядок чтения; реальные ссылки доступны Tab

Мобильный экран

Адрес переносится без горизонтального переполнения

Источник

shared.richtext.sanitize → pages.article

Анатомия и свойства

p, h2/h3, ul/ol/li, strong/em; разрешённые исторические фрагменты

Варианты

Абзац; маркированный и нумерованный список; выделение

Состояния

Недопустимый тег или непроверенная внешняя ссылка отклоняются

Клавиатура

Семантические блоки читаются в исходном порядке

Мобильный экран

Мера строки ограничена глобальным стилем статьи

Источник

shared.richtext.sanitize → pages.article

Анатомия и свойства

item.url, title, date; publication-row, time, h3, декоративная стрелка

Варианты

compact / chronicle / related

Состояния

Длинное название не сокращается программно

Клавиатура

Tab и Enter

Мобильный экран

Порядок дата → заголовок сохраняется

Источник

entities.publication.render_publication_row → pages.home

Анатомия и свойства

Шапка, логотип, основная навигация, main, footer; переключатель темы в шапке этой страницы

Варианты

Системная / Светлая / Тёмная; desktop / mobile

Состояния

Тема сохраняется; System следует системной настройке; проверяйте рабочий переключатель в шапке

Клавиатура

Tab; Enter и Space меняют режим; skip-link ведёт в main

Мобильный экран

Навигация переносится; оболочка не дублируется в образце

Источник

widgets.site_shell + assets/theme.js

Анатомия и свойства

sections: (url,label,detail), title; section-heading и нумерованный station-list

Варианты

Реальные профессии / практика / хроника / люди

Состояния

Один и тот же widget на главной и здесь; ссылки ведут в корпус

Клавиатура

Tab и Enter открывают выбранную станцию

Мобильный экран

Список станций перестраивается по глобальным правилам

Источник

widgets.publication_journey + entities.edition.EDITION_SECTIONS → pages.home

Анатомия и свойства

context задаёт доступную подпись; button[data-theme-control]

Варианты

Системная / Светлая / Тёмная

Состояния

Дополнительная кнопка синхронизируется с шапкой и сохранённым выбором

Клавиатура

Одна кнопка: Tab фокусирует, Enter и Space последовательно меняют режим

Мобильный экран

Одна цель 44 × 44 px в навигации, без отдельного ряда настроек

Источник

features.theme.render_theme_control → widgets.site_shell; assets/theme.js