From 2cad23f59eafc5dae2927bb268a01823a3702a52 Mon Sep 17 00:00:00 2001
From: Nate Contino <nate.contino@raspberrypi.com>
Date: Thu, 12 Dec 2024 16:43:51 +0000
Subject: [PATCH] Switch mobile menu and theme toggle to inline svg assets
 instead of font-dependent unicode

---
 jekyll-assets/_layouts/docs.html |  9 ++++++++-
 jekyll-assets/css/style.css      | 10 ++++------
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/jekyll-assets/_layouts/docs.html b/jekyll-assets/_layouts/docs.html
index cd49d1317..850f27500 100644
--- a/jekyll-assets/_layouts/docs.html
+++ b/jekyll-assets/_layouts/docs.html
@@ -17,7 +17,14 @@ <h1 id="docs-header-title">
                   Documentation
                 </a>
               </h1>
-              <label class="mobile-menu-toggle" for="mobile-toggle"><div>≣</div></label>
+              <label class="mobile-menu-toggle" for="mobile-toggle">
+                <svg width="35px" height="30px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                <rect x="0" fill="none" width="20" height="20"/>
+                <g>
+                <path fill="var(--textcolor)" d="M20 5V2H0v3h20zm0 6V8H0v3h20zm0 6v-3H0v3h20z"/>
+                </g>
+                </svg>
+              </label>
               {% include theme.html %}
             </div>
             <div id="docsearch">
diff --git a/jekyll-assets/css/style.css b/jekyll-assets/css/style.css
index c3303332e..0b42cd904 100644
--- a/jekyll-assets/css/style.css
+++ b/jekyll-assets/css/style.css
@@ -19,8 +19,7 @@
   --copy-button-text: #CCC;
   --textcolor: white;
   --subtle-text: #CCC;
-  --theme-toggle-label: "☀️";
-  --not-expanded-label: "▶";
+  --theme-toggle-label: url("data:image/svg+xml;utf8,<svg width=\'40px\' height=\'40px\' viewBox=\'0 0 16 16\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'><path d=\'M7 3V0H9V3H7Z\' fill=\'%23FFF\'/><path d=\'M9 13V16H7V13H9Z\' fill=\'%23FFF\'/><path d=\'M11 8C11 9.65685 9.65685 11 8 11C6.34315 11 5 9.65685 5 8C5 6.34315 6.34315 5 8 5C9.65685 5 11 6.34315 11 8Z\' fill=\'%23FFF\'/><path d=\'M0 9H3V7H0V9Z\' fill=\'%23FFF\'/><path d=\'M16 7H13V9H16V7Z\' fill=\'%23FFF\'/><path d=\'M3.75735 5.17157L1.63603 3.05025L3.05025 1.63603L5.17157 3.75735L3.75735 5.17157Z\' fill=\'%23FFF\'/><path d=\'M12.2426 10.8284L14.364 12.9497L12.9497 14.364L10.8284 12.2426L12.2426 10.8284Z\' fill=\'%23FFF\'/><path d=\'M3.05025 14.364L5.17157 12.2426L3.75735 10.8284L1.63603 12.9498L3.05025 14.364Z\' fill=\'%23FFF\'/><path d=\'M12.9497 1.63604L10.8284 3.75736L12.2426 5.17158L14.364 3.05026L12.9497 1.63604Z\' fill=\'%23FFF\'/></svg>");
 
   /* header and footer styling */
   --rptl-header-background-color: var(--bg);
@@ -59,8 +58,7 @@
   --copy-button-text: #444;
   --textcolor: black;
   --subtle-text: #444;
-  --theme-toggle-label: "🌙";
-  --not-expanded-label: "▶";
+  --theme-toggle-label: url("data:image/svg+xml;utf8,<svg width=\'40px\' height=\'40px\' viewBox=\'0 0 24 24\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'><path d=\'M3.32031 11.6835C3.32031 16.6541 7.34975 20.6835 12.3203 20.6835C16.1075 20.6835 19.3483 18.3443 20.6768 15.032C19.6402 15.4486 18.5059 15.6834 17.3203 15.6834C12.3497 15.6834 8.32031 11.654 8.32031 6.68342C8.32031 5.50338 8.55165 4.36259 8.96453 3.32996C5.65605 4.66028 3.32031 7.89912 3.32031 11.6835Z\' stroke=\'%23000\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'/></svg>");
 
   /* header and footer styling */
   --rptl-header-background-color: var(--bg);
@@ -320,14 +318,14 @@ pre {
   font-family: monospace;
 }
 
-#theme-toggle-header:after {
+#theme-toggle-header {
   content: var(--theme-toggle-label);
 }
 
 #theme-toggle span {
   display: none;
 }
-#theme-toggle:after {
+#theme-toggle {
   content: var(--theme-toggle-label);
 }