From 6d5e681745139791e8f1b380a9aa14d417ab7970 Mon Sep 17 00:00:00 2001
From: Hendrik Kleinwaechter <hendrik.kleinwaechter@gmail.com>
Date: Thu, 27 Jul 2023 13:44:00 +0200
Subject: [PATCH] Fix desktop/mobile issues

---
 book/style.css           | 17 ++++++++++++-----
 website/assets/close.svg |  4 ++++
 website/modify_build.rb  |  2 +-
 3 files changed, 17 insertions(+), 6 deletions(-)
 create mode 100644 website/assets/close.svg

diff --git a/book/style.css b/book/style.css
index cde13d6..d4c8878 100644
--- a/book/style.css
+++ b/book/style.css
@@ -216,13 +216,13 @@ figcaption.caption {
   text-decoration: none;
 }
 
-
 @media (max-width: 768px) {
   .toggle-menu-label {
     display: block;
     padding: 10px;
     cursor: pointer;
   }
+
   .hamb{
     cursor: pointer;
     padding: 5px;
@@ -230,19 +230,22 @@ figcaption.caption {
     align-items: center;
     align-content: center;
     justify-content: center;
-}
   }
 
   .hamb-line {
     display: block;
-    position: relative;
     transition: all .2s ease-out;
     filter: brightness(0) invert(1);
+    background: url("menu.svg") no-repeat center center;
+    background-size: contain;
+    width: 30px;
+    height: 30px;
+    font-size: 0px;
   }
 
   span.hamb-line:hover  {
-    background-color: #000 !important;
-    filter: brightness(0) invert(0.95);
+    background-color: transparent !important;
+    font-size: 0px;
   }
 
   .menu-items {
@@ -267,6 +270,10 @@ figcaption.caption {
   #toggle-menu:checked ~ .menu-items {
     display: block;
   }
+  #toggle-menu:checked ~ .toggle-menu-label span {
+    background-image: url("close.svg");
+    background-color: transparent !important;
+  }
 
   .logo {
     display: block;
diff --git a/website/assets/close.svg b/website/assets/close.svg
new file mode 100644
index 0000000..7f35e1d
--- /dev/null
+++ b/website/assets/close.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z" fill="#0F1729"/>
+</svg>
\ No newline at end of file
diff --git a/website/modify_build.rb b/website/modify_build.rb
index deb9422..abe30b2 100644
--- a/website/modify_build.rb
+++ b/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"><img src="menu.svg" class="hamb-line"></label>
+    <label class="hamb toggle-menu-label" for="toggle-menu"><span class="hamb-line"></span></label>
   }
   end