diff --git a/background.js b/background.js index 520d762..a9026ce 100644 --- a/background.js +++ b/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 -}); +// mode : terrain de vie, proximité, superposition.... +// profondeur : atlas, carte -/* -|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 - - -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; + prevMode = curentMode; + curentMode = 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); + 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(); } \ No newline at end of file diff --git a/index.html b/index.html index ff05d91..ea54a2b 100644 --- a/index.html +++ b/index.html @@ -23,21 +23,18 @@ - -
-
-
+

L'atlas

Les cartes

-
+
+
@@ -75,9 +72,9 @@

Doléancer

-
+
+ @@ -102,7 +99,6 @@ - \ No newline at end of file diff --git a/styles.css b/styles.css index 7e10efd..62354e4 100644 --- a/styles.css +++ b/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 */ diff --git a/styles.css.map b/styles.css.map index 220abcc..773c7d1 100644 --- a/styles.css.map +++ b/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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/styles.scss b/styles.scss index 9186cc3..705f76b 100644 --- a/styles.scss +++ b/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; + } + } + } + } } \ No newline at end of file diff --git a/styles.scss.map b/styles.scss.map deleted file mode 100644 index 97c768b..0000000 --- a/styles.scss.map +++ /dev/null @@ -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"} \ No newline at end of file