Fix align/color of hamburger icon

book/style.css

@@ -225,40 +225,24 @@ figcaption.caption {
   }
   .hamb{
     cursor: pointer;
-    float: right;
-    padding: 30px 20px;
-    position: absolute;
-    right: 0px;
-    top: 2px;
+    padding: 5px;
+    display: flex;
+    align-items: center;
+    align-content: center;
+    justify-content: center;
+}
   }
 
   .hamb-line {
-    background: #000;
     display: block;
-    height: 2px;
     position: relative;
-    width: 24px;
-  }
-
-  .hamb-line::before,
-  .hamb-line::after{
-    background: #000;
-    content: '';
-    display: block;
-    height: 100%;
-    position: absolute;
     transition: all .2s ease-out;
-    width: 100%;
-  }
-  .hamb-line::before{
-    top: 5px;
-  }
-  .hamb-line::after{
-    top: -5px;
+    filter: brightness(0) invert(1);
   }
 
   span.hamb-line:hover  {
     background-color: #000 !important;
+    filter: brightness(0) invert(0.95);
   }
 
   .menu-items {
@@ -267,15 +251,17 @@ figcaption.caption {
     top: 100%;
     left: 0;
     width: 100%;
-    background-color: #f2f2f2;
-    padding-left: 3px;
+    background-color: var(--c-black);
     z-index: 1;
   }
 
   .menu {
-    background: #F5F2EF;
-    padding: 20px 0px;
+    background: var(--c-black);
+    display: flex;
+    padding: 10px 0px;
     position: relative;
+    align-items: center;
+    justify-content: space-between;
   }
 
   #toggle-menu:checked ~ .menu-items {
@@ -289,6 +275,10 @@ figcaption.caption {
     font-weight: bold;
     padding-left: 17px;
   }
+
+  .chapterToc a, .sectionToc a, .subsectionToc a, .likechapterToc a {
+    padding-left: 17px;
+  }
 }
 
 div.center {

website/assets/menu.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="32px" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z"/></svg>

website/modify_build.rb

@@ -189,7 +189,7 @@ class ModifyBuild
       🍞 The Sourdough Framework
     </a>
     <input type="checkbox" id="toggle-menu">
-    <label class="hamb toggle-menu-label" for="toggle-menu"><span class="hamb-line"></span></label>
+    <label class="hamb toggle-menu-label" for="toggle-menu"><img src="menu.svg" class="hamb-line"></label>
   }
   end