kislovdm
e77fba7e65
Тёмный фон + фиолетово-золотые "королевские" акценты, шрифты 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 активных ссылок/пунктов меню.
88 lines
4.2 KiB
CSS
88 lines
4.2 KiB
CSS
/* Тема "Королевский Хап" — приведена в соответствие с продающим лендингом
|
|
на 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; }
|