couleurs en canvas et responsive sass

background.js

@@ -1,133 +1,59 @@
-// grain
+// mode : terrain de vie, proximité, superposition....
-grained('#grain-bg', {
+// profondeur : atlas, carte
-    animate: true,
-    patternWidth: 100,
-    patternHeight: 100,
-    grainOpacity: 0.5,
-    grainDensity: 1,
-    grainWidth: 1,
-    grainHeight: 1,
-    grainChaos: 10,
-    grainSpeed: 1
-});
 
-/* 
+let modeAmount = 0,
-|O couleur prev      O  |
+    curentMode = 1, prevMode,
-|     couleur d'appoint |
+    currentProfondeur = "atlas",
-|                       |
+    colors = {
-|                       |
+        bg: {
-|                       |
+            h: 29,
-|        couleur next  O|
+            s: 48,
-*/
+            l: 48
-
+        }
-//  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
-
-
-let pageAmount = 0;
-let currentPage = 1, prevPage;
-let currentProfondeur = "atlas";
 
 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;
+        prevMode = curentMode;
-        currentPage = index + 1;
+        curentMode = index + 1;
 
-        console.log(currentPage, prevPage);
+        if (curentMode != prevMode) {
-
+            changeColors(curentMode - prevMode);
-        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);
         }
 
     })
 });
 
