Tentative 2: navigation sur mobile

1 files changed, 36 insertions, 23 deletions

diff --git a/sass/juice.scss b/sass/juice.scss
index 2e2d5e3..ade6dd9 100644
--- a/sass/juice.scss
+++ b/sass/juice.scss
@@ -100,6 +100,10 @@ main {
   padding: 50px 100px;
   margin: 0;
 
+  .toc-homepage {
+    display: none;
+  }
+
   .toc {
     max-width: 260px;
     min-width: 240px;
@@ -253,25 +257,12 @@ main details#navigation-toggle summary {
 
 /* *********** */
 
-
-.menu-button-container {
-  display: none;
-}
-
 #menu-toggle {
   display: none;
 }
 
-.menu-button,
-.menu-button::before,
-.menu-button::after {
-  display: block;
-  background-color: #fff;
-  position: absolute;
-  height: 4px;
-  width: 30px;
-  transition: transform 400ms ease;
-  border-radius: 2px;
+.menu-button {
+  display: none;
 }
 
 .menu-button::before {
@@ -299,18 +290,40 @@ main details#navigation-toggle summary {
 }
 
 @media (max-width: 768px) {
-  .menu-button-container {
-    position: absolute;
+  main .toc-homepage {
     display: block;
-    height: 32px;
-    width: 32px;
-    top: 40px;
-    right: 24px;
   }
-  #menu-toggle ~ .toc {
+
+  .toc-menu-title {
+    font-weight: 600;
+    margin-left: 64px;  
+  }
+  
+  .toc-section {
+    margin-top: 16px;
+  }
+
+  .menu-button {
+    top: 28px;
+    left:24px;
+  }
+
+  .menu-button,
+  .menu-button::before,
+  .menu-button::after {
+    display: block;
+    background-color: #777;
+    position: absolute;
+    height: 4px;
+    width: 30px;
+    transition: transform 400ms ease;
+    border-radius: 2px;
+  }
+
+  #menu-toggle ~ .toc-item {
     display: none;
   }
-  #menu-toggle:checked ~ .toc {
+  #menu-toggle:checked ~ .toc-item {
     display: block;
   }
 }
\ No newline at end of file