fond en couleurs ok

_WORKFILES/dessin-pictos.svg

@@ -1,131 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   width="210mm"
-   height="297mm"
-   viewBox="0 0 210 297"
-   version="1.1"
-   id="svg5"
-   inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
-   sodipodi:docname="dessin-pictos.svg"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <sodipodi:namedview
-     id="namedview7"
-     pagecolor="#ffffff"
-     bordercolor="#000000"
-     borderopacity="0.25"
-     inkscape:showpageshadow="2"
-     inkscape:pageopacity="0.0"
-     inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#d1d1d1"
-     inkscape:document-units="mm"
-     showgrid="false"
-     showguides="true"
-     inkscape:zoom="1"
-     inkscape:cx="154.5"
-     inkscape:cy="29"
-     inkscape:window-width="2880"
-     inkscape:window-height="1526"
-     inkscape:window-x="-11"
-     inkscape:window-y="-11"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="layer1" />
-  <defs
-     id="defs2" />
-  <g
-     inkscape:label="page"
-     inkscape:groupmode="layer"
-     id="layer1">
-    <g
-       id="g2528"
-       inkscape:label="terrain-de-vie-REGULAR-MENU"
-       transform="translate(6.2177084,-2.2489583)"
-       inkscape:export-filename="..\assets\pictos\terrain-de-vie-REGULAR-MENU.svg"
-       inkscape:export-xdpi="96"
-       inkscape:export-ydpi="96">
-      <ellipse
-         style="fill:none;stroke:#000000;stroke-width:0.211667;stroke-dasharray:none;stroke-opacity:1"
-         id="path790"
-         cx="71.357956"
-         cy="19.674818"
-         rx="4.5815058"
-         ry="4.5815053" />
-      <path
-         style="fill:none;stroke:#000000;stroke-width:0.079375;stroke-dasharray:none;stroke-opacity:1"
-         d="m 71.357956,15.044283 v 9.216103"
-         id="path1684" />
-      <path
-         style="fill:none;stroke:#000000;stroke-width:0.079375;stroke-dasharray:none;stroke-opacity:1"
-         d="M 75.966008,19.674818 H 66.749905"
-         id="path1686" />
-      <path
-         style="fill:none;stroke:#000000;stroke-width:0.079375;stroke-dasharray:none;stroke-opacity:1"
-         d="M 71.376784,15.172736 72.33624,16.30742"
-         id="path1688" />
-      <path
-         style="fill:none;stroke:#000000;stroke-width:0.079375;stroke-dasharray:none;stroke-opacity:1"
-         d="m 71.331631,15.175325 -0.959456,1.134683"
-         id="path1690" />
-      <path
-         style="fill:#ffffff;stroke:#000000;stroke-width:0.211667;stroke-dasharray:none;stroke-opacity:1"
-         d="m 68.731778,18.579643 1.555716,-1.285982 1.88169,-0.245245 1.930202,1.322245 0.02279,1.904879 -1.590524,1.765844 -2.806214,0.467818 -1.274387,-1.625623 z"
-         id="path1694"
-         sodipodi:nodetypes="ccccccccc" />
-    </g>
-    <g
-       id="g4074"
-       inkscape:label="puissance-d-agir-REGULAR-MENU"
-       transform="translate(3.175,-1.7197917)"
-       inkscape:export-filename="..\assets\pictos\puissance-d-agir-REGULAR-MENU.svg"
-       inkscape:export-xdpi="96"
-       inkscape:export-ydpi="96">
-      <circle
-         style="fill:none;stroke:#000000;stroke-width:0.211667;stroke-dasharray:none;stroke-opacity:1"
-         id="path3315"
-         cx="92.027863"
-         cy="19.082895"
-         r="4.6104493" />
-      <ellipse
-         style="fill:none;stroke:#000000;stroke-width:0.079375;stroke-dasharray:none;stroke-opacity:1"
-         id="circle4047"
-         cx="92.027863"
-         cy="19.082895"
-         rx="2.2631533"
-         ry="2.2631531" />
-      <circle
-         style="fill:#000000;stroke:none;stroke-width:0.0672404;stroke-dasharray:none;stroke-opacity:1"
-         id="path4049"
-         cx="92.027863"
-         cy="19.082895"
-         r="0.39687499" />
-      <path
-         style="fill:#000000;stroke:#000000;stroke-width:0.0738563;stroke-dasharray:none;stroke-opacity:1"
-         d="m 87.381484,19.082895 h 9.292758"
-         id="path4051" />
-      <path
-         style="fill:#000000;stroke:#000000;stroke-width:0.0738563;stroke-dasharray:none;stroke-opacity:1"
-         d="M 92.027863,23.729274 V 14.436516"
-         id="path4053" />
-      <path
-         style="fill:#000000;stroke:#000000;stroke-width:0.0738563;stroke-dasharray:none;stroke-opacity:1"
-         d="m 94.351053,23.106777 -4.64638,-8.047764"
-         id="path4057" />
-      <path
-         style="fill:#000000;stroke:#000000;stroke-width:0.0738563;stroke-dasharray:none;stroke-opacity:1"
-         d="M 96.051746,21.406084 88.00398,16.759706"
-         id="path4059" />
-      <path
-         style="fill:#000000;stroke:#000000;stroke-width:0.0738563;stroke-dasharray:none;stroke-opacity:1"
-         d="m 96.051745,16.759705 -8.047764,4.64638"
-         id="path4061" />
-      <path
-         style="fill:#000000;stroke:#000000;stroke-width:0.0738563;stroke-dasharray:none;stroke-opacity:1"
-         d="m 94.351052,15.059012 -4.646378,8.047766"
-         id="path4063" />
-    </g>
-  </g>
-</svg>

