couleurs en canvas et responsive sass

background.js

@@ -1,133 +1,59 @@
-// grain
-grained('#grain-bg', {
-    animate: true,
-    patternWidth: 100,
-    patternHeight: 100,
-    grainOpacity: 0.5,
-    grainDensity: 1,
-    grainWidth: 1,
-    grainHeight: 1,
-    grainChaos: 10,
-    grainSpeed: 1
-});
-
-/* 
-|O couleur prev      O  |
-|     couleur d'appoint |
-|                       |
-|                       |
-|                       |
-|        couleur next  O|
-*/
-
-//  au clic sur le mode suivant :
-//  - couleurs prev devient la next précédente (ou inverse si page cliquée < page courante)
-//  - couleurs next (ou prev) est une nouvelle couleur
-//  - couleur appoint s'adapte en fonction de couleur next
+// mode : terrain de vie, proximité, superposition....
+// profondeur : atlas, carte
 
-
-let pageAmount = 0;
-let currentPage = 1, prevPage;
-let currentProfondeur = "atlas";
+let modeAmount = 0,
+    curentMode = 1, prevMode,
+    currentProfondeur = "atlas",
+    colors = {
+        bg: {
+            h: 29,
+            s: 48,
+            l: 48
+        }
+    };
 
 document.querySelectorAll('.mode').forEach(function(node, index) {
-    pageAmount++;
+    modeAmount++;
     node.addEventListener('click', function() {
         document.querySelectorAll('.active').forEach(function(el) {
             el.classList.remove('active');
             if (currentProfondeur == "carte") { el.classList.add('collapsed'); }
         });
         node.classList.toggle('active');
-        prevPage = currentPage;
-        currentPage = index + 1;
-
-        console.log(currentPage, prevPage);
-
-        if (currentPage != prevPage) {
-            if (currentPage > prevPage) {
-                couleurs.prev.h = couleurs.next.h + (360 / pageAmount) * (currentPage - prevPage - 1);
-                couleurs.next.h = couleurs.next.h + (360 / pageAmount) * (currentPage - prevPage);
-            } else {
-                couleurs.next.h = couleurs.prev.h + (360 / pageAmount) * (currentPage - prevPage + 1);
-                couleurs.prev.h = couleurs.prev.h + (360 / pageAmount) * (currentPage - prevPage);
-            }
-            couleurs.appoint.h = couleurs.next.h + 200;
-            console.log(couleurs.prev.h, couleurs.next.h);
-    
-            let mainContainer = document.getElementById('BG_BG_BG');
-            let containerTmp = document.getElementById('BG_BG_BG_tmp');
-            containerTmp.style.background = `
-            radial-gradient(circle at 0% 14%, 
-                    hsl(${couleurs.prev.h} ${couleurs.prev.s}% ${couleurs.prev.l}%) 40%,
-                    rgba(255, 255, 255, 0) 100%),
-            radial-gradient(circle at 93% 95%,
-                hsl(${couleurs.next.h} ${couleurs.next.s}% ${couleurs.next.l}%) 0%,
-                rgba(255, 255, 255, 0) 100%),
-            radial-gradient(circle at 73% 10%,
-                hsl(${couleurs.appoint.h} ${couleurs.appoint.s}% ${couleurs.appoint.l}%) 0%,
-                rgba(255, 255, 255, 0) 100%)
-            `;
-            containerTmp.style.opacity = 1;
-            setTimeout(function() {
-                mainContainer.style.opacity = 0;
-            },100);
-    
-            setTimeout(function() {
-                mainContainer.style.background = `
-                radial-gradient(circle at 0% 14%, 
-                        hsl(${couleurs.prev.h} ${couleurs.prev.s}% ${couleurs.prev.l}%) 40%,
-                        rgba(255, 255, 255, 0) 100%),
-                radial-gradient(circle at 93% 95%,
-                    hsl(${couleurs.next.h} ${couleurs.next.s}% ${couleurs.next.l}%) 0%,
-                    rgba(255, 255, 255, 0) 100%),
-                radial-gradient(circle at 73% 10%,
-                    hsl(${couleurs.appoint.h} ${couleurs.appoint.s}% ${couleurs.appoint.l}%) 0%,
-                    rgba(255, 255, 255, 0) 100%)
-                `;
-                containerTmp.style.opacity = 0;
-                mainContainer.style.opacity = 1;
-            }, 500);
+        prevMode = curentMode;
+        curentMode = index + 1;
+
+        if (curentMode != prevMode) {
+            changeColors(curentMode - prevMode);
         }
 
     })
 });
 
-let couleurs = {
-    prev: {
-        h: 42,
-        s: 40.6,
-        l: 44.9 + 20,
-    },
-    next: {
-        h: 0,
-        s: 30.5,
-        l: 46.3 + 20,
-    },
-    appoint: {
-        h: 0,
-        s: 66,
-        l: 35.7 + 20,
-    }
+// pb si on clique plusieurs fois d'affilé, revient pas sur les bonnes couleurs
+// le passage entre toutes les couleurs quand le diffAmount est élevé n'est pas bien
+//      -> préférer ajouter un rectangle de la bonne couleur et lui augmenter l'opacité
+
+function changeColors(diffAmount) {
+    let originColor = colors.bg.h,
+        currentColor = originColor,
+        newColor = originColor + (360 / modeAmount) * diffAmount,
+        transitionTime = 50,
+        stepAmount = (newColor - originColor) / transitionTime;
+
+        let animation = setInterval(() => {
+            if (
+            (diffAmount > 0 && currentColor < newColor) ||
+            (diffAmount < 0 && currentColor > newColor)) {
+                currentColor = currentColor + stepAmount;
+                colors.bg.h = currentColor;
+        } else {
+            clearInterval(animation);
+        }
+    }, transitionTime);
+    
 }
 
-couleurs.next.h = couleurs.prev.h + (360 / pageAmount);
-couleurs.appoint.h = couleurs.next.h + 200;
-console.log(couleurs.prev.h, couleurs.next.h);
-
-let container = document.getElementById("BG_BG_BG");
-container.style.background = `
-radial-gradient(circle at 0% 14%, 
-        hsl(${couleurs.prev.h} ${couleurs.prev.s}% ${couleurs.prev.l}%) 40%,
-        rgba(255, 255, 255, 0) 100%),
-radial-gradient(circle at 93% 95%,
-    hsl(${couleurs.next.h} ${couleurs.next.s}% ${couleurs.next.l}%) 0%,
-    rgba(255, 255, 255, 0) 100%),
-radial-gradient(circle at 73% 10%,
-    hsl(${couleurs.appoint.h} ${couleurs.appoint.s}% ${couleurs.appoint.l}%) 0%,
-    rgba(255, 255, 255, 0) 100%)
-`;
-
-// menu
 function toggleProfondeur(el) {
     if (el.classList.contains("selected")) {
         return;
@@ -155,10 +81,6 @@ function toggleProfondeur(el) {
 }
 
 
-// toggle changement de couleur de fond (faire une fonction propr)
-// et variable globale du mode dans lequel on est
-// loop avec les flèches
-
 function toggleMode(direction) {
     let modes = [];
     let currentIndex;
@@ -172,9 +94,96 @@ function toggleMode(direction) {
             }
         }
     });
-    if (direction == "next") {
+    if (direction == "next" && currentIndex + 2 <= modeAmount) {
         modes[currentIndex + 1].classList.add('active');
-    } else if (direction == "prev") {
+        changeColors(1);
+    } else if (direction == "prev" && currentIndex - 1 >= 0) {
         modes[currentIndex - 1].classList.add('active');
+        changeColors(-1);
+    } else if (direction == "next" && currentIndex + 1 == modeAmount) {
+        modes[0].classList.add('active');
+        changeColors(-modeAmount + 1);
+    } else if (direction == "prev" && currentIndex == 0) {
+        modes[modeAmount - 1].classList.add('active');
+        changeColors(modeAmount - 1);
+    }
+}
+
+
+// DEUXIEME TEST DE COULEURS
+// basé sur https://codepen.io/ThreePixDroid/pen/MWeomWp
+
+// ajouter un grain fixe : cf
+// https://codepen.io/zadvorsky/pen/PwyoMm
+
+
+
+class GradientAnimation {
+    constructor() {
+        this.cnv = document.querySelector('canvas');
+        this.ctx = this.cnv.getContext('2d');
+
+        this.circlesNum = 5;
+        this.minRadius = 800;
+        this.maxRadius = 800;
+        this.speed = 0.005;
+
+        (window.onresize = () => {
+            this.setCanvasSize();
+            this.createCircles();
+        })();
+        this.drawAnimation();
+    }
+    setCanvasSize() {
+        this.w = this.cnv.width = innerWidth * devicePixelRatio;
+        this.h = this.cnv.height = innerHeight * devicePixelRatio;
+        this.ctx.scale(devicePixelRatio, devicePixelRatio);
+    }
+    createCircles() {
+        this.circles = [];
+        for (let i = 0; i < this.circlesNum; i++) {
+            this.circles.push(new Circle(this.w, this.h, this.minRadius, this.maxRadius));
+        }
+    }
+    drawCircles() {
+        this.circles.forEach(circle => circle.draw(this.ctx, this.speed));
     }
+    drawBackground() {
+        this.ctx.fillStyle = `hsl(${colors.bg.h} ${colors.bg.s}% ${colors.bg.l}%)`;
+        this.ctx.fillRect(0, 0, this.w, this.h);
+    }
+    drawAnimation() {
+        this.drawBackground();
+        this.drawCircles();
+        window.requestAnimationFrame(() => this.drawAnimation());
+    }
+}
+
+class Circle {
+    constructor(w, h, minR, maxR) {
+        this.x = Math.random() * w;
+        this.y = Math.random() * h;
+        this.angle = Math.random() * Math.PI * 2;
+        this.radius = Math.random() * (maxR - minR) + minR;
+        this.firstColor = `hsla(${Math.random() * 360}, 100%, 50%, 0.5)`;
+        this.secondColor = `hsla(${Math.random() * 360}, 100%, 50%, 0)`;
+    }
+    draw(ctx, speed) {
+        this.angle += speed;
+        const x = this.x + Math.cos(this.angle) * 200;
+        const y = this.y + Math.sin(this.angle) * 200;
+        const gradient = ctx.createRadialGradient(x, y, 0, x, y, this.radius);
+        gradient.addColorStop(0, this.firstColor);
+        gradient.addColorStop(1, this.secondColor);
+
+        ctx.globalCompositionOperation = `overlay`;
+        ctx.fillStyle = gradient;
+        ctx.beginPath();
+        ctx.arc(x, y, this.radius, 0, Math.PI * 2);
+        ctx.fill();
+    }
+}
+
+window.onload = () => {
+    new GradientAnimation();
 }

index.html

@@ -23,21 +23,18 @@
                 <path rx="0" ry="0" d="M-8219.035,17632.029L-8107.295,17867.024L-8229.636,17969.717L-8291.783,18096.894L-8492.425,17938.383L-8596.599,17808.682L-8580.356,17588.946L-8468.630,17500.749L-8219.035,17632.029Z">
                 </path>
             </svg>
-
-            <div id="BG_BG_BG"></div>
-            <div id="BG_BG_BG_tmp"></div>
         </div>
 
-        <div id="grain-bg"></div>
+        <canvas></canvas>
 
         <div id="buttons_container">
             <div class="niveau_profondeur">
                 <p class="selected" onclick="toggleProfondeur(this)">L'atlas</p>
                 <p onclick="toggleProfondeur(this)">Les cartes</p>
             </div>
-            <div class="arrow" onclick="toggleMode('prev')">
+            <button class="arrow" onclick="toggleMode('prev')">
                 <svg data-src="assets/pictos/arrow_back.svg" data-cache="disabled"></svg>
-            </div>
+            </button>
             <!-- svg pictos loadés avec svgloader  pour pouvoir les manipuler avec css -->
             <div class="mode active">
                 <svg data-src="assets/pictos/terrain-de-vie.svg" data-cache="disabled"></svg>
@@ -75,9 +72,9 @@
                     <p>Doléancer</p>
                 </div>
             </div>
-            <div class="arrow" onclick="toggleMode('next')">
+            <button class="arrow" onclick="toggleMode('next')">
                 <svg data-src="assets/pictos/arrow_forward.svg" data-cache="disabled"></svg>
-            </div>
+            </button>
 
 
         </div>
@@ -102,7 +99,6 @@
         </div>
 
 
-        <script src="grained/grained.js" defer></script>
         <script src="background.js" defer></script>
     </body>
 </html>

styles.css

@@ -22,13 +22,18 @@
   padding: 0;
 }
 
+button {
+  all: initial;
+}
+
 body {
   font-family: "Public", sans-serif;
   font-weight: 400;
+  color: rgb(0, 0, 0);
 }
 
 #content {
-  padding: 1.5vh 1vw;
+  padding: 1.5vh 1vw 2vh 1vw;
   position: fixed;
   top: 0;
   left: 0;
@@ -47,7 +52,7 @@ body {
   cursor: pointer;
 }
 #content svg#fill {
-  fill: white;
+  fill: rgb(255, 255, 255);
   /* mix blend mode est dépendant du stacking context */
   mix-blend-mode: overlay;
   opacity: 0.4;
@@ -55,43 +60,9 @@ body {
 #content svg#stroke {
   position: absolute;
   fill: none;
-  stroke: black;
+  stroke: rgb(0, 0, 0);
   stroke-width: 1px;
 }
-#content #BG_BG_BG {
-  position: absolute;
-  width: 100vw;
-  height: 100vh;
-  top: 0;
-  left: 0;
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
-  z-index: -1;
-  opacity: 1;
-  transition: opacity 0.5s ease-in-out;
-}
-#content #BG_BG_BG_tmp {
-  position: absolute;
-  width: 100vw;
-  height: 100vh;
-  top: 0;
-  left: 0;
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
-  z-index: -2;
-  opacity: 0;
-  transition: opacity 0.5s ease-in-out;
-}
-
-#grain-bg {
-  position: absolute !important;
-  width: 100vw;
-  height: 100vh;
-}
-
-#grain-bg > * {
-  position: relative;
-}
 
 #buttons_container {
   position: fixed;
