1 files changed, 129 insertions, 9 deletions

diff --git a/sass/juice.scss b/sass/juice.scss
index 04136a1..7866bb4 100644
--- a/sass/juice.scss
+++ b/sass/juice.scss
@@ -38,9 +38,20 @@ header {
   justify-content: space-between;
 }
 
+header ul {
+  margin: 0px;
+  padding: 0px;
+  list-style: none; 
+}
+
+header ul li {
+  display: inline;
+
+}
+
 .logo {
   font-family: Georgia, DejaVu Serif, Norasi, serif;
-  font-size: 32px;
+  font-size: 28px;
   color: var(--primary-text-color);
   font-weight: 500;
   display: flex;
@@ -56,7 +67,6 @@ header {
 .nav-item {
   margin: 0 10px;
   text-decoration: none;
-  font-size: 18px;
   font-weight: bold;
 
   color: var(--primary-text-color);
@@ -83,11 +93,16 @@ header {
   }
 }
 
+
 main {
   display: flex;
-  padding: 50px 100px;
+  padding: 50px 50px;
   flex-grow: 1;
 
+  .toc-homepage .toc-sticky {
+    display: none;
+  }
+
   .toc {
     max-width: 260px;
     min-width: 240px;
@@ -123,7 +138,6 @@ main {
     padding: 0 30px 5px;
     color: #424242;
   }
-
 }
 
 .toc-sticky {
@@ -157,11 +171,20 @@ footer {
 }
 
 @media screen and (min-width: 1280px) {
+  main {
+    padding: 50px 100px;
+  }
+  .logo {
+    font-size: 32px;
+  }
   .content {
     max-width: 60%;
     min-width: 800px;
     overflow: hidden;
   }
+  .text {
+    font-size: 18px;
+  }
 }
 
 @media screen and (max-width: 768px) {
@@ -172,6 +195,10 @@ footer {
     justify-content: center;
   }
 
+  header nav {
+    display: none;
+  }
+
   .logo {
     font-size: 28px;
     margin: 10px;
@@ -184,7 +211,7 @@ footer {
 
   .nav-item {
     margin: 0 5px;
-    font-size: 14px;
+    font-size: 1em;
   }
 
   .hero {
@@ -192,15 +219,108 @@ footer {
   }
 
   main {
-    padding: 30px;
+    display: block;
+    padding: 0px;
+  }
+
+  main .content {
+    margin: 15px;
   }
 
   .content {
     padding: 0;
+    display: block;
   }
+}
 
-  .explore-more, .toc {
-    display: none;
-  }
+/*
+  Disposition spécifique du menu pour mobile; menu déroulable pour mobile
+  Code inspiré de: https://alvarotrigo.com/blog/hamburger-menu-css/
+*/
+
+#menu-toggle {
+  display: none;
+}
 
+.menu-button-container {
+  display: none;
 }
+
+.menu-button::before {
+  content: '';
+  transform: translate(0, -8px);
+}
+
+.menu-button::after {
+  content: '';
+  transform: translate(0, 8px);
+}
+
+#menu-toggle:checked + .menu-button-container .menu-button::before {
+  margin-top: 0px;
+  transform: rotate(45deg);
+}
+
+#menu-toggle:checked + .menu-button-container .menu-button {
+  background: transparent;
+}
+
+#menu-toggle:checked + .menu-button-container .menu-button::after {
+  margin-top: 0px;
+  transform: rotate(-45deg);
+}
+
+@media (max-width: 768px) {
+  main .toc {
+    margin: 0px;
+    width: 100%;
+    max-width: none;
+    border: 0px;
+  }
+
+  main .toc-sticky {
+    border: 0px;
+    padding: 10px 0px;
+  }
+
+  main .toc-homepage .toc-sticky {
+    display: block;
+  }
+
+  .menu-button-container {
+    display: block;
+  }
+
+  .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-item {
+    display: block;
+  }
+}
\ No newline at end of file