ajouts des éléments de l'ui globale
This commit is contained in:
Valentin
Binary file not shown.
@@ -0,0 +1,174 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
width="35px"
|
||||
height="35px"
|
||||
viewBox="0 0 35 35"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="picto">
|
||||
<circle
|
||||
class="thick"
|
||||
fill="white"
|
||||
stroke="none"
|
||||
cx="17.5"
|
||||
cy="17.5"
|
||||
r="9" />
|
||||
<line
|
||||
class="thin"
|
||||
x1="17.5"
|
||||
y1="12"
|
||||
x2="17.5"
|
||||
y2="23" />
|
||||
<line
|
||||
class="thin"
|
||||
x1="17.5"
|
||||
y1="12"
|
||||
x2="17.5"
|
||||
y2="23"
|
||||
transform="rotate(45, 17.5, 17.5)" />
|
||||
<line
|
||||
class="thin"
|
||||
x1="17.5"
|
||||
y1="12"
|
||||
x2="17.5"
|
||||
y2="23"
|
||||
transform="rotate(90, 17.5, 17.5)" />
|
||||
<line
|
||||
class="thin"
|
||||
x1="17.5"
|
||||
y1="12"
|
||||
x2="17.5"
|
||||
y2="23"
|
||||
transform="rotate(135, 17.5, 17.5)" />
|
||||
|
||||
<line
|
||||
class="thick"
|
||||
x1="15"
|
||||
y1="17.5"
|
||||
x2="20"
|
||||
y2="17.5"
|
||||
transform-origin="center"
|
||||
transform="translate(-15 0)" />
|
||||
<line
|
||||
class="thick"
|
||||
x1="15"
|
||||
y1="17.5"
|
||||
x2="20"
|
||||
y2="17.5"
|
||||
transform-origin="center"
|
||||
transform="rotate(45) translate(-15 0)" />
|
||||
<line
|
||||
class="thick"
|
||||
x1="15"
|
||||
y1="17.5"
|
||||
x2="20"
|
||||
y2="17.5"
|
||||
transform-origin="center"
|
||||
transform="rotate(90) translate(-15 0)" />
|
||||
<line
|
||||
class="thick"
|
||||
x1="15"
|
||||
y1="17.5"
|
||||
x2="20"
|
||||
y2="17.5"
|
||||
transform-origin="center"
|
||||
transform="rotate(135) translate(-15 0)" />
|
||||
|
||||
<line
|
||||
class="thick"
|
||||
x1="15"
|
||||
y1="17.5"
|
||||
x2="20"
|
||||
y2="17.5"
|
||||
transform-origin="center"
|
||||
transform="rotate(180) translate(-15 0)" />
|
||||
<line
|
||||
class="thick"
|
||||
x1="15"
|
||||
y1="17.5"
|
||||
x2="20"
|
||||
y2="17.5"
|
||||
transform-origin="center"
|
||||
transform="rotate(225) translate(-15 0)" />
|
||||
<line
|
||||
class="thick"
|
||||
x1="15"
|
||||
y1="17.5"
|
||||
x2="20"
|
||||
y2="17.5"
|
||||
transform-origin="center"
|
||||
transform="rotate(270) translate(-15 0)" />
|
||||
<line
|
||||
class="thick"
|
||||
x1="15"
|
||||
y1="17.5"
|
||||
x2="20"
|
||||
y2="17.5"
|
||||
transform-origin="center"
|
||||
transform="rotate(315) translate(-15 0)" />
|
||||
<!-- <path
|
||||
class="thick"
|
||||
fill="white"
|
||||
d="M 14, 25.5
|
||||
L 17.5, 17.5
|
||||
L 21, 25.5"
|
||||
transform-origin="center"
|
||||
transform="translate(0 -16)" />
|
||||
<path
|
||||
class="thick"
|
||||
fill="white"
|
||||
d="M 14, 25.5
|
||||
L 17.5, 17.5
|
||||
L 21, 25.5"
|
||||
transform-origin="center"
|
||||
transform="rotate(45) translate(0 -16)" />
|
||||
<path
|
||||
class="thick"
|
||||
fill="white"
|
||||
d="M 14, 25.5
|
||||
L 17.5, 17.5
|
||||
L 21, 25.5"
|
||||
transform-origin="center"
|
||||
transform="rotate(90) translate(0 -16)" />
|
||||
<path
|
||||
class="thick"
|
||||
fill="white"
|
||||
d="M 14, 25.5
|
||||
L 17.5, 17.5
|
||||
L 21, 25.5"
|
||||
transform-origin="center"
|
||||
transform="rotate(135) translate(0 -16)" />
|
||||
<path
|
||||
class="thick"
|
||||
fill="white"
|
||||
d="M 14, 25.5
|
||||
L 17.5, 17.5
|
||||
L 21, 25.5"
|
||||
transform-origin="center"
|
||||
transform="rotate(180) translate(0 -16)" />
|
||||
<path
|
||||
class="thick"
|
||||
fill="white"
|
||||
d="M 14, 25.5
|
||||
L 17.5, 17.5
|
||||
L 21, 25.5"
|
||||
transform-origin="center"
|
||||
transform="rotate(225) translate(0 -16)" />
|
||||
<path
|
||||
class="thick"
|
||||
fill="white"
|
||||
d="M 14, 25.5
|
||||
L 17.5, 17.5
|
||||
L 21, 25.5"
|
||||
transform-origin="center"
|
||||
transform="rotate(270) translate(0 -16)" />
|
||||
<path
|
||||
class="thick"
|
||||
fill="white"
|
||||
d="M 14, 25.5
|
||||
L 17.5, 17.5
|
||||
L 21, 25.5"
|
||||
transform-origin="center"
|
||||
transform="rotate(315) translate(0 -16)" />
|
||||
-->
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.1 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="M480 896 160 576l320-320 42 42-248 248h526v60H274l248 248-42 42Z"/></svg>
|
||||
|
After Width: | Height: | Size: 168 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="m480 896-42-43 247-247H160v-60h525L438 299l42-43 320 320-320 320Z"/></svg>
|
||||
|
After Width: | Height: | Size: 169 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="M453 776h60V536h-60v240Zm26.982-314q14.018 0 23.518-9.2T513 430q0-14.45-9.482-24.225-9.483-9.775-23.5-9.775-14.018 0-23.518 9.775T447 430q0 13.6 9.482 22.8 9.483 9.2 23.5 9.2Zm.284 514q-82.734 0-155.5-31.5t-127.266-86q-54.5-54.5-86-127.341Q80 658.319 80 575.5q0-82.819 31.5-155.659Q143 347 197.5 293t127.341-85.5Q397.681 176 480.5 176q82.819 0 155.659 31.5Q709 239 763 293t85.5 127Q880 493 880 575.734q0 82.734-31.5 155.5T763 858.316q-54 54.316-127 86Q563 976 480.266 976Zm.234-60Q622 916 721 816.5t99-241Q820 434 721.188 335 622.375 236 480 236q-141 0-240.5 98.812Q140 433.625 140 576q0 141 99.5 240.5t241 99.5Zm-.5-340Z"/></svg>
|
||||
|
After Width: | Height: | Size: 725 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="M489 936v-60h291V276H489v-60h291q24 0 42 18t18 42v600q0 24-18 42t-42 18H489Zm-78-185-43-43 102-102H120v-60h348L366 444l43-43 176 176-174 174Z"/></svg>
|
||||
|
After Width: | Height: | Size: 245 B |
@@ -22,6 +22,7 @@
|
||||
L 1, 12
|
||||
Z" />
|
||||
<circle
|
||||
class="circle-fill"
|
||||
fill="black"
|
||||
cx="17.5"
|
||||
cy="17.5"
|
||||
|
||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.3 KiB |
@@ -18,6 +18,7 @@
|
||||
cy="17.5"
|
||||
r="9.3" />
|
||||
<circle
|
||||
class="circle-fill"
|
||||
fill="black"
|
||||
cx="17.5"
|
||||
cy="17.5"
|
||||
|
||||
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="M796 935 533 672q-30 26-69.959 40.5T378 727q-108.162 0-183.081-75Q120 577 120 471t75-181q75-75 181.5-75t181 75Q632 365 632 471.15 632 514 618 554q-14 40-42 75l264 262-44 44ZM377 667q81.25 0 138.125-57.5T572 471q0-81-56.875-138.5T377 275q-82.083 0-139.542 57.5Q180 390 180 471t57.458 138.5Q294.917 667 377 667Z"/></svg>
|
||||
|
After Width: | Height: | Size: 413 B |
@@ -59,6 +59,7 @@
|
||||
Z" />
|
||||
|
||||
<circle
|
||||
class="circle-fill"
|
||||
fill="black"
|
||||
cx="17.5"
|
||||
cy="17.5"
|
||||
|
||||
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
@@ -46,14 +46,6 @@
|
||||
L 20, 20.5"
|
||||
transform-origin="center"
|
||||
transform="translate(0 -15.75)" />
|
||||
<path
|
||||
class="thin"
|
||||
fill="none"
|
||||
d="M 15, 20.5
|
||||
L 17.5, 17.5
|
||||
L 20, 20.5"
|
||||
transform-origin="center"
|
||||
transform="rotate(90) translate(0 -15.75)" />
|
||||
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.0 KiB |
+65
-27
@@ -10,7 +10,9 @@
|
||||
<script type="text/javascript" src="https://unpkg.com/external-svg-loader@latest/svg-loader.min.js" async></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="content">
|
||||
|
||||
<!-- deux svg pour pouvoir utiliser mix blend mode avec les histoires de stacking context -->
|
||||
<svg id="stroke" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" xmlns="http://www.w3.org/2000/svg" viewBox="-8697.766 17429.18 677.183 706.257">
|
||||
<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">
|
||||
@@ -21,37 +23,73 @@
|
||||
<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="buttons_container">
|
||||
<!-- svg dans object pour pouvoir les manipuler avec css -->
|
||||
<div class="mode active">
|
||||
<svg data-src="assets/pictos/terrain-de-vie.svg" data-cache="disabled"></svg>
|
||||
<p>Terrain de vie</p>
|
||||
</div>
|
||||
<div class="mode">
|
||||
<svg data-src="assets/pictos/proximite.svg" data-cache="disabled"></svg>
|
||||
<p>Proximité</p>
|
||||
</div>
|
||||
<div class="mode">
|
||||
<svg data-src="assets/pictos/superposition.svg" data-cache="disabled"></svg>
|
||||
<p>Superposition</p>
|
||||
</div>
|
||||
<div class="mode">
|
||||
<svg data-src="assets/pictos/puissance-d-agir.svg" data-cache="disabled"></svg>
|
||||
<p>Puissance d'agir</p>
|
||||
</div>
|
||||
<div class="mode">
|
||||
<svg data-src="assets/pictos/action.svg" data-cache="disabled"></svg>
|
||||
<p>Action</p>
|
||||
</div>
|
||||
<div class="mode">
|
||||
<svg data-src="assets/pictos/doleance.svg" data-cache="disabled"></svg>
|
||||
<p>Doléancer</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="BG_BG_BG"></div>
|
||||
<div id="BG_BG_BG_tmp"></div>
|
||||
</div>
|
||||
|
||||
<div id="grain-bg"></div>
|
||||
|
||||
<div id="buttons_container">
|
||||
<div class="niveau_profondeur">
|
||||
<p class="selected">L'atlas</p>
|
||||
<p>Les cartes</p>
|
||||
</div>
|
||||
<div class="arrow">
|
||||
<svg data-src="assets/pictos/arrow_back.svg" data-cache="disabled"></svg>
|
||||
</div>
|
||||
<!-- 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>
|
||||
<p>Terrain de vie</p>
|
||||
</div>
|
||||
<div class="mode">
|
||||
<svg data-src="assets/pictos/proximite.svg" data-cache="disabled"></svg>
|
||||
<p>Proximité</p>
|
||||
</div>
|
||||
<div class="mode">
|
||||
<svg data-src="assets/pictos/superposition.svg" data-cache="disabled"></svg>
|
||||
<p>Superposition</p>
|
||||
</div>
|
||||
<div class="mode">
|
||||
<svg data-src="assets/pictos/puissance-d-agir.svg" data-cache="disabled"></svg>
|
||||
<p>Puissance d'agir</p>
|
||||
</div>
|
||||
<div class="mode">
|
||||
<svg data-src="assets/pictos/action-2.svg" data-cache="disabled"></svg>
|
||||
<p>Action</p>
|
||||
</div>
|
||||
<div class="mode">
|
||||
<svg data-src="assets/pictos/doleance.svg" data-cache="disabled"></svg>
|
||||
<p>Doléancer</p>
|
||||
</div>
|
||||
<div class="arrow">
|
||||
<svg data-src="assets/pictos/arrow_forward.svg" data-cache="disabled"></svg>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="global_nav">
|
||||
<h1>Atlas des cartes vivantes</h1>
|
||||
<div id="menu">
|
||||
<div id="search">
|
||||
<input type="search" id="site-search" name="q" value="rechercher">
|
||||
<button><svg data-src="assets/pictos/search.svg" data-cache="disabled"></svg></button>
|
||||
</div>
|
||||
<div class="menu_item" id="about">
|
||||
<svg data-src="assets/pictos/info.svg" data-cache="disabled"></svg>
|
||||
<p>informations</p>
|
||||
</div>
|
||||
<div class="menu_item" id="login">
|
||||
<svg data-src="assets/pictos/login.svg" data-cache="disabled"></svg>
|
||||
<p>connexion</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="grained/grained.js" defer></script>
|
||||
<script src="background.js" defer></script>
|
||||
</body>
|
||||
|
||||
+206
-58
@@ -1,5 +1,4 @@
|
||||
@charset "UTF-8";
|
||||
/* mix blend mode est dépendant du stacking context */
|
||||
@font-face {
|
||||
font-family: "Public";
|
||||
font-style: normal;
|
||||
@@ -12,6 +11,12 @@
|
||||
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;
|
||||
@@ -23,7 +28,10 @@ body {
|
||||
}
|
||||
|
||||
#content {
|
||||
padding: 1.5vh 1vw;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
@@ -32,16 +40,17 @@ body {
|
||||
z-index: 1;
|
||||
}
|
||||
#content svg {
|
||||
width: 30%;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
height: 50%;
|
||||
}
|
||||
#content svg path {
|
||||
cursor: pointer;
|
||||
}
|
||||
#content svg#fill {
|
||||
fill: white;
|
||||
/* mix blend mode est dépendant du stacking context */
|
||||
mix-blend-mode: overlay;
|
||||
opacity: 0.6;
|
||||
opacity: 0.4;
|
||||
}
|
||||
#content svg#stroke {
|
||||
position: absolute;
|
||||
@@ -49,64 +58,12 @@ body {
|
||||
stroke: black;
|
||||
stroke-width: 1px;
|
||||
}
|
||||
#content #buttons_container {
|
||||
position: absolute;
|
||||
bottom: 5vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1;
|
||||
}
|
||||
#content #buttons_container .mode {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: white;
|
||||
margin: 0px 10px;
|
||||
padding: 7px 15px;
|
||||
padding-left: 10px;
|
||||
border-radius: 50px;
|
||||
cursor: pointer;
|
||||
border: solid 0.8px rgba(0, 0, 0, 0.5);
|
||||
transition: border 0.4s ease-in-out;
|
||||
font-weight: 300;
|
||||
font-size: 1rem;
|
||||
}
|
||||
#content #buttons_container .mode svg {
|
||||
width: 28px;
|
||||
height: auto;
|
||||
margin-right: 10px;
|
||||
}
|
||||
#content #buttons_container .mode svg .thick {
|
||||
transition: stroke-width 0.2s ease-in-out;
|
||||
stroke-width: 0.8;
|
||||
stroke: black;
|
||||
}
|
||||
#content #buttons_container .mode svg .thin {
|
||||
transition: stroke-width 0.2s ease-in-out;
|
||||
stroke-width: 0.5;
|
||||
stroke: black;
|
||||
}
|
||||
#content #buttons_container .mode p {
|
||||
height: fit-content;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
#content #buttons_container .mode.active {
|
||||
font-weight: 400;
|
||||
border: solid 1.2px rgb(0, 0, 0);
|
||||
}
|
||||
#content #buttons_container .mode.active svg .thick {
|
||||
stroke-width: 1.2;
|
||||
stroke: black;
|
||||
}
|
||||
#content #buttons_container .mode.active svg .thin {
|
||||
stroke-width: 0.6;
|
||||
stroke: black;
|
||||
}
|
||||
#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;
|
||||
@@ -117,6 +74,8 @@ body {
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
z-index: -2;
|
||||
@@ -134,4 +93,193 @@ body {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#buttons_container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 1.5vh 1vw;
|
||||
height: 4vh;
|
||||
}
|
||||
#buttons_container .niveau_profondeur {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
margin-right: 30px;
|
||||
width: 5vw;
|
||||
}
|
||||
#buttons_container .niveau_profondeur p {
|
||||
font-weight: 300;
|
||||
cursor: pointer;
|
||||
}
|
||||
#buttons_container .niveau_profondeur p.selected {
|
||||
font-weight: 400;
|
||||
text-decoration: underline;
|
||||
}
|
||||
#buttons_container .niveau_profondeur p:hover {
|
||||
font-weight: 400;
|
||||
}
|
||||
#buttons_container .arrow {
|
||||
margin-right: 15px;
|
||||
}
|
||||
#buttons_container .arrow svg {
|
||||
height: 27px;
|
||||
width: auto;
|
||||
fill: white;
|
||||
stroke: black;
|
||||
stroke-width: 0;
|
||||
cursor: pointer;
|
||||
margin-top: 4px;
|
||||
transition: fill 0.2s ease-out;
|
||||
}
|
||||
#buttons_container .arrow svg:hover {
|
||||
fill: rgb(110, 110, 110);
|
||||
}
|
||||
#buttons_container .arrow svg:active {
|
||||
fill: rgb(50, 50, 50);
|
||||
}
|
||||
#buttons_container .arrow:last-of-type {
|
||||
margin-right: 0;
|
||||
margin-left: 12px;
|
||||
}
|
||||
#buttons_container .mode {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: white;
|
||||
margin: 0;
|
||||
margin-right: 14px;
|
||||
padding: 7px 15px;
|
||||
padding-left: 10px;
|
||||
border-radius: 50px;
|
||||
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;
|
||||
font-weight: 300;
|
||||
font-size: 1rem;
|
||||
}
|
||||
#buttons_container .mode svg {
|
||||
width: 28px;
|
||||
height: auto;
|
||||
margin-right: 10px;
|
||||
}
|
||||
#buttons_container .mode svg .thick {
|
||||
transition: stroke-width 0.2s ease-out, fill 0.2s ease-out, stroke 0.2s 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;
|
||||
stroke-width: 0.5;
|
||||
stroke: rgb(110, 110, 110);
|
||||
}
|
||||
#buttons_container .mode svg .circle-fill {
|
||||
fill: rgb(110, 110, 110);
|
||||
}
|
||||
#buttons_container .mode p {
|
||||
height: fit-content;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
#buttons_container .mode.active {
|
||||
font-weight: 400;
|
||||
border: solid 1.2px rgb(0, 0, 0);
|
||||
color: rgb(0, 0, 0);
|
||||
}
|
||||
#buttons_container .mode.active svg .thick {
|
||||
stroke-width: 1.2;
|
||||
stroke: rgb(0, 0, 0);
|
||||
}
|
||||
#buttons_container .mode.active svg .thin {
|
||||
stroke-width: 0.6;
|
||||
stroke: rgb(0, 0, 0);
|
||||
}
|
||||
#buttons_container .mode.active svg .circle-fill {
|
||||
fill: rgb(0, 0, 0);
|
||||
}
|
||||
#buttons_container .mode:hover {
|
||||
color: rgb(50, 50, 50);
|
||||
border-color: rgb(50, 50, 50);
|
||||
}
|
||||
#buttons_container .mode:hover svg .thick, #buttons_container .mode:hover svg .thin {
|
||||
stroke: rgb(50, 50, 50);
|
||||
}
|
||||
#buttons_container .mode:hover svg .circle-fill {
|
||||
fill: rgb(50, 50, 50);
|
||||
}
|
||||
|
||||
#global_nav {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: 1.5vh 1vw;
|
||||
z-index: 1;
|
||||
}
|
||||
#global_nav h1 {
|
||||
font-family: "Ortica";
|
||||
font-size: 1.7em;
|
||||
margin-bottom: 10px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
#global_nav #menu {
|
||||
display: flex;
|
||||
}
|
||||
#global_nav #menu #search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
#global_nav #menu #search 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 rgb(110, 110, 110) 1.2px;
|
||||
color: rgb(110, 110, 110);
|
||||
transition: color 0.2s 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;
|
||||
}
|
||||
#global_nav #menu #search button {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
#global_nav #menu #search button svg {
|
||||
margin-top: 3px;
|
||||
margin-left: -45px;
|
||||
height: 24px;
|
||||
fill: rgb(110, 110, 110);
|
||||
transition: fill 0.2s ease-out;
|
||||
}
|
||||
#global_nav #menu #search button svg:hover {
|
||||
fill: rgb(50, 50, 50);
|
||||
}
|
||||
#global_nav #menu .menu_item {
|
||||
font-weight: 300;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
margin: 0 10px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
#global_nav #menu .menu_item svg {
|
||||
height: 24px;
|
||||
margin-right: -5px;
|
||||
}
|
||||
#global_nav #menu .menu_item:hover {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=styles.css.map */
|
||||
|
||||
+1
-1
@@ -1 +1 @@
|
||||
{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AAAA;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAOJ;EACI;EACA;;;AAGJ;EACI;EACA;;;AAKJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AACA;EACI;;AAIR;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGR;EACI;EACA;;AAGR;EACI;EACA;;AACA;EACI;EACA;;AAEJ;EACI;EACA;;AAKZ;EACI;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;;;AAMR;EACI;EACA;EACA;;;AAGJ;EACI","file":"styles.css"}
|
||||
{"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;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA,QA9LA;;AAgMJ;EACI;EACA;EACA,QAnMA;;AAqMJ;EACE,MAtME;;AAyMR;EACI;EACA;;AAGR;EACI;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACE;;AAGN;EACI,OA9NK;EA+NL,cA/NK;;AAgOL;EACI,QAjOC;;AAmOL;EACI,MApOC;;;AAyOb;EACI;EACA;EACA;EACA,QAlPa;EAmPb;;AACA;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OAtQA;EAuQA;;AAEJ;EACI,OAzQH;;AA2QD;EACI;;AAEJ;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;EACA,MAvRJ;EAwRI;;AAEJ;EACI,MA1RP;;AA8RL;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAGR;EACI","file":"styles.css"}
|
||||
+214
-59
@@ -1,4 +1,9 @@
|
||||
/* mix blend mode est dépendant du stacking context */
|
||||
$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';
|
||||
@@ -14,6 +19,12 @@
|
||||
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');
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -30,8 +41,12 @@ body {
|
||||
|
||||
|
||||
|
||||
|
||||
#content {
|
||||
padding: $global_margins;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
@@ -40,8 +55,8 @@ body {
|
||||
z-index: 1;
|
||||
|
||||
svg {
|
||||
width: 30%;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
height: 50%;
|
||||
path {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -49,8 +64,9 @@ body {
|
||||
|
||||
svg#fill {
|
||||
fill: white;
|
||||
/* mix blend mode est dépendant du stacking context */
|
||||
mix-blend-mode: overlay;
|
||||
opacity: 0.6;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
svg#stroke {
|
||||
@@ -59,66 +75,13 @@ body {
|
||||
stroke: black;
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
#buttons_container {
|
||||
position: absolute;
|
||||
bottom: 5vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1;
|
||||
.mode {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: white;
|
||||
margin: 0px 10px;
|
||||
padding: 7px 15px;
|
||||
padding-left: 10px;
|
||||
border-radius: 50px;
|
||||
cursor: pointer;
|
||||
border: solid 0.8px rgba(0, 0, 0, 0.5);
|
||||
transition: border 0.4s ease-in-out;
|
||||
font-weight: 300;
|
||||
font-size: 1rem;
|
||||
svg {
|
||||
width: 28px;
|
||||
height: auto;
|
||||
margin-right: 10px;
|
||||
.thick {
|
||||
transition: stroke-width 0.2s ease-in-out;
|
||||
stroke-width: 0.8;
|
||||
stroke: black;
|
||||
}
|
||||
.thin {
|
||||
transition: stroke-width 0.2s ease-in-out;
|
||||
stroke-width: 0.5;
|
||||
stroke: black;
|
||||
}
|
||||
}
|
||||
p {
|
||||
height: fit-content;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
}
|
||||
.mode.active {
|
||||
font-weight: 400;
|
||||
border: solid 1.2px rgba(0, 0, 0, 1);
|
||||
svg .thick {
|
||||
stroke-width: 1.2;
|
||||
stroke: black;
|
||||
}
|
||||
svg .thin {
|
||||
stroke-width: 0.6;
|
||||
stroke: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#BG_BG_BG {
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
@@ -131,6 +94,8 @@ body {
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
@@ -150,4 +115,194 @@ body {
|
||||
|
||||
#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: center;
|
||||
background-color: white;
|
||||
margin: 0;
|
||||
margin-right: 14px;
|
||||
padding: 7px 15px;
|
||||
padding-left: 10px;
|
||||
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;
|
||||
font-weight: 300;
|
||||
font-size: 1rem;
|
||||
svg {
|
||||
width: 28px;
|
||||
height: auto;
|
||||
margin-right: 10px;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
p {
|
||||
height: fit-content;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
}
|
||||
.mode.active {
|
||||
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:hover {
|
||||
color: $grey_hover;
|
||||
border-color: $grey_hover;
|
||||
svg .thick, svg .thin {
|
||||
stroke: $grey_hover;
|
||||
}
|
||||
svg .circle-fill {
|
||||
fill: $grey_hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#global_nav {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: $global_margins;
|
||||
z-index: 1;
|
||||
h1 {
|
||||
font-family: 'Ortica';
|
||||
font-size: 1.7em;
|
||||
margin-bottom: 10px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
{"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"}
|
||||
Reference in New Issue
Block a user