Merge pull request #3996 from raspberrypi/develop

Release latest to production
raspberrypi · Dec 17, 2024 · e9c35a7 · e9c35a7
2 parents 516d120 + 951851c
commit e9c35a7
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 17 deletions.
diff --git a/jekyll-assets/_layouts/docs.html b/jekyll-assets/_layouts/docs.html
@@ -18,12 +18,7 @@ <h1 id="docs-header-title">
                 </a>
               </h1>
               <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>
+                <div class="mobile-menu-toggle-inner"></div>
               </label>
               {% include theme.html %}
             </div>

diff --git a/jekyll-assets/css/style.css b/jekyll-assets/css/style.css
@@ -20,6 +20,7 @@
   --textcolor: white;
   --subtle-text: #CCC;
   --theme-toggle-label: url("data:image/svg+xml;utf8,<svg width=\'30px\' height=\'30px\' 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>");
+  --mobile-menu-label: url("data:image/svg+xml,%3Csvg width='30px' height='40px' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' fill='none' width='20' height='20'/%3E%3Cg%3E%3Cpath fill='%23FFF' d='M20 5V2H0v3h20zm0 6V8H0v3h20zm0 6v-3H0v3h20z'/%3E%3C/g%3E%3C/svg%3E");
 
   /* header and footer styling */
   --rptl-header-background-color: var(--bg);
@@ -59,6 +60,7 @@
   --textcolor: black;
   --subtle-text: #444;
   --theme-toggle-label: url("data:image/svg+xml;utf8,<svg width=\'30px\' height=\'30px\' 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>");
+  --mobile-menu-label: url("data:image/svg+xml,%3Csvg width='30px' height='40px' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' fill='none' width='20' height='20'/%3E%3Cg%3E%3Cpath fill='var(--textcolor)' d='M20 5V2H0v3h20zm0 6V8H0v3h20zm0 6v-3H0v3h20z'/%3E%3C/g%3E%3C/svg%3E");
 
   /* header and footer styling */
   --rptl-header-background-color: var(--bg);
@@ -127,7 +129,7 @@ code {
   margin-bottom: 0px;
   top: 0;
   z-index: 99;
-  background-color: var(--bg);
+  background-color: var(--code-bg-colour);
 }
 
 .toptitle h1 {
@@ -138,7 +140,7 @@ code {
   position: relative;
   margin-top: 0px;
   text-align: center;
-  margin-top: 10px;
+  padding-top: 10px;
   margin-left: 10px;
   flex-grow: 1;
 }
@@ -176,7 +178,7 @@ div.subtitle p {
 }
 
 #docs-header a:hover {
-  color: var(--brand-colour);
+  color: var(--accent);
   text-decoration: none;
   background-color: var(--toc-hover-colour);
 }
@@ -304,6 +306,7 @@ pre {
 #theme-toggle-container {
   align-self: center;
   align-items: start;
+  display: block;
 }
 
 #docsearch {
@@ -1386,6 +1389,11 @@ footer {
 
 .mobile-menu-toggle {
   display: none;
+  align-self: baseline;
+}
+
+.mobile-menu-toggle-inner {
+  content: var(--mobile-menu-label);
 }
 
 #mobile-toggle {
@@ -1415,7 +1423,7 @@ input:not(:checked) ~ li ~ .itemcontents .sectlevel1 {
 }
 
 .toc {
-  overflow-y: scroll;
+  overflow-y: auto;
   height: 90vh;
   background-color: var(--code-bg-colour);
   max-width: 25vw;
@@ -1426,6 +1434,7 @@ input:not(:checked) ~ li ~ .itemcontents .sectlevel1 {
   position: sticky;
   background-color: var(--code-bg-colour);
   z-index: 102;
+  padding-bottom: 10px;
   box-shadow: var(--code-bg-colour-transparent) 0px 10px 15px -5px, var(--code-bg-colour-transparent) 0px 10px 10px -5px;
 }
 
@@ -1464,6 +1473,7 @@ input:not(:checked) ~ li ~ .itemcontents .sectlevel1 {
   /* no need for box shadow in mobile mode */
   #toc-inner {
     box-shadow: var(--code-bg-colour-transparent) 0px;
+    padding-bottom: 0px;
   }
 
   #mobile-toggle:checked ~ .legal {
@@ -1488,23 +1498,23 @@ input:not(:checked) ~ li ~ .itemcontents .sectlevel1 {
   }
 
   .mobile-menu-toggle {
-    font-size: 3em;
     display: block;
     padding-left: 5px;
     padding-right: 5px;
   }
 
-  .toc {
-    height: auto;
+  #theme-toggle-container {
+    display: block;
+    padding-left: 5px;
+    padding-right: 5px;
   }
 
-  .mobile-menu-toggle div {
-    transform: translateY(-3px);
+  .toc {
+    height: auto;
   }
 
   .mobile-menu-toggle:hover {
-    color: var(--brand-colour);
-    text-decoration: none;
+    border-radius: 3px;
     background-color: var(--toc-hover-colour);
   }