_WORKFILES/dev_design_fevrier.txt

@@ -1,42 +0,0 @@
-I / PICTOS
-
-OUTILS D'ENQUETE
-1.1 terrain de vie
-1.2 proximité
-1.3 superposition
-1.4 puissance d'agir
-1.5 actions
-1.6 doléancier
-
-Deux graisse : regular (0.8px, 0.3px) et active (1.2px, 0.6px)
-Deux tailles : 35px (menu) et 28px (cartel)
-Points : 3px 5px
-
-NAVIGATION
-2.1 mode d'emploi
-2.2 connexion
-2.3 rechercher
-2.4 retour aux cartes vivantes
-2.5 casque écoute
-2.6 chevron fermer onglet
-2.7 entités liées (sens de liaison)
-2.8 scrollbar
-2.9 custom video/sound player
-
-FOND D'ENQUÊTE
-3.1 terrain de vie
-3.2 puissance d'agir
-3.3 doléance
-
-Essayer les pictos contextuellement	-> +ieurs tailles et épaisseurs ?
-					-> rapport à la typo
-
-
-II / ANIMATIONS
-1. Terrains de vie en particules
-2. Survol terrains de vie sur carte
-3. Ecoute terrain de vie sur carte
-4. Survol association sur carte
-5. Survol entité sur enquête
-6. Apparition volets latéraux enquête
-7. Clic/survol menu mode de navigation

_WORKFILES/reu-mi-mars.txt

@@ -1,16 +0,0 @@
-- couleur ou contours fond de boussole
-- atlas des cartes d'atterrissage-> titre principal du titre
-
-- En haut : l'atlas / en bas : les cartes
-- historique et détails seulement dans terrain de vie
--contours vert fluo oui sur forme pas sur bloc
-- dans superposition sur les fiches principale grosse forme et reliée petite forme
-- pas de liste d'entités -> juste "tête de cartouche"
-
-- elipse transition mode atlas à carte
-- pas assez sur la partie gauche haute
-- fixer légèrement animer les couleurs
-- assombrir/désaturer couleurs -> essayer version carte plus sombre
-- picto action à revoir trop explosion 
-- titre au dessus du menu
-- essayer les deux titres "atlas" et "cartes" et celui sur lequel on est pas est grisé

background.js

@@ -2,15 +2,15 @@
 // profondeur : atlas, carte
 
 let modeAmount = 0,
-    curentMode = 1, prevMode,
-    currentProfondeur = "atlas",
-    colors = {
-        bg: {
-            h: 29,
-            s: 48,
-            l: 48
-        }
-    };
+curentMode = 1, prevMode,
+currentProfondeur = "atlas",
+colors = {
+    bg: {
+        h: 29,
+        s: 48,
+        l: 48
+    }
+};
 
 document.querySelectorAll('.mode').forEach(function(node, index) {
     modeAmount++;
@@ -30,31 +30,6 @@ document.querySelectorAll('.mode').forEach(function(node, index) {
     })
 });
 
