valentin_le_moign/ou_atterrir_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

couleurs en canvas et responsive sass

Browse Source
This commit is contained in:
Valentin
2023-03-28 02:39:40 +02:00
parent 6e4dca0d5a
commit 40c1d8402e
6 changed files with 628 additions and 536 deletions
Download Patch File Download Diff File Expand all files Collapse all files
background.js
+128 -119
View File
@@ -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();
}
index.html
+5 -9
View File
@@ -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
+93 -72
View File
@@ -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.css.map
+1 -1
View File
@@ -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
+401 -334
View File
@@ -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;
}
}
}
}
}
styles.scss.map
-1
View File
@@ -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"}