From a515bb04c7875530c2c136322a76ce55c7e9a95f Mon Sep 17 00:00:00 2001 From: Joe Strouth Date: Tue, 8 Jul 2025 21:25:35 -0400 Subject: [PATCH 1/4] feat(docs): add menu drawer toggle on sm-md viewports --- docs/overrides/javascript/menu-toggle.js | 10 ++++++++++ docs/overrides/partials/header.html | 1 + docs/stylesheets/spark.css | 11 +++++++++++ mkdocs.yml | 4 +++- 4 files changed, 25 insertions(+), 1 deletion(-) create mode 100644 docs/overrides/javascript/menu-toggle.js diff --git a/docs/overrides/javascript/menu-toggle.js b/docs/overrides/javascript/menu-toggle.js new file mode 100644 index 0000000..c97b99f --- /dev/null +++ b/docs/overrides/javascript/menu-toggle.js @@ -0,0 +1,10 @@ +const menuTrigger = document.getElementById("menu-toggle"); +const drawerToggle = document.querySelector( + 'input[type=checkbox][data-md-toggle="drawer"]' +); +console.info({ menuTrigger, drawerToggle }); +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..89f0501 100644 --- a/docs/overrides/partials/header.html +++ b/docs/overrides/partials/header.html @@ -15,6 +15,7 @@ {% include "partials/search.html" %}
+ Examples Docs Viewer diff --git a/docs/stylesheets/spark.css b/docs/stylesheets/spark.css index 6b58a49..45478ce 100644 --- a/docs/stylesheets/spark.css +++ b/docs/stylesheets/spark.css @@ -172,4 +172,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 From 5aac4f44492e0ef030af0ddef0b3fef6ecbd9522 Mon Sep 17 00:00:00 2001 From: Joe Strouth Date: Tue, 8 Jul 2025 21:51:41 -0400 Subject: [PATCH 2/4] chore: cleanup --- docs/overrides/javascript/menu-toggle.js | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/overrides/javascript/menu-toggle.js b/docs/overrides/javascript/menu-toggle.js index c97b99f..96d6f2e 100644 --- a/docs/overrides/javascript/menu-toggle.js +++ b/docs/overrides/javascript/menu-toggle.js @@ -2,7 +2,6 @@ const menuTrigger = document.getElementById("menu-toggle"); const drawerToggle = document.querySelector( 'input[type=checkbox][data-md-toggle="drawer"]' ); -console.info({ menuTrigger, drawerToggle }); if (menuTrigger && drawerToggle) { menuTrigger.addEventListener("click", () => { drawerToggle.checked = !drawerToggle.checked; From c876018f0cb22442b682ade0b6b342920b382a51 Mon Sep 17 00:00:00 2001 From: Joe Strouth Date: Wed, 9 Jul 2025 10:17:34 -0400 Subject: [PATCH 3/4] style: swap menu text for icon, adjust header sizing on sm screens --- docs/overrides/partials/header.html | 14 ++++++++------ docs/stylesheets/spark.css | 12 +++++++----- 2 files changed, 15 insertions(+), 11 deletions(-) diff --git a/docs/overrides/partials/header.html b/docs/overrides/partials/header.html index 89f0501..5b069f2 100644 --- a/docs/overrides/partials/header.html +++ b/docs/overrides/partials/header.html @@ -15,7 +15,9 @@ {% include "partials/search.html" %}
- + Examples Docs Viewer @@ -24,12 +26,12 @@ + + + + +
- - - - -
diff --git a/docs/stylesheets/spark.css b/docs/stylesheets/spark.css index 45478ce..ce1b5bb 100644 --- a/docs/stylesheets/spark.css +++ b/docs/stylesheets/spark.css @@ -139,21 +139,23 @@ max-width: 600px; } +@media screen and (max-width: 30em) { + .md-header { + padding-inline: 0; + } +} + @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; From 7676b47a652407de09f000d36aab84a319ccb97f Mon Sep 17 00:00:00 2001 From: Joe Strouth Date: Wed, 9 Jul 2025 10:33:46 -0400 Subject: [PATCH 4/4] style: add a bit of padding back by shrinking button sizes slightly --- docs/stylesheets/spark.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/docs/stylesheets/spark.css b/docs/stylesheets/spark.css index ce1b5bb..8184632 100644 --- a/docs/stylesheets/spark.css +++ b/docs/stylesheets/spark.css @@ -141,7 +141,10 @@ @media screen and (max-width: 30em) { .md-header { - padding-inline: 0; + padding-inline: 10px; + } + .md-header__button { + padding: 0.2rem; } }