-// 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é
-//      -> ou peut-être changer le fond en css ?
-
-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);
-    
-}
-
 function toggleProfondeur(el) {
     if (el.classList.contains("selected")) {
         return;
@@ -81,7 +56,7 @@ function toggleProfondeur(el) {
     }
 }
 
-
+// onclick sur les flèches du menu
 function toggleMode(direction) {
     let modes = [];
     let currentIndex;
@@ -97,37 +72,146 @@ function toggleMode(direction) {
     });
     if (direction == "next" && currentIndex + 2 <= modeAmount) {
         modes[currentIndex + 1].classList.add('active');
+        curentMode = curentMode + 1;
         changeColors(1);
     } else if (direction == "prev" && currentIndex - 1 >= 0) {
         modes[currentIndex - 1].classList.add('active');
+        curentMode = curentMode - 1;
         changeColors(-1);
     } else if (direction == "next" && currentIndex + 1 == modeAmount) {
         modes[0].classList.add('active');
+        curentMode = 1;
         changeColors(-modeAmount + 1);
     } else if (direction == "prev" && currentIndex == 0) {
         modes[modeAmount - 1].classList.add('active');
+        curentMode = modeAmount;
         changeColors(modeAmount - 1);
     }
 }
 
 
+function changeColors(diffAmount) {
+    let prevPaletteIndex = (prevMode + (prevMode - 1));
+    let baseColors = [];
+    baseColors.push(colorPalette[prevPaletteIndex - 1]);
+    baseColors.push(colorPalette[prevPaletteIndex]);
+    baseColors.push(colorPalette[prevPaletteIndex + 1] ? colorPalette[prevPaletteIndex + 1] : colorPalette[0]);
+    
+    let paletteIndex = (curentMode + (curentMode - 1));
+    let targetColors = [];
+    
+    targetColors.push(colorPalette[paletteIndex - 1]);
+    targetColors.push(colorPalette[paletteIndex]);
+    targetColors.push(colorPalette[paletteIndex + 1 ] ? colorPalette[paletteIndex + 1] : colorPalette[0]);
+
+    function hexToRgba(color) {
+        let colorRgba = {
+            r : parseInt(color.substr(0, 2), 16),
+            g : parseInt(color.substr(2, 2), 16),
+            b : parseInt(color.substr(4, 2), 16),
+            a : parseInt(color.substr(6, 2), 16)
+        }
+        return colorRgba;
+    }
+
+    function rgbaToHex(color) {
+        let colorHexa = {
+            r : color.r.toString(16).length != 2 ? 0 + color.r.toString(16) : color.r.toString(16),
+            g : color.g.toString(16).length != 2 ? 0 + color.g.toString(16) : color.g.toString(16),
+            b : color.b.toString(16).length != 2 ? 0 + color.b.toString(16) : color.b.toString(16),
+            a : color.a.toString(16).length != 2 ? 0 + color.a.toString(16) : color.a.toString(16)
+        }
+        return colorHexa.r + colorHexa.g + colorHexa.b + colorHexa.a;
+    }
+
+    let steps = 10, // vitesse de la transition
+        currentFrame = 0;
+
+    function animate() {
+        currentFrame++;
+
+        // à chaque frame on vide currentColors
+        // puis pusher trois couleurs hex de transition
+        // lorsque le nombre de steps est atteint envoyer les couleurs def
+        // et ne pas réanimer
+
+        currentColors = [];
+        for (i = 0; i < baseColors.length; i++) {
+            if (currentFrame == steps) {
+                currentColors.push(targetColors[i])
+            } else {
+                currentColors.push(getTransitionColor(baseColors[i], targetColors[i], currentFrame));
+            }
+        }
+
+        if (steps == 0) transitionLaunched++;
+        if (currentFrame != steps) {
+            window.requestAnimationFrame(() => animate());
+        } else {
+            currentFrame = 0;
+        }
+    }
+    animate()
+
+    function getTransitionColor(baseColor, targetColor, currentFrame) {
+        console.log(baseColor, targetColor, currentFrame)
+        let rgbaBase = hexToRgba(baseColor),
+            rgbaTarget = hexToRgba(targetColor),
+            diff = {
+                r : (rgbaBase.r - rgbaTarget.r) * -1,
+                g : (rgbaBase.g - rgbaTarget.g) * -1,
+                b : (rgbaBase.b - rgbaTarget.b) * -1,
+                a : (rgbaBase.a - rgbaTarget.a) * -1
+            },
+            transitionColor = {
+                r : Math.floor(rgbaBase.r + (diff.r / steps) * currentFrame),
+                g : Math.floor(rgbaBase.g + (diff.g / steps) * currentFrame),
+                b : Math.floor(rgbaBase.b + (diff.b / steps) * currentFrame),
+                a : Math.floor(rgbaBase.a + (diff.a / steps) * currentFrame)
+            };
+        transitionColor = rgbaToHex(transitionColor);
+
+        return transitionColor;
+    }
+}
+
+
 // COULEURS DE FOND
 // basé sur https://codepen.io/ThreePixDroid/pen/MWeomWp
 
 // ajouter un grain fixe : cf
 // https://codepen.io/zadvorsky/pen/PwyoMm
 