@@ -100,8 +71,8 @@ body {
   z-index: 1;
   display: flex;
   align-items: center;
-  margin: 1.5vh 1vw;
-  height: 4vh;
+  margin: 1.5vh 1vw 2vh 1vw;
+  font-size: 1rem;
 }
 #buttons_container .niveau_profondeur {
   display: flex;
@@ -123,17 +94,17 @@ body {
   font-weight: 400;
 }
 #buttons_container .arrow {
-  margin-right: 15px;
+  margin-right: 14px;
 }
 #buttons_container .arrow svg {
-  height: 27px;
+  height: 2rem;
   width: auto;
-  fill: white;
-  stroke: black;
+  fill: rgb(255, 255, 255);
+  stroke: rgb(0, 0, 0);
   stroke-width: 0;
   cursor: pointer;
   margin-top: 4px;
-  transition: fill 0.2s ease-out;
+  transition: fill 0.3s ease-out;
 }
 #buttons_container .arrow svg:hover {
   fill: rgb(110, 110, 110);
@@ -143,13 +114,13 @@ body {
 }
 #buttons_container .arrow:last-of-type {
   margin-right: 0;
-  margin-left: 12px;
+  margin-left: 14px;
 }
 #buttons_container .mode {
   display: flex;
   align-items: center;
   justify-content: space-around;
