Make mobile top bar and sidebar prettier; fix theme toggle hover color on landing page; stop toc sidebar scrollbar from always showing on linux chromium

Author: nathan-contino

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>

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);
   }