+let colorPalette = [
+    "ff6a0399",
+    "c9c4ffff",
+    "0796908c",
+    "e6ffc4ff",
+    "e105054d",
+    "aaffa2ff",
+    "18b8e64d",
+    "ffc4f9ff",
+    "9692074d",
+    "ffe7c4ff",
+    "0629ad4d",
+    "fffdbaff"
+]
 
+let currentColors = [];
+currentColors.push(
+    colorPalette[0],
+    colorPalette[1],
+    colorPalette[2],
+);
 
 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;
+        // réglages du fond
+        this.radius = 1800;
+        this.speed = 0.001;
 
         (window.onresize = () => {
             this.setCanvasSize();
@@ -142,15 +226,16 @@ class GradientAnimation {
     }
     createCircles() {
         this.circles = [];
-        for (let i = 0; i < this.circlesNum; i++) {
-            this.circles.push(new Circle(this.w, this.h, this.minRadius, this.maxRadius));
-        }
+        // positionnement des cercles directement ici
+        this.circles.push(new Circle(this.w, this.h, this.radius, 30, 30, 0));
+        this.circles.push(new Circle(this.w, this.h, this.radius, window.innerWidth / 2, window.innerHeight, 1));
+        this.circles.push(new Circle(this.w, this.h, this.radius, window.innerWidth - 30, 30, 2));
     }
     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.fillStyle = "#aaaaaa";
         this.ctx.fillRect(0, 0, this.w, this.h);
     }
     drawAnimation() {
@@ -161,23 +246,24 @@ class GradientAnimation {
 }
 
 class Circle {
-    constructor(w, h, minR, maxR) {
-        this.x = Math.random() * w;
-        this.y = Math.random() * h;
+    constructor(w, h, radius, posX, posY, index) {
+        this.x = posX;
+        this.y = posY;
         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)`;
+        this.radius = radius;
+        this.index = index;
+        this.firstColor = "#" + currentColors[index];
+        this.secondColor = "#ffffff00";
     }
     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(0, "#" + currentColors[this.index]);
         gradient.addColorStop(1, this.secondColor);
-
-        ctx.globalCompositionOperation = `overlay`;
+        
+        ctx.globalCompositionOperation = "multiply"; // ça marche pas
         ctx.fillStyle = gradient;
         ctx.beginPath();
         ctx.arc(x, y, this.radius, 0, Math.PI * 2);
@@ -187,4 +273,40 @@ class Circle {
 
 window.onload = () => {
     new GradientAnimation();
-}
+}
+
+
+
+
+
+
+
+/* palette :
+        multiply vers blanc
+
+0        #ff6a03 45%
+    1    TERRAIN DE VIE
+1        #c9c4ff 100%
+
+2        #079690 30%
+    2    PROXIMITE
+3        #e6ffc4 100%
+
+4        #e10505 30%
+    3    SUPPERPOSITION
+5        #aaffa2 100%
+
+6        #18b8e6 30%
+    4    PUISSANCE
+7        #ffc4f9 100%
+
+8        #969207 30%
+    5    ACTION
+9        #ffe7c4 100%
+
+10        #0629ad 30%
+    6    DOLEANCER
+11        #fffdba 100% */
+
+
+// 1 1, 2 3, 3 5, 4 7, 5 9, 6 11

index.html

@@ -61,7 +61,7 @@
                 </div>
             </div>
             <div class="mode">
-                <svg data-src="assets/pictos/action-6.svg" data-cache="disabled"></svg>
+                <svg data-src="assets/pictos/action-3.svg" data-cache="disabled"></svg>
                 <div class="mode_container">
                     <p>Action</p>
                 </div>

styles.css

@@ -30,6 +30,7 @@ body {
   font-family: "Public", sans-serif;
   font-weight: 400;
   color: rgb(0, 0, 0);
+  overflow: hidden;
 }
 
 #content {

styles.css.map

@@ -1 +1 @@
-{"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"}
+{"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;EA6DT;;;AAMJ;EACI,SAjFa;EAkFb;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AACA;EACI;;AAIR;EACI,MAvFG;AAwFH;EACA;EACA;;AAGJ;EACI;EACA;EACA,QAjGK;EAkGL;;;AAKR;EACI;EACA;EACA;EACA;EACA;EACA;EACA,QA3Ha;EA4Hb,WA1GgB;;AA2GhB;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGR;EACI,cA1IS;;AA2IT;EACI,QAhIO;EAiIP;EACA,MAvID;EAwIC,QAzIC;EA0ID;EACA;EACA;EACA;;AAEJ;EACI,MA9II;;AAgJR;EACI,MAhJC;;AAmJT;EACI;EACA,aA9JS;;AAgKb;EACI;EACA;EACA;EACA,kBA7JG;EA8JH;EACA,cAtKS;EAuKT,SA1KU;EA2KV;EACA;EACA;EACA;EACA;EACA;;AACA;EACI,QAnKO;;AAoKP;EACI;EACA;EACA,QA3KA;;AA6KJ;EACI;EACA;EACA,QAhLA;;AAkLJ;EACE,MAnLE;;AAsLR;EACI;EACA;EACA;EACA;EACA,QApMW;EAqMX;;AACA;EACI;EACA;EACA;;AAIZ;EACI;EACA;EACA;EACA,OA1MK;;AA2ML;EACI;EACA,QA7MC;;AA+ML;EACI;EACA,QAjNC;;AAmNL;EACE,MApNG;;AAsNL;EACI;EACA;;AAGR;EACI;EACA,OA1NK;EA2NL,cA3NK;;AA4NL;EACI,QA7NC;;AA+NL;EACI,MAhOC;;AAkOL;EACI;EACA;;AAGR;EACI,SAnPoB;;AAoPpB;EACI;EACA;EACA;;AAGR;EACI;;;AAIR;EACI;EACA;EACA;EACA,QAxQa;EAyQb;EACA,WAxPgB;;AAyPhB;EACI;EACA;EACA,QArQY;;AAuQhB;EACI;EACA;;AACA;EACI;EACA;;AACA;EACI,QA7QI;EA8QJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OAjRA;EAkRA,kBAnRL;EAoRK;;AAEJ;EACI,OArRH;;AAuRD;EACI,OA3RH;;AA6RD;EACI;EACA;EACA;;AACA;EACI;EACA,aArSC;EAsSD,QA7RA;EA8RA,MAnSJ;EAoSI;;AAEJ;EACI,MAtSP;;AA0SL;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI,OA9SI;EA+SJ,QA/SI;EAgTJ;EACA,MAxTH;;AA2TL;EACI;;;AASZ;EACI;IACI,WApTgB;;EAuThB;IACI,QAvTW;;EAyTf;IACI,SAnUU;;EAoUV;IACI,QA5TO;;EA8TX;IACI,QAtUW;;EAyUnB;IACI;;EACA;IACI;;EAGR;IACI;;EACA;IACI;;EAGR;IACI,SAvVoB;;EA2VxB;IACI,QAzVY;;EA6VR;IACI,QA7VI;IA8VJ,WA3VI;;EA8VJ;IACI,aAjWC;IAkWD,OA9VA;;EAmWR;IACI,OApWI;IAqWJ,QArWI","file":"styles.css"}

styles.scss

@@ -78,6 +78,7 @@ body {
     font-family: 'Public', sans-serif;
     font-weight: 400;
     color: $main_color;
+    overflow: hidden;
 }