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: