ソースを参照

ajouts des éléments de l'ui globale

Valentin 1 年間 前
コミット
9c11794aaf

BIN
assets/fonts/Ortica-Bold.woff2


+ 174 - 0
assets/pictos/action-2.svg

@@ -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>

+ 1 - 0
assets/pictos/arrow_back.svg

@@ -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>

+ 1 - 0
assets/pictos/arrow_forward.svg

@@ -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>

ファイルの差分が大きいため隠しています
+ 0 - 0
assets/pictos/info.svg


+ 1 - 0
assets/pictos/login.svg

@@ -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>

+ 1 - 0
assets/pictos/proximite.svg

@@ -22,6 +22,7 @@
            L 1, 12
            Z" />    
     <circle
+        class="circle-fill"
         fill="black"
         cx="17.5"
         cy="17.5"

+ 1 - 0
assets/pictos/puissance-d-agir.svg

@@ -18,6 +18,7 @@
         cy="17.5"
         r="9.3" />
     <circle
+        class="circle-fill"
         fill="black"
         cx="17.5"
         cy="17.5"

+ 1 - 0
assets/pictos/search.svg

@@ -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>

+ 1 - 0
assets/pictos/superposition.svg

@@ -59,6 +59,7 @@
            Z" />
 
     <circle
+        class="circle-fill"
         fill="black"
         cx="17.5"
         cy="17.5"

+ 0 - 8
assets/pictos/terrain-de-vie.svg

@@ -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>

+ 0 - 0
fichiertest


+ 64 - 26
index.html

@@ -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 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="mode">
-                    <svg data-src="assets/pictos/action.svg" data-cache="disabled"></svg>
-                    <p>Action</p>
+                <div class="menu_item" id="about">
+                    <svg data-src="assets/pictos/info.svg" data-cache="disabled"></svg>
+                    <p>informations</p>
                 </div>
-                <div class="mode">
-                    <svg data-src="assets/pictos/doleance.svg" data-cache="disabled"></svg>
-                    <p>Doléancer</p>
+                <div class="menu_item" id="login">
+                    <svg data-src="assets/pictos/login.svg" data-cache="disabled"></svg>
+                    <p>connexion</p>
                 </div>
+
             </div>
-            <div id="BG_BG_BG"></div>
-            <div id="BG_BG_BG_tmp"></div>
         </div>
-        <div id="grain-bg"></div>
+
+
         <script src="grained/grained.js" defer></script>
         <script src="background.js" defer></script>
     </body>

+ 198 - 50
styles.css

@@ -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,89 +58,228 @@ body {
   stroke: black;
   stroke-width: 1px;
 }
-#content #buttons_container {
+#content #BG_BG_BG {
   position: absolute;
-  bottom: 5vh;
+  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;
+  top: 0;
+  left: 0;
+  z-index: 1;
   display: flex;
-  justify-content: center;
   align-items: center;
-  z-index: 1;
+  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);
 }
-#content #buttons_container .mode {
+#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: 0px 10px;
+  margin: 0;
+  margin-right: 14px;
   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;
+  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;
 }
-#content #buttons_container .mode svg {
+#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;
+#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: black;
+  stroke: rgb(110, 110, 110);
 }
-#content #buttons_container .mode svg .thin {
-  transition: stroke-width 0.2s ease-in-out;
+#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: black;
+  stroke: rgb(110, 110, 110);
 }
-#content #buttons_container .mode p {
+#buttons_container .mode svg .circle-fill {
+  fill: rgb(110, 110, 110);
+}
+#buttons_container .mode p {
   height: fit-content;
   margin-bottom: 3px;
 }
-#content #buttons_container .mode.active {
+#buttons_container .mode.active {
   font-weight: 400;
   border: solid 1.2px rgb(0, 0, 0);
+  color: rgb(0, 0, 0);
 }
-#content #buttons_container .mode.active svg .thick {
+#buttons_container .mode.active svg .thick {
   stroke-width: 1.2;
-  stroke: black;
+  stroke: rgb(0, 0, 0);
 }
-#content #buttons_container .mode.active svg .thin {
+#buttons_container .mode.active svg .thin {
   stroke-width: 0.6;
-  stroke: black;
+  stroke: rgb(0, 0, 0);
 }
-#content #BG_BG_BG {
-  position: absolute;
-  width: 100vw;
-  height: 100vh;
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
-  z-index: -1;
-  opacity: 1;
-  transition: opacity 0.5s ease-in-out;
+#buttons_container .mode.active svg .circle-fill {
+  fill: rgb(0, 0, 0);
 }
-#content #BG_BG_BG_tmp {
-  position: absolute;
-  width: 100vw;
-  height: 100vh;
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
-  z-index: -2;
-  opacity: 0;
-  transition: opacity 0.5s ease-in-out;
+#buttons_container .mode:hover {
+  color: rgb(50, 50, 50);
+  border-color: rgb(50, 50, 50);
 }
-
-#grain-bg {
-  position: absolute !important;
-  width: 100vw;
-  height: 100vh;
+#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);
 }
 
-#grain-bg > * {
-  position: relative;
+#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 */

ファイルの差分が大きいため隠しています
+ 0 - 0
styles.css.map


+ 214 - 59
styles.scss

@@ -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
styles.scss.map


この差分においてかなりの量のファイルが変更されているため、一部のファイルを表示していません