From 278a6de8a6854d541f01e6c8091fc31a8688cd93 Mon Sep 17 00:00:00 2001 From: Travis Abendshien <46939827+CyanVoxel@users.noreply.github.com> Date: Wed, 6 Aug 2025 11:48:33 -0700 Subject: [PATCH] feat(docs): vauxhall theme for docs site --- docs/assets/icon_mono.svg | 10 +++ docs/stylesheets/extra.css | 98 +++++++++++++++++++++++++- mkdocs.yml | 15 ++-- overrides/partials/header.html | 122 +++++++++++++++++++++++++++++++++ overrides/partials/nav.html | 69 +++++++++++++++++++ 5 files changed, 306 insertions(+), 8 deletions(-) create mode 100644 docs/assets/icon_mono.svg create mode 100644 overrides/partials/header.html create mode 100644 overrides/partials/nav.html diff --git a/docs/assets/icon_mono.svg b/docs/assets/icon_mono.svg new file mode 100644 index 00000000..67060eb0 --- /dev/null +++ b/docs/assets/icon_mono.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css index a0526aa9..e0fb1ecb 100644 --- a/docs/stylesheets/extra.css +++ b/docs/stylesheets/extra.css @@ -1,3 +1,99 @@ -th, td { +/* Dark Theme */ +[data-md-color-scheme="slate"] { + --md-default-bg-color: #060617; + --md-default-fg-color: #eae1ff; + --md-default-fg-color--light: #b898ff; + --md-code-fg-color: #eae1ffcc; + --md-code-hl-string-color: rgb(92, 255, 228); + --md-code-hl-keyword-color: rgb(61, 155, 255); + --md-code-hl-constant-color: rgb(205, 78, 255); + --md-footer-bg-color--dark: #03030c; + --md-code-bg-color: #090a26; +} + +/* Light Theme */ +[data-md-color-scheme="default"] { + --md-default-fg-color--light: #090a26; +} + +.md-header { + background: linear-gradient( + 60deg, + rgb(205, 78, 255) 10%, + rgb(116, 123, 255) 50%, + rgb(72, 145, 255) 75%, + rgb(98, 242, 255) 100% + ); +} + +th, +td { padding: 0.5em 1em 0.5em 1em !important; } + +.md-header { + border-style: solid; + border-width: 0 0 2px 0; + border-color: #ffffff33; +} + +.md-header__title { + font-family: "Bai Jamjuree", Roboto, sans-serif; + font-weight: 500 !important; + font-size: 1.1rem; + letter-spacing: -0.05rem !important; +} + +.md-nav__title, +h1, +h2, +.md-nav__item--section > .md-nav__link { + font-family: "Bai Jamjuree", Roboto, sans-serif; + font-weight: 500 !important; + font-size: 0.8rem; + letter-spacing: -0.05rem !important; +} + +/* Add padding to stop text from cutting off early due to negative letter spacing */ +.md-nav__item--section > .md-nav__link > .md-ellipsis { + padding-right: 0.5rem; +} +.md-header__title .md-header__topic .md-ellipsis { + padding-right: 0.5rem; +} + +.md-header__button.md-logo { + padding-right: 0; + padding-bottom: 0.3rem; + margin-right: -0.8rem; +} + +.md-search__form { + height: 1.5rem; + background-color: #00004444; + border-radius: 0.3rem !important; + border-style: solid; + border-width: 2px 1px 0 1px; + border-color: #00004422; + padding-bottom: 2px; +} +.md-search__form > .md-icon { + margin-top: -0.2rem; +} + +.twemoji { + margin-top: 0.05rem; +} + +/* Matches the palette used by mkdocs-material */ +.priority-high { + color: #f1185a; +} + +.priority-med { + color: #7c4eff; +} + +.priority-low { + color: #28afff; +} diff --git a/mkdocs.yml b/mkdocs.yml index 3c12ae68..212678d8 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -53,29 +53,30 @@ nav: theme: name: material + custom_dir: overrides palette: # Palette toggle for automatic mode - media: "(prefers-color-scheme)" toggle: - icon: material/brightness-auto - name: Switch to light mode + icon: material/lightbulb-auto-outline + name: Switch to Light Mode # Palette toggle for light mode - media: "(prefers-color-scheme: light)" scheme: default primary: deep purple accent: deep purple toggle: - icon: material/brightness-7 - name: Switch to dark mode + icon: material/lightbulb + name: Switch to Dark Mode # Palette toggle for dark mode - media: "(prefers-color-scheme: dark)" scheme: slate primary: deep purple accent: deep purple toggle: - icon: material/brightness-4 - name: SSwitch to system preference - logo: assets/icon.png + icon: material/lightbulb-night-outline + name: Switch to System Preference + logo: assets/icon_mono.svg favicon: assets/icon.ico font: false # use system fonts language: en diff --git a/overrides/partials/header.html b/overrides/partials/header.html new file mode 100644 index 00000000..0db2a399 --- /dev/null +++ b/overrides/partials/header.html @@ -0,0 +1,122 @@ + + + +{% set class = "md-header" %} +{% if "navigation.tabs.sticky" in features %} + {% set class = class ~ " md-header--shadow md-header--lifted" %} +{% elif "navigation.tabs" not in features %} + {% set class = class ~ " md-header--shadow" %} +{% endif %} + + +
+ + + + {% if "navigation.tabs.sticky" in features %} + {% if "navigation.tabs" in features %} + {% include "partials/tabs.html" %} + {% endif %} + {% endif %} +
diff --git a/overrides/partials/nav.html b/overrides/partials/nav.html new file mode 100644 index 00000000..119d738a --- /dev/null +++ b/overrides/partials/nav.html @@ -0,0 +1,69 @@ + + +{% import "partials/nav-item.html" as item with context %} + + +{% set class = "md-nav md-nav--primary" %} +{% if "navigation.tabs" in features %} + {% set class = class ~ " md-nav--lifted" %} +{% endif %} +{% if "toc.integrate" in features %} + {% set class = class ~ " md-nav--integrated" %} +{% endif %} + + +