diff --git a/docs/overrides/javascript/menu-toggle.js b/docs/overrides/javascript/menu-toggle.js new file mode 100644 index 0000000..96d6f2e --- /dev/null +++ b/docs/overrides/javascript/menu-toggle.js @@ -0,0 +1,9 @@ +const menuTrigger = document.getElementById("menu-toggle"); +const drawerToggle = document.querySelector( + 'input[type=checkbox][data-md-toggle="drawer"]' +); +if (menuTrigger && drawerToggle) { + menuTrigger.addEventListener("click", () => { + drawerToggle.checked = !drawerToggle.checked; + }); +} diff --git a/docs/overrides/partials/header.html b/docs/overrides/partials/header.html index 3016e15..5b069f2 100644 --- a/docs/overrides/partials/header.html +++ b/docs/overrides/partials/header.html @@ -15,6 +15,9 @@ {% include "partials/search.html" %}
- - - diff --git a/docs/stylesheets/spark.css b/docs/stylesheets/spark.css index 6b58a49..8184632 100644 --- a/docs/stylesheets/spark.css +++ b/docs/stylesheets/spark.css @@ -139,21 +139,26 @@ max-width: 600px; } +@media screen and (max-width: 30em) { + .md-header { + padding-inline: 10px; + } + .md-header__button { + padding: 0.2rem; + } +} + @media screen and (max-width: 60em) { .feature-list { font-size: 0.8rem; } .md-custom-header-right { + gap: 0.5rem; margin-left: 0; margin-right: 0; } - .icon-discord, - .icon-github { - margin-right: 1rem; - } - .icon-discord { width: 25px; height: 25px; @@ -172,4 +177,15 @@ margin-left: 0; margin-right: 0; } +} + + +header .header__menu-toggle { + color: inherit; + display: none; +} +@media screen and (max-width: 76.234375em) { + header .header__menu-toggle { + display: inline; + } } \ No newline at end of file diff --git a/mkdocs.yml b/mkdocs.yml index bbbc39c..68fff2c 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -5,9 +5,11 @@ theme: favicon: assets/images/favicon.png custom_dir: docs/overrides features: - - content.code.copy + - content.code.copy extra_css: - stylesheets/spark.css +extra_javascript: + - javascript/menu-toggle.js nav: - Home: index.md - Getting Started: docs/index.md