Switch mobile menu and theme toggle to inline svg assets instead of f…

…ont-dependent unicode
raspberrypi · Dec 12, 2024 · 2cad23f · 2cad23f
1 parent 423e64b
commit 2cad23f
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git 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
@@ -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);
 }