-let couleurs = {
+// pb si on clique plusieurs fois d'affilé, revient pas sur les bonnes couleurs
-    prev: {
+// le passage entre toutes les couleurs quand le diffAmount est élevé n'est pas bien
-        h: 42,
+//      -> préférer ajouter un rectangle de la bonne couleur et lui augmenter l'opacité
-        s: 40.6,
+
-        l: 44.9 + 20,
+function changeColors(diffAmount) {
-    },
+    let originColor = colors.bg.h,
-    next: {
+        currentColor = originColor,
-        h: 0,
+        newColor = originColor + (360 / modeAmount) * diffAmount,
-        s: 30.5,
+        transitionTime = 50,
-        l: 46.3 + 20,
+        stepAmount = (newColor - originColor) / transitionTime;
-    },
+
-    appoint: {
+        let animation = setInterval(() => {
-        h: 0,
+            if (
-        s: 66,
+            (diffAmount > 0 && currentColor < newColor) ||
-        l: 35.7 + 20,
+            (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;
+  margin: 1.5vh 1vw 2vh 1vw;
-  height: 4vh;
+  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;
+  fill: rgb(255, 255, 255);
-  stroke: black;
+  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: 0px 5px 0px 10px;
-  margin-right: 5px;
   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: 0px 5px 0px 10px !important;
-  margin-right: 5px !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: 0px 5px 0px 10px !important;
-  margin-right: 5px !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: 0px 0px 17px 5px;
-  margin-left: 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;
+  width: 1.3rem;
-  margin-right: -5px;
+  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.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AAOA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAMJ;EACI;EACA;;;AAGJ;EACI;EACA;;;AAMJ;EACI,SA7Ca;EA8Cb;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AACA;EACI;;AAIR;EACI;AACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;;;AAMR;EACI;EACA;EACA;;;AAGJ;EACI;;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA,QA/Ha;EAgIb;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGR;EACI;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI,MA7JI;;AA+JR;EACI,MA/JC;;AAkKT;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;AACA;EACI;EACA;EACA,QA3LA;;AA6LJ;EACI;EACA;EACA,QAhMA;;AAkMJ;EACE,MAnME;;AAsMR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AAIZ;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACE;;AAEF;EACI;EACA;EACA;;AAGR;EACI;EACA,OA5OK;EA6OL,cA7OK;;AA8OL;EACI,QA/OC;;AAiPL;EACI,MAlPC;;AAoPL;EACI;EACA;EACA;;AAGR;EACI;;AACA;EACI;EACA;EACA;;;AAKZ;EACI;EACA;EACA;EACA,QA7Qa;EA8Qb;;AACA;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OAjSA;EAkSA;;AAEJ;EACI,OApSH;;AAsSD;EACI;;AAEJ;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;EACA,MAlTJ;EAmTI;;AAEJ;EACI,MArTP;;AAyTL;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAGR;EACI","file":"styles.css"}
+{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AA2CA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAMJ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA,OA5DS;;;AAkEb;EACI,SAhFa;EAiFb;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AACA;EACI;;AAIR;EACI,MAtFG;AAuFH;EACA;EACA;;AAGJ;EACI;EACA;EACA,QAhGK;EAiGL;;;AAKR;EACI;EACA;EACA;EACA;EACA;EACA;EACA,QA1Ha;EA2Hb,WAzGgB;;AA0GhB;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGR;EACI,cAzIS;;AA0IT;EACI,QA/HO;EAgIP;EACA,MAtID;EAuIC,QAxIC;EAyID;EACA;EACA;EACA;;AAEJ;EACI,MA7II;;AA+IR;EACI,MA/IC;;AAkJT;EACI;EACA,aA7JS;;AA+Jb;EACI;EACA;EACA;EACA,kBA5JG;EA6JH;EACA,cArKS;EAsKT,SAzKU;EA0KV;EACA;EACA;EACA;EACA;EACA;;AACA;EACI,QAlKO;;AAmKP;EACI;EACA;EACA,QA1KA;;AA4KJ;EACI;EACA;EACA,QA/KA;;AAiLJ;EACE,MAlLE;;AAqLR;EACI;EACA;EACA;EACA;EACA,QAnMW;EAoMX;;AACA;EACI;EACA;EACA;;AAIZ;EACI;EACA;EACA;EACA,OAzMK;;AA0ML;EACI;EACA,QA5MC;;AA8ML;EACI;EACA,QAhNC;;AAkNL;EACE,MAnNG;;AAqNL;EACI;EACA;;AAGR;EACI;EACA,OAzNK;EA0NL,cA1NK;;AA2NL;EACI,QA5NC;;AA8NL;EACI,MA/NC;;AAiOL;EACI;EACA;;AAGR;EACI,SAlPoB;;AAmPpB;EACI;EACA;EACA;;AAGR;EACI;;;AAIR;EACI;EACA;EACA;EACA,QAvQa;EAwQb;EACA,WAvPgB;;AAwPhB;EACI;EACA;EACA,QApQY;;AAsQhB;EACI;EACA;;AACA;EACI;EACA;;AACA;EACI,QA5QI;EA6QJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OAhRA;EAiRA,kBAlRL;EAmRK;;AAEJ;EACI,OApRH;;AAsRD;EACI,OA1RH;;AA4RD;EACI;EACA;EACA;;AACA;EACI;EACA,aApSC;EAqSD,QA5RA;EA6RA,MAlSJ;EAmSI;;AAEJ;EACI,MArSP;;AAySL;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI,OA7SI;EA8SJ,QA9SI;EA+SJ;EACA,MAvTH;;AA0TL;EACI;;;AASZ;EACI;IACI,WAnTgB;;EAsThB;IACI,QAtTW;;EAwTf;IACI,SAlUU;;EAmUV;IACI,QA3TO;;EA6TX;IACI,QArUW;;EAwUnB;IACI;;EACA;IACI;;EAGR;IACI;;EACA;IACI;;EAGR;IACI,SAtVoB;;EA0VxB;IACI,QAxVY;;EA4VR;IACI,QA5VI;IA6VJ,WA1VI;;EA6VJ;IACI,aAhWC;IAiWD,OA7VA;;EAkWR;IACI,OAnWI;IAoWJ,QApWI","file":"styles.css"}

styles.scss

@@ -1,10 +1,46 @@
-$global_margins: 1.5vh 1vw;
+// /!\ 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;
@@ -34,9 +70,14 @@ $grey_hover: rgb(50, 50, 50);
     padding: 0;
 }
 
+button {
+    all: initial;
+}
+
 body {
     font-family: 'Public', sans-serif;
     font-weight: 400;
+    color: $main_color;
 }
 
 
@@ -63,7 +104,7 @@ body {
     }
 
     svg#fill {
-        fill: white;
+        fill: $bg_color;
         /* mix blend mode est dépendant du stacking context */
         mix-blend-mode: overlay;
         opacity: 0.4;
@@ -72,52 +113,12 @@ body {
     svg#stroke {
         position: absolute;
         fill: none;
-        stroke: black;
+        stroke: $main_color;
         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;
@@ -126,7 +127,7 @@ body {
     display: flex;
     align-items: center;
     margin: $global_margins;
-    height: 4vh;
+    font-size: $UI_main_font_size;
     .niveau_profondeur {
         display: flex;
         flex-direction: column;
@@ -147,16 +148,16 @@ body {
         }
     }
     .arrow {
-        margin-right: 15px;
+        margin-right: $buttons_margin;
         svg {
-            height: 27px;
+            height: $large_picto_size;
             width: auto;
-            fill: white;
+            fill: $bg_color;
-            stroke: black;
+            stroke: $main_color;
             stroke-width: 0;
             cursor: pointer;
             margin-top: 4px;
-            transition: fill 0.2s ease-out;
+            transition: fill $animation_style;
         }
         svg:hover {
             fill: $grey_inactive;
@@ -167,32 +168,31 @@ body {
     }
     .arrow:last-of-type {
         margin-right: 0;
-        margin-left: 12px;
+        margin-left: $buttons_margin;
     }
     .mode {
         display: flex;
         align-items: center;
         justify-content: space-around;
-        background-color: white;
+        background-color: $bg_color;
         margin: 0;
-        margin-right: 14px;
+        margin-right: $buttons_margin;
-        padding: 10px 12px;
+        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 0.2s ease-out;
+        transition: border 0.1s ease-out, color 0.1s ease-out, padding $animation_style;
         font-weight: 300;
-        font-size: 1rem;
         svg {
-            height: 28px;
+            height: $large_picto_size;
             .thick {
-                transition: stroke-width 0.2s ease-out, fill 0.2s ease-out, stroke 0.2s ease-out;
+                transition: stroke-width $animation_style, fill $animation_style, stroke $animation_style;
                 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;
+                transition: stroke-width $animation_style, fill $animation_style, stroke $animation_style;
                 stroke-width: 0.5;
                 stroke: $grey_inactive;
             }
@@ -205,40 +205,38 @@ 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: $buttons_inner_margin;
-            margin-right: 5px;
             max-width: 200px;
             p {
                 white-space: nowrap;
                 height: fit-content;
-                margin-bottom: 3px;
+                margin-bottom: 1.5px;
             }
         }
     }
     .mode.active {
-        padding: 10px 12px !important;
+        padding: $buttons_padding !important;
         font-weight: 400;
-        border: solid $buttons_border_width rgba(0, 0, 0, 1);
+        border: solid $buttons_border_width $main_color;
-        color: rgba(0, 0, 0, 1);
+        color: $main_color;
         svg .thick {
             stroke-width: 1.2;
-            stroke: rgba(0, 0, 0, 1);
+            stroke: $main_color;
         }
         svg .thin {
             stroke-width: 0.6;
-            stroke: rgba(0, 0, 0, 1);
+            stroke: $main_color;
         }
         svg .circle-fill {
-          fill: rgba(0, 0, 0, 1);
+          fill: $main_color;
         }
         .mode_container {
             max-width: 200px !important;
-            margin-left: 10px !important;
+            margin: $buttons_inner_margin !important;
-            margin-right: 5px !important;
         }
     }
     .mode:hover {
-        padding: 10px 12px !important;
+        padding: $buttons_padding !important;
         color: $grey_hover;
         border-color: $grey_hover;
         svg .thick, svg .thin {
@@ -249,18 +247,20 @@ body {
         }
         .mode_container {
             max-width: 200px !important;
-            margin-left: 10px !important;
+            margin: $buttons_inner_margin !important;
-            margin-right: 5px !important;
         }
     }
     .mode.collapsed {
-        padding: 10px 7px;
+        padding: $buttons_padding_collapsed;
         .mode_container {
             max-width: 0px;
             margin-left: 0px;
             margin-right: 0px;
         }
     }
+    .mode:last-of-type {
+        margin-right: 0;
+    }
 }
 
 #global_nav {
@@ -269,47 +269,48 @@ body {
     left: 0;
     margin: $global_margins;
     z-index: 1;
+    font-size: $UI_main_font_size;
     h1 {
         font-family: 'Ortica';
         font-size: 1.7em;
-        margin-bottom: 17px;
+        margin: $main_title_margin;
-        margin-left: 5px;
     }
     #menu {
         display: flex;
+        align-items: center;
         #search {
             display: flex;
             align-items: center;
             input[type="search"] {
-                height: 34px;
+                height: $search_box_height;
                 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 $grey_inactive $buttons_border_width;
                 color: $grey_inactive;
-                transition: color 0.2s ease-out;
+                background-color: $bg_color;
+                transition: color $animation_style;
             }
             input[type="search"]:hover {
                 color: $grey_hover;
             }
             input[type="search"]:active {
-                color: black;
+                color: $main_color;
             }
             button {
                 background: none;
                 border: none;
                 cursor: pointer;
                 svg {
-                    margin-top: 3px;
+                    margin-top: 5px;
-                    margin-left: -45px;
+                    margin-left: $search_icon_offset;
-                    height: 24px;
+                    height: $medium_picto_size;
                     fill: $grey_inactive;
-                    transition: fill 0.2s ease-out;
+                    transition: fill $animation_style;
                 }
                 svg:hover {
                     fill: $grey_hover;
@@ -324,8 +325,10 @@ body {
             margin: 0 10px;
             padding-bottom: 2px;
             svg {
-                height: 24px;
+                width: $medium_picto_size;
-                margin-right: -5px;
+                height: $medium_picto_size;
+                margin-right: 3px;
+                fill: $main_color;
             }
         }
         .menu_item:hover {
@@ -333,3 +336,67 @@ body {
         }
     }
 }
+
+//                   //
+//  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;
+                }
+            }
+        }
+    }
+}

styles.scss.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["styles.css"],"names":[],"mappings":";AACA;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF","file":"styles.scss"}