-  background-color: white;
+  background-color: rgb(255, 255, 255);
   margin: 0;
   margin-right: 14px;
   padding: 10px 12px;
@@ -157,20 +128,19 @@ body {
   cursor: pointer;
   border: solid 0.8px rgb(110, 110, 110);
   color: rgba(0, 0, 0, 0.5);
-  transition: border 0.1s ease-out, color 0.1s ease-out, padding 0.2s ease-out;
+  transition: border 0.1s ease-out, color 0.1s ease-out, padding 0.3s ease-out;
   font-weight: 300;
-  font-size: 1rem;
 }
 #buttons_container .mode svg {
-  height: 28px;
+  height: 2rem;
 }
 #buttons_container .mode svg .thick {
-  transition: stroke-width 0.2s ease-out, fill 0.2s ease-out, stroke 0.2s ease-out;
+  transition: stroke-width 0.3s ease-out, fill 0.3s ease-out, stroke 0.3s ease-out;
   stroke-width: 0.8;
   stroke: rgb(110, 110, 110);
 }
 #buttons_container .mode svg .thin {
-  transition: stroke-width 0.2s ease-out, fill 0.2s ease-out, stroke 0.2s ease-out;
+  transition: stroke-width 0.3s ease-out, fill 0.3s ease-out, stroke 0.3s ease-out;
   stroke-width: 0.5;
   stroke: rgb(110, 110, 110);
 }
@@ -182,14 +152,13 @@ body {
   width: auto;
   transition: max-width 0.4s ease-out, margin-left 0.4s ease-out, margin-right 0.4s ease-out;
   max-width: 0px;
-  margin-left: 10px;
-  margin-right: 5px;
+  margin: 0px 5px 0px 10px;
   max-width: 200px;
 }
 #buttons_container .mode .mode_container p {
   white-space: nowrap;
   height: fit-content;
-  margin-bottom: 3px;
+  margin-bottom: 1.5px;
 }
 #buttons_container .mode.active {
   padding: 10px 12px !important;
@@ -210,8 +179,7 @@ body {
 }
 #buttons_container .mode.active .mode_container {
   max-width: 200px !important;
-  margin-left: 10px !important;
-  margin-right: 5px !important;
+  margin: 0px 5px 0px 10px !important;
 }
 #buttons_container .mode:hover {
   padding: 10px 12px !important;
@@ -226,57 +194,60 @@ body {
 }
 #buttons_container .mode:hover .mode_container {
   max-width: 200px !important;
-  margin-left: 10px !important;
-  margin-right: 5px !important;
+  margin: 0px 5px 0px 10px !important;
 }
 #buttons_container .mode.collapsed {
-  padding: 10px 7px;
+  padding: 10px 10px;
 }
 #buttons_container .mode.collapsed .mode_container {
   max-width: 0px;
   margin-left: 0px;
   margin-right: 0px;
 }
+#buttons_container .mode:last-of-type {
+  margin-right: 0;
+}
 
 #global_nav {
   position: fixed;
   bottom: 0;
   left: 0;
-  margin: 1.5vh 1vw;
+  margin: 1.5vh 1vw 2vh 1vw;
   z-index: 1;
+  font-size: 1rem;
 }
 #global_nav h1 {
   font-family: "Ortica";
   font-size: 1.7em;
-  margin-bottom: 17px;
-  margin-left: 5px;
+  margin: 0px 0px 17px 5px;
 }
 #global_nav #menu {
   display: flex;
+  align-items: center;
 }
 #global_nav #menu #search {
   display: flex;
   align-items: center;
 }
 #global_nav #menu #search input[type=search] {
-  height: 34px;
+  height: 2rem;
   width: 10vw;
   padding-left: 13px;
   padding-right: 30px;
-  padding-bottom: 2px;
+  padding-bottom: 1px;
   font-family: "Public";
-  font-size: 1em;
   font-weight: 300;
   border-radius: 20px;
   border: solid rgb(110, 110, 110) 1.2px;
   color: rgb(110, 110, 110);
-  transition: color 0.2s ease-out;
+  background-color: rgb(255, 255, 255);
+  transition: color 0.3s ease-out;
 }
 #global_nav #menu #search input[type=search]:hover {
   color: rgb(50, 50, 50);
 }
 #global_nav #menu #search input[type=search]:active {
-  color: black;
+  color: rgb(0, 0, 0);
 }
 #global_nav #menu #search button {
   background: none;
@@ -284,11 +255,11 @@ body {
   cursor: pointer;
 }
 #global_nav #menu #search button svg {
-  margin-top: 3px;
+  margin-top: 5px;
   margin-left: -45px;
-  height: 24px;
+  height: 1.3rem;
   fill: rgb(110, 110, 110);
-  transition: fill 0.2s ease-out;
+  transition: fill 0.3s ease-out;
 }
 #global_nav #menu #search button svg:hover {
   fill: rgb(50, 50, 50);
@@ -302,11 +273,61 @@ body {
   padding-bottom: 2px;
 }
 #global_nav #menu .menu_item svg {
-  height: 24px;
-  margin-right: -5px;
+  width: 1.3rem;
+  height: 1.3rem;
+  margin-right: 3px;
+  fill: rgb(0, 0, 0);
 }
 #global_nav #menu .menu_item:hover {
   font-weight: 400;
 }
 
+@media only screen and (max-width: 1440px) {
+  #buttons_container, #global_nav {
+    font-size: 0.7rem;
+  }
+  #buttons_container .arrow svg {
+    height: 1.2rem;
+  }
+  #buttons_container .mode {
+    padding: 8px 10px 8px 7px;
+  }
+  #buttons_container .mode svg {
+    height: 1.2rem;
+  }
+  #buttons_container .mode .mode_container {
+    margin: 0px 3px 0px 5px;
+  }
+  #buttons_container .mode.active {
+    padding: 8px 10px 8px 7px !important;
+  }
+  #buttons_container .mode.active .mode_container {
+    margin: 0px 3px 0px 5px !important;
+  }
+  #buttons_container .mode:hover {
+    padding: 8px 10px 8px 7px !important;
+  }
+  #buttons_container .mode:hover .mode_container {
+    margin: 0px 3px 0px 5px !important;
+  }
+  #buttons_container .mode.collapsed {
+    padding: 8px 2px;
+  }
+  #global_nav h1 {
+    margin: 0px 0px 8px 5px;
+  }
+  #global_nav #menu #search input[type=search] {
+    height: 1.5rem;
+    font-size: 0.7rem;
+  }
+  #global_nav #menu #search button svg {
+    margin-left: -23px;
+    width: 1rem;
+  }
+  #global_nav #menu .menu_item svg {
+    width: 1rem;
+    height: 1rem;
+  }
+}
+
 /*# sourceMappingURL=styles.css.map */

styles.scss

@@ -1,335 +1,402 @@
-$global_margins: 1.5vh 1vw;
-
-$buttons_border_width: 1.2px;
-
-$grey_inactive: rgb(110, 110, 110);
-$grey_hover: rgb(50, 50, 50);
-
-@font-face {
-    font-family: 'Public';
-    font-style: normal;
-    font-weight: 400;
-    src: url('assets/fonts/PublicSans-Regular.ttf') format('TrueType');
-}
-
-@font-face {
-    font-family: 'Public';
-    font-style: normal;
-    font-weight: 300;
-    src: url('assets/fonts/PublicSans-Light.ttf') format('TrueType');
-}
-
-@font-face {
-    font-family: 'Ortica';
-    font-style: bold;
-    font-weight: 300;
-    src: url('assets/fonts/Ortica-Bold.woff2') format('woff2');
-}
-
-
-
-
-* {
-    margin: 0;
-    padding: 0;
-}
-
-body {
-    font-family: 'Public', sans-serif;
-    font-weight: 400;
-}
-
-
-
-
-#content {
-    padding: $global_margins;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 1;
-
-    svg {
-        position: absolute;
-        height: 50%;
-        path {
-            cursor: pointer;
-        }
-    }
-
-    svg#fill {
-        fill: white;
-        /* mix blend mode est dépendant du stacking context */
-        mix-blend-mode: overlay;
-        opacity: 0.4;
-    }
-
-    svg#stroke {
-        position: absolute;
-        fill: none;
-        stroke: black;
-        stroke-width: 1px;
-    }
-    
-    #BG_BG_BG {
-        position: absolute;
-        width: 100vw;
-        height: 100vh;
-        top: 0;
-        left: 0;
-    
-        background-size: 100% 100%;
-        background-repeat: no-repeat;
-        z-index: -1;
-        opacity: 1;
-        transition: opacity 0.5s ease-in-out;
-    }
-    
-    #BG_BG_BG_tmp {
-        position: absolute;
-        width: 100vw;
-        height: 100vh;
-        top: 0;
-        left: 0;
-    
-        background-size: 100% 100%;
-        background-repeat: no-repeat;
-        z-index: -2;
-        opacity: 0;
-        transition: opacity 0.5s ease-in-out;
-    }
-
-
-}
-
-#grain-bg {
-    position: absolute !important;
-    width: 100vw;
-    height: 100vh;
-}
-
-#grain-bg > * {
-    position: relative;
-}
-
-
-#buttons_container {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 1;
-    display: flex;
-    align-items: center;
-    margin: $global_margins;
-    height: 4vh;
-    .niveau_profondeur {
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        height: 100%;
-        margin-right: 30px;
-        width: 5vw;
-        p {
-            font-weight: 300;
-            cursor: pointer;
-        }
-        p.selected {
-            font-weight: 400;
-            text-decoration: underline;
-        }
-        p:hover {
-            font-weight: 400;
-        }
-    }
-    .arrow {
-        margin-right: 15px;
-        svg {
-            height: 27px;
-            width: auto;
-            fill: white;
-            stroke: black;
-            stroke-width: 0;
-            cursor: pointer;
-            margin-top: 4px;
-            transition: fill 0.2s ease-out;
-        }
-        svg:hover {
-            fill: $grey_inactive;
-        }
-        svg:active {
-            fill: $grey_hover;
-        }
-    }
-    .arrow:last-of-type {
-        margin-right: 0;
-        margin-left: 12px;
-    }
-    .mode {
-        display: flex;
-        align-items: center;
-        justify-content: space-around;
-        background-color: white;
-        margin: 0;
-        margin-right: 14px;
-        padding: 10px 12px;
-        border-radius: 50px;
-        cursor: pointer;
-        border: solid 0.8px $grey_inactive;
-        color: rgba(0, 0, 0, 0.5);
-        transition: border 0.1s ease-out, color 0.1s ease-out, padding 0.2s ease-out;
-        font-weight: 300;
-        font-size: 1rem;
-        svg {
-            height: 28px;
-            .thick {
-                transition: stroke-width 0.2s ease-out, fill 0.2s ease-out, stroke 0.2s ease-out;
-                stroke-width: 0.8;
-                stroke: $grey_inactive;
-            }
-            .thin {
-                transition: stroke-width 0.2s ease-out, fill 0.2s ease-out, stroke 0.2s ease-out;
-                stroke-width: 0.5;
-                stroke: $grey_inactive;
-            }
-            .circle-fill {
-              fill: $grey_inactive;
-            }
-        }
-        .mode_container {
-            overflow: hidden;
-            width: auto;
-            transition: max-width 0.4s ease-out, margin-left 0.4s ease-out, margin-right 0.4s ease-out;
-            max-width: 0px;
-            margin-left: 10px;
-            margin-right: 5px;
-            max-width: 200px;
-            p {
-                white-space: nowrap;
-                height: fit-content;
-                margin-bottom: 3px;
-            }
-        }
-    }
-    .mode.active {
-        padding: 10px 12px !important;
-        font-weight: 400;
-        border: solid $buttons_border_width rgba(0, 0, 0, 1);
-        color: rgba(0, 0, 0, 1);
-        svg .thick {
-            stroke-width: 1.2;
-            stroke: rgba(0, 0, 0, 1);
-        }
-        svg .thin {
-            stroke-width: 0.6;
-            stroke: rgba(0, 0, 0, 1);
-        }
-        svg .circle-fill {
-          fill: rgba(0, 0, 0, 1);
-        }
-        .mode_container {
-            max-width: 200px !important;
-            margin-left: 10px !important;
-            margin-right: 5px !important;
-        }
-    }
-    .mode:hover {
-        padding: 10px 12px !important;
-        color: $grey_hover;
-        border-color: $grey_hover;
-        svg .thick, svg .thin {
-            stroke: $grey_hover;
-        }
-        svg .circle-fill {
-            fill: $grey_hover;
-        }
-        .mode_container {
-            max-width: 200px !important;
-            margin-left: 10px !important;
-            margin-right: 5px !important;
-        }
-    }
-    .mode.collapsed {
-        padding: 10px 7px;
-        .mode_container {
-            max-width: 0px;
-            margin-left: 0px;
-            margin-right: 0px;
-        }
-    }
-}
-
-#global_nav {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    margin: $global_margins;
-    z-index: 1;
-    h1 {
-        font-family: 'Ortica';
-        font-size: 1.7em;
-        margin-bottom: 17px;
-        margin-left: 5px;
-    }
-    #menu {
-        display: flex;
-        #search {
-            display: flex;
-            align-items: center;
-            input[type="search"] {
-                height: 34px;
-                width: 10vw;
-                padding-left: 13px;
-                padding-right: 30px;
-                padding-bottom: 2px;
-                font-family: 'Public';
-                font-size: 1em;
-                font-weight: 300;
-                border-radius: 20px;
-                border: solid $grey_inactive $buttons_border_width;
-                color: $grey_inactive;
-                transition: color 0.2s ease-out;
-            }
-            input[type="search"]:hover {
-                color: $grey_hover;
-            }
-            input[type="search"]:active {
-                color: black;
-            }
-            button {
-                background: none;
-                border: none;
-                cursor: pointer;
-                svg {
-                    margin-top: 3px;
-                    margin-left: -45px;
-                    height: 24px;
-                    fill: $grey_inactive;
-                    transition: fill 0.2s ease-out;
-                }
-                svg:hover {
-                    fill: $grey_hover;
-                }
-            }
-        }
-        .menu_item {
-            font-weight: 300;
-            display: flex;
-            align-items: center;
-            cursor: pointer;
-            margin: 0 10px;
-            padding-bottom: 2px;
-            svg {
-                height: 24px;
-                margin-right: -5px;
-            }
-        }
-        .menu_item:hover {
-            font-weight: 400;
-        }
-    }
+// /!\ Large Desktop first /!\ 
+
+// larger desktop variables (default)
+
+$animation_style: 0.3s ease-out;
+
+$global_margins: 1.5vh 1vw 2vh 1vw;
+
+
+$buttons_border_width: 1.2px;
+$buttons_padding: 10px 12px;
+$buttons_padding_collapsed: 10px 10px;
+$buttons_inner_margin: 0px 5px 0px 10px;
+$buttons_margin: 14px;
+
+$main_title_margin: 0px 0px 17px 5px;
+$search_box_height: 2rem;
+$search_icon_offset: -45px;
+
+$main_color: rgb(0, 0, 0);
+$bg_color: rgba(255, 255, 255);
+$grey_inactive: rgb(110, 110, 110);
+$grey_hover: rgb(50, 50, 50);
+
+$UI_main_font_size: 1rem;
+$large_picto_size: 2rem;
+$medium_picto_size: 1.3rem;
+
+// smaller desktop variables
+
+$buttons_padding--sm: 8px 10px 8px 7px;
+$buttons_padding_collapsed--sm: 8px 2px;
+$buttons_inner_margin--sm: 0px 3px 0px 5px;
+
+$main_title_margin--sm: 0px 0px 8px 5px;
+$search_box_height--sm: 1.5rem;
+$search_icon_offset--sm: -23px;
+
+$UI_main_font_size--sm: 0.7rem;
+$large_picto_size--sm: 1.2rem;
+$medium_picto_size--sm: 1rem;
+
+
+@font-face {
+    font-family: 'Public';
+    font-style: normal;
+    font-weight: 400;
+    src: url('assets/fonts/PublicSans-Regular.ttf') format('TrueType');
+}
+
+@font-face {
+    font-family: 'Public';
+    font-style: normal;
+    font-weight: 300;
+    src: url('assets/fonts/PublicSans-Light.ttf') format('TrueType');
+}
+
+@font-face {
+    font-family: 'Ortica';
+    font-style: bold;
+    font-weight: 300;
+    src: url('assets/fonts/Ortica-Bold.woff2') format('woff2');
+}
+
+
+
+
+* {
+    margin: 0;
+    padding: 0;
+}
+
+button {
+    all: initial;
+}
+
+body {
+    font-family: 'Public', sans-serif;
+    font-weight: 400;
+    color: $main_color;
+}
+
+
+
+
+#content {
+    padding: $global_margins;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1;
+
+    svg {
+        position: absolute;
+        height: 50%;
+        path {
+            cursor: pointer;
+        }
+    }
+
+    svg#fill {
+        fill: $bg_color;
+        /* mix blend mode est dépendant du stacking context */
+        mix-blend-mode: overlay;
+        opacity: 0.4;
+    }
+
+    svg#stroke {
+        position: absolute;
+        fill: none;
+        stroke: $main_color;
+        stroke-width: 1px;
+    }
+
+}
+
+#buttons_container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    margin: $global_margins;
+    font-size: $UI_main_font_size;
+    .niveau_profondeur {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        height: 100%;
+        margin-right: 30px;
+        width: 5vw;
+        p {
+            font-weight: 300;
+            cursor: pointer;
+        }
+        p.selected {
+            font-weight: 400;
+            text-decoration: underline;
+        }
+        p:hover {
+            font-weight: 400;
+        }
+    }
+    .arrow {
+        margin-right: $buttons_margin;
+        svg {
+            height: $large_picto_size;
+            width: auto;
+            fill: $bg_color;
+            stroke: $main_color;
+            stroke-width: 0;
+            cursor: pointer;
+            margin-top: 4px;
+            transition: fill $animation_style;
+        }
+        svg:hover {
+            fill: $grey_inactive;
+        }
+        svg:active {
+            fill: $grey_hover;
+        }
+    }
+    .arrow:last-of-type {
+        margin-right: 0;
+        margin-left: $buttons_margin;
+    }
+    .mode {
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        background-color: $bg_color;
+        margin: 0;
+        margin-right: $buttons_margin;
+        padding: $buttons_padding;
+        border-radius: 50px;
+        cursor: pointer;
+        border: solid 0.8px $grey_inactive;
+        color: rgba(0, 0, 0, 0.5);
+        transition: border 0.1s ease-out, color 0.1s ease-out, padding $animation_style;
+        font-weight: 300;
+        svg {
+            height: $large_picto_size;
+            .thick {
+                transition: stroke-width $animation_style, fill $animation_style, stroke $animation_style;
+                stroke-width: 0.8;
+                stroke: $grey_inactive;
+            }
+            .thin {
+                transition: stroke-width $animation_style, fill $animation_style, stroke $animation_style;
+                stroke-width: 0.5;
+                stroke: $grey_inactive;
+            }
+            .circle-fill {
+              fill: $grey_inactive;
+            }
+        }
+        .mode_container {
+            overflow: hidden;
+            width: auto;
+            transition: max-width 0.4s ease-out, margin-left 0.4s ease-out, margin-right 0.4s ease-out;
+            max-width: 0px;
+            margin: $buttons_inner_margin;
+            max-width: 200px;
+            p {
+                white-space: nowrap;
+                height: fit-content;
+                margin-bottom: 1.5px;
+            }
+        }
+    }
+    .mode.active {
+        padding: $buttons_padding !important;
+        font-weight: 400;
+        border: solid $buttons_border_width $main_color;
+        color: $main_color;
+        svg .thick {
+            stroke-width: 1.2;
+            stroke: $main_color;
+        }
+        svg .thin {
+            stroke-width: 0.6;
+            stroke: $main_color;
+        }
+        svg .circle-fill {
+          fill: $main_color;
+        }
+        .mode_container {
+            max-width: 200px !important;
+            margin: $buttons_inner_margin !important;
+        }
+    }
+    .mode:hover {
+        padding: $buttons_padding !important;
+        color: $grey_hover;
+        border-color: $grey_hover;
+        svg .thick, svg .thin {
+            stroke: $grey_hover;
+        }
+        svg .circle-fill {
+            fill: $grey_hover;
+        }
+        .mode_container {
+            max-width: 200px !important;
+            margin: $buttons_inner_margin !important;
+        }
+    }
+    .mode.collapsed {
+        padding: $buttons_padding_collapsed;
+        .mode_container {
+            max-width: 0px;
+            margin-left: 0px;
+            margin-right: 0px;
+        }
+    }
+    .mode:last-of-type {
+        margin-right: 0;
+    }
+}
+
+#global_nav {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    margin: $global_margins;
+    z-index: 1;
+    font-size: $UI_main_font_size;
+    h1 {
+        font-family: 'Ortica';
+        font-size: 1.7em;
+        margin: $main_title_margin;
+    }
+    #menu {
+        display: flex;
+        align-items: center;
+        #search {
+            display: flex;
+            align-items: center;
+            input[type="search"] {
+                height: $search_box_height;
+                width: 10vw;
+                padding-left: 13px;
+                padding-right: 30px;
+                padding-bottom: 1px;
+                font-family: 'Public';
+                font-weight: 300;
+                border-radius: 20px;
+                border: solid $grey_inactive $buttons_border_width;
+                color: $grey_inactive;
+                background-color: $bg_color;
+                transition: color $animation_style;
+            }
+            input[type="search"]:hover {
+                color: $grey_hover;
+            }
+            input[type="search"]:active {
+                color: $main_color;
+            }
+            button {
+                background: none;
+                border: none;
+                cursor: pointer;
+                svg {
+                    margin-top: 5px;
+                    margin-left: $search_icon_offset;
+                    height: $medium_picto_size;
+                    fill: $grey_inactive;
+                    transition: fill $animation_style;
+                }
+                svg:hover {
+                    fill: $grey_hover;
+                }
+            }
+        }
+        .menu_item {
+            font-weight: 300;
+            display: flex;
+            align-items: center;
+            cursor: pointer;
+            margin: 0 10px;
+            padding-bottom: 2px;
+            svg {
+                width: $medium_picto_size;
+                height: $medium_picto_size;
+                margin-right: 3px;
+                fill: $main_color;
+            }
+        }
+        .menu_item:hover {
+            font-weight: 400;
+        }
+    }
+}
+
+//                   //
+//  smaller desktop  //
+//                   //
+
+@media only screen and (max-width: 1440px) {
+    #buttons_container, #global_nav {
+        font-size: $UI_main_font_size--sm;
+    }
+    #buttons_container {
+        .arrow svg {
+            height: $large_picto_size--sm;
+        }
+        .mode {
+            padding: $buttons_padding--sm;
+            svg {
+                height: $large_picto_size--sm;            
+            }
+            .mode_container {
+                margin: $buttons_inner_margin--sm;
+            }
+        }
+        .mode.active {
+            padding: $buttons_padding--sm !important;
+            .mode_container {
+                margin: $buttons_inner_margin--sm !important;
+            }
+        }
+        .mode:hover {
+            padding: $buttons_padding--sm !important;
+            .mode_container {
+                margin: $buttons_inner_margin--sm !important;
+            }
+        }
+        .mode.collapsed {
+            padding: $buttons_padding_collapsed--sm;
+        }
+    }
+    #global_nav {
+        h1 {
+            margin: $main_title_margin--sm;
+        }
+        #menu {
+            #search {
+                input[type="search"] {
+                    height: $search_box_height--sm;
+                    font-size: $UI_main_font_size--sm;
+                }
+                button {
+                    svg {
+                        margin-left: $search_icon_offset--sm;
+                        width: $medium_picto_size--sm;
+                    }
+                }
+            }
+            .menu_item {
+                svg {
+                    width: $medium_picto_size--sm;
+                    height: $medium_picto_size--sm;
+                }
+            }
+        }
+    }
 }