From e77fba7e65b754b4a16dbfc617d2743a82bc8d94 Mon Sep 17 00:00:00 2001 From: kislovdm Date: Tue, 11 Aug 2026 16:03:31 +0300 Subject: [PATCH] =?UTF-8?q?=D0=9F=D1=80=D0=B8=D0=B2=D0=B5=D1=81=D1=82?= =?UTF-8?q?=D0=B8=20=D1=82=D0=B5=D0=BC=D1=83=20faq.khap.ru=20=D0=B2=20?= =?UTF-8?q?=D1=81=D0=BE=D0=BE=D1=82=D0=B2=D0=B5=D1=82=D1=81=D1=82=D0=B2?= =?UTF-8?q?=D0=B8=D0=B5=20=D1=81=20=D0=BB=D0=B5=D0=BD=D0=B4=D0=B8=D0=BD?= =?UTF-8?q?=D0=B3=D0=BE=D0=BC=20khap.ru?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Тёмный фон + фиолетово-золотые "королевские" акценты, шрифты Cinzel (заголовки) + Manrope (текст), корона в логотипе/favicon — тот же визуальный язык, что на продающем лендинге главной страницы. Схема оставлена "dracula" намеренно: JS плагина mkdocs_pymdownx_material_extras хардкодит это имя как дефолтную тёмную схему (--> localStorage) и принудительно выставляет его на body, если ничего не сохранено — переименование ничего не даёт, схема откатится. Тот же плагин задаёт свои CSS-переменные через `:root>*[data-md-color-scheme=dracula]` и компонентные правила вплоть до specificity (0,3,0) (например, цвет активного пункта меню через --md-primary-fg-color) — наши переопределения подобраны так, чтобы либо превышать эту специфичность (`:root>body[...]`), либо не конфликтовать вовсе (primary-fg-color сделан видимым фиолетовым, а не тёмным, иначе текст активного пункта меню становится невидимым на тёмном фоне — фон хедера при этом управляется отдельным токеном --md-header-bg-color). Проверено локально: mkdocs build + скриншоты всех разделов (десктоп и мобильный вьюпорт), реальный computed-color активных ссылок/пунктов меню. --- .gitignore | 1 + docs/stylesheets/extra.css | 87 ++++++++++++++++++++++++++++++++++++ docs/stylesheets/favicon.svg | 6 +++ mkdocs.yml | 11 +++-- 4 files changed, 101 insertions(+), 4 deletions(-) create mode 100644 docs/stylesheets/extra.css create mode 100644 docs/stylesheets/favicon.svg diff --git a/.gitignore b/.gitignore index 2c8fc51..6d4b105 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,4 @@ __pycache__/ *.pyc site/ .DS_Store +.venv/ diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css new file mode 100644 index 0000000..a674068 --- /dev/null +++ b/docs/stylesheets/extra.css @@ -0,0 +1,87 @@ +/* Тема "Королевский Хап" — приведена в соответствие с продающим лендингом + на khap.ru (тёмный фон + фиолетово-золотые "королевские" акценты). */ + +@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;900&display=swap'); + +/* Схема ОБЯЗАНА называться "dracula": JS плагина mkdocs_pymdownx_material_extras + (material-extra-theme-*.js) хардкодит `c || (c = "dracula")` и принудительно + выставляет body[data-md-color-scheme] в "dracula", если в localStorage нет + сохранённого выбора — переименовать схему нельзя, она всё равно откатится. + Тот же плагин задаёт свои переменные через `:root>*[data-md-color-scheme=dracula]` + (специфичность 0,2,0) — используем `:root>body[...]` (0,2,1), чтобы наши + значения побеждали независимо от порядка подключения стилей. */ +:root>body[data-md-color-scheme="dracula"] { + /* базовый фон/текст */ + --md-default-bg-color: #0f0a1c; + --md-default-bg-color--light: #150f27; + --md-default-bg-color--lighter: #1b1433; + --md-default-bg-color--lightest: #221a3d; + --md-default-fg-color: #f3eefc; + --md-default-fg-color--light: #c9bfe0; + --md-default-fg-color--lighter: #a99cc9; + --md-default-fg-color--lightest: rgba(196,167,255,.14); + + /* фиолетовый — акцент (активный пункт меню, кнопки, граница TOC, бренд). + Не делать тёмным: плагин использует var(--md-primary-fg-color) как цвет + ТЕКСТА активного пункта меню — тёмный тут = невидимый текст на тёмном фоне. */ + --md-primary-fg-color: #8b5cf6; + --md-primary-fg-color--light: #a78bfa; + --md-primary-fg-color--dark: #6d28d9; + --md-primary-bg-color: #f3eefc; + --md-primary-bg-color--light: #c9bfe0; + + /* фон хедера — свой токен плагина, не завязан на primary-fg-color */ + --md-header-bg-color: #0f0a1c; + + /* золотой — акцент (активный пункт меню, поиск, кнопки, ссылки в тексте) */ + --md-accent-fg-color: #f0c34e; + --md-accent-fg-color--transparent: rgba(240,195,78,.15); + --md-accent-bg-color: #241704; + --md-accent-bg-color--light: #241704; + + --md-typeset-color: #f3eefc; + --md-typeset-a-color: #f0c34e; + + --md-code-bg-color: #1b1433; + --md-code-fg-color: #d8c8ff; + + --md-footer-bg-color: #0c0815; + --md-footer-bg-color--dark: #0c0815; + --md-footer-fg-color: #f3eefc; + --md-footer-fg-color--light: #a99cc9; +} + +/* мягкое "королевское" сияние по углам, как на лендинге */ +[data-md-color-scheme="dracula"] .md-container { + background: + radial-gradient(ellipse 900px 500px at 15% -10%, rgba(139,92,246,.20), transparent 60%), + radial-gradient(ellipse 700px 500px at 100% 10%, rgba(240,195,78,.10), transparent 55%); +} + +[data-md-color-scheme="dracula"] .md-header { + border-bottom: 1px solid rgba(196,167,255,.14); + box-shadow: none; +} + +[data-md-color-scheme="dracula"] .md-nav__link--active, +[data-md-color-scheme="dracula"] .md-nav__link:focus, +[data-md-color-scheme="dracula"] .md-nav__link:hover { + color: var(--md-accent-fg-color); +} + +[data-md-color-scheme="dracula"] .md-typeset .admonition, +[data-md-color-scheme="dracula"] .md-typeset details { + background-color: var(--md-default-bg-color--lighter); + border-color: rgba(196,167,255,.14); +} + +/* заголовки — тот же декоративный шрифт, что и на лендинге khap.ru */ +.md-typeset h1, +.md-typeset h2, +.md-typeset h3, +.md-header__topic, +.md-nav__title { + font-family: 'Cinzel', Georgia, serif; +} + +.md-typeset h1 { font-weight: 700; } diff --git a/docs/stylesheets/favicon.svg b/docs/stylesheets/favicon.svg new file mode 100644 index 0000000..a5a2f32 --- /dev/null +++ b/docs/stylesheets/favicon.svg @@ -0,0 +1,6 @@ + + + + diff --git a/mkdocs.yml b/mkdocs.yml index 10b0552..ba60eb4 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -6,14 +6,14 @@ theme: name: material #custom_dir: theme icon: - logo: material/book-open-page-variant + logo: material/crown + favicon: stylesheets/favicon.svg palette: scheme: dracula primary: deep purple accent: deep purple - #font: - # text: Roboto - # code: Roboto Mono + font: + text: Manrope # features: # - navigation.tabs @@ -90,6 +90,9 @@ extra: - icon: fontawesome/brands/github link: https://github.com/korolevskiyhap/faq/ +extra_css: + - stylesheets/extra.css + plugins: - search: lang: