From 3382f9dc8fad415abc9e775b191853fc187b4482 Mon Sep 17 00:00:00 2001
From: Valentin <valentin@figureslibres.io>
Date: Wed, 24 Jul 2024 00:47:30 +0200
Subject: [PATCH] =?UTF-8?q?avanc=C3=A9es=20styles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../custom/caravane/assets/js/vuejs/Etape.vue |   6 +-
 .../custom/caravane/assets/scss/fonts.scss    | 111 ++++++------
 .../custom/caravane/assets/scss/main.scss     | 171 +++++++++++-------
 .../block--caravane-mainnavigation.html.twig  |  34 ++--
 4 files changed, 178 insertions(+), 144 deletions(-)

diff --git a/web/themes/custom/caravane/assets/js/vuejs/Etape.vue b/web/themes/custom/caravane/assets/js/vuejs/Etape.vue
index 9538734..94eac70 100644
--- a/web/themes/custom/caravane/assets/js/vuejs/Etape.vue
+++ b/web/themes/custom/caravane/assets/js/vuejs/Etape.vue
@@ -1,8 +1,10 @@
 <template>
-  <div>
+  <div v-if="etapeData">
+<!--     
     <div v-if="loading">Loading...</div>
     <div v-if="error">{{ error }}</div>
-    <div v-if="etapeData">
+ -->    
+    <div>
       <pre>{{ etapeData }}</pre>
     </div>
   </div>
diff --git a/web/themes/custom/caravane/assets/scss/fonts.scss b/web/themes/custom/caravane/assets/scss/fonts.scss
index 70a2453..746e6ee 100644
--- a/web/themes/custom/caravane/assets/scss/fonts.scss
+++ b/web/themes/custom/caravane/assets/scss/fonts.scss
@@ -1,57 +1,56 @@
 @font-face {
-    font-family: 'Joost';
-    src: url('../fonts/joost/joost-bold.woff2') format('woff2');
-    font-weight: bold;
-    font-style: normal;
-  }
-  
-  @font-face {
-    font-family: 'Joost';
-    src: url('../fonts/joost/joost-light.woff2') format('woff2');
-    font-weight: 300;
-    font-style: normal;
-  }
-  
-  @font-face {
-    font-family: 'Marianne';
-    src: url('../fonts/marianne/Marianne-Bold_Italic.woff') format('woff'),
-         url('../fonts/marianne/Marianne-Bold_Italic.woff2') format('woff2');
-    font-weight: bold;
-    font-style: italic;
-  }
-  
-  @font-face {
-    font-family: 'Marianne';
-    src: url('../fonts/marianne/Marianne-Bold.woff2') format('woff2');
-    font-weight: bold;
-    font-style: normal;
-  }
-  
-  @font-face {
-    font-family: 'Marianne';
-    src: url('../fonts/marianne/Marianne-Light_Italic.woff2') format('woff2');
-    font-weight: 300;
-    font-style: italic;
-  }
-  
-  @font-face {
-    font-family: 'Marianne';
-    src: url('../fonts/marianne/Marianne-Light.woff2') format('woff2');
-    font-weight: 300;
-    font-style: normal;
-  }
-  
-  @font-face {
-    font-family: 'Marianne';
-    src: url('../fonts/marianne/Marianne-Regular_Italic.woff2') format('woff2');
-    font-weight: normal;
-    font-style: italic;
-  }
-  
-  @font-face {
-    font-family: 'Marianne';
-    src: url('../fonts/marianne/Marianne-Regular.woff2') format('woff2');
-    font-weight: normal;
-    font-style: normal;
-  }
-  
\ No newline at end of file
+  font-family: 'Joost';
+  src: url('/themes/custom/caravane/assets/fonts/joost/joost-bold.woff2') format('woff2');
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Joost';
+  src: url('/themes/custom/caravane/assets/fonts/joost/joost-light.woff2') format('woff2');
+  font-weight: lighter;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Marianne';
+  src: url('/themes/custom/caravane/assets/fonts/marianne/Marianne-Bold_Italic.woff') format('woff'),
+        url('/themes/custom/caravane/assets/fonts/marianne/Marianne-Bold_Italic.woff2') format('woff2');
+  font-weight: bold;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Marianne';
+  src: url('/themes/custom/caravane/assets/fonts/marianne/Marianne-Bold.woff2') format('woff2');
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Marianne';
+  src: url('/themes/custom/caravane/assets/fonts/marianne/Marianne-Light_Italic.woff2') format('woff2');
+  font-weight: lighter;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Marianne';
+  src: url('/themes/custom/caravane/assets/fonts/marianne/Marianne-Light.woff2') format('woff2');
+  font-weight: lighter;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Marianne';
+  src: url('/themes/custom/caravane/assets/fonts/marianne/Marianne-Regular_Italic.woff2') format('woff2');
+  font-weight: normal;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Marianne';
+  src: url('/themes/custom/caravane/assets/fonts/marianne/Marianne-Regular.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+}
\ No newline at end of file
diff --git a/web/themes/custom/caravane/assets/scss/main.scss b/web/themes/custom/caravane/assets/scss/main.scss
index 392b9fc..553a370 100644
--- a/web/themes/custom/caravane/assets/scss/main.scss
+++ b/web/themes/custom/caravane/assets/scss/main.scss
@@ -1,16 +1,17 @@
 @import 'fonts.scss';
 
-$body-margin-x: 10px;
+$body-margin-x: 30px;
 $body-margin-y: 5px;
 
 $sm-font-size: 0.8rem;
+$m-font-size: 1.4rem;
 
 $main-color: #1a1918;
 $main-color-light: #635b58;
 $light-color: #faf1eb;
 
 body{
-  font-family: Marianne, sans-serif;
+  font-family: 'Marianne', sans-serif;
   color: $main-color;
   margin: 0;
   padding: 0;
@@ -50,95 +51,125 @@ body{
       }
       > #block-caravane-mainnavigation {
         display: flex;
-        align-items: center;
-        justify-content: center;
+        justify-content: flex-end;
         grid-column: 16 / span 1;
-        display: flex;
-        flex-direction: column;
-        cursor: pointer;
-        > h2 {
-          margin-block: 0;
-          font-size: $sm-font-size;
-          color: $main-color-light;
-          font-weight: normal;
-          margin-bottom: 5px;
-        }
-        > #hamburger {
+        width: 100%;
+        > div {
+          width: 40%;
           display: flex;
-          flex-direction: column;
-          justify-content: center;
           align-items: center;
-          width: 100%;
-          > div {
-            width: 40%;
-            height: 3px;
-            margin: 4px 0;
-            border-radius: 2px;
-            background-color: $main-color-light;
+          justify-content: center;
+          flex-direction: column;
+          cursor: pointer;
+          > h2 {
+            margin-block: 0;
+            font-size: $sm-font-size;
+            color: $main-color-light;
+            font-weight: normal;
+            margin-bottom: 5px;
+          }
+          > #hamburger {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+            > div {
+              width: 100%;
+              height: 3px;
+              margin: 4px 0;
+              border-radius: 2px;
+              background-color: $main-color-light;
+            }
+          }
+          > ul {
+            display: none;
           }
-        }
-        > ul {
-          display: none;
         }
       }
     }
   }
   main {
     z-index: 1;
-    position: fixed;
+    position: absolute;
     top: 0;
     left: 0;
-    width: 100vw;
+    width: 100%;
     height: 100vh;
     > .layout-content {
       z-index: 1;
-      position: relative;
-      > div > .layout {
-        display: grid;
-        grid-template-columns: repeat(16,1fr);
-        height: 100vh;
-        align-items: center;
-        > .layout__region--first {
-          padding-left: $body-margin-x;
-          grid-column: 1 / span 4;
-          position: relative;
-          z-index: 2;
-          pointer-events: none;
-          width: fit-content;
-          > div {
-            pointer-events: auto;
-          }
-        } 
-        > .layout__region--second {
-          position: absolute;
-          z-index: 1;
-          width: 100vw;
-          height: 100vh;
-        } 
-        > .layout__region--third {
-          padding-right: $body-margin-x;
-          grid-column: 13 / span 4;
-          position: relative;
-          z-index: 2;
-          background: linear-gradient(to right, transparent, #faf1eb);
-          height: 100vh;
-          display: flex;
+      position: fixed;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      > div {
+        height: 100%;
+        > .layout {
+          display: grid;
+          grid-template-columns: repeat(16,1fr);
           align-items: center;
-          justify-content: flex-end;
-          pointer-events: none;
-          > div {
-            pointer-events: auto;
-          }
-        } 
+          height: 100%;
+          > .layout__region--first {
+            padding-left: $body-margin-x;
+            grid-column: 1 / span 4;
+            position: relative;
+            z-index: 2;
+            pointer-events: none;
+            width: fit-content;
+            > div {
+              pointer-events: auto;
+            }
+          } 
+          > .layout__region--second {
+            position: absolute;
+            z-index: 1;
+            top: 0;
+            width: 100vw;
+            .leaflet-container {
+              // add map style here
+            }
+          } 
+          > .layout__region--third {
+            padding-right: $body-margin-x;
+            height: 100%;
+            grid-column: 13 / span 4;
+            position: relative;
+            z-index: 2;
+            background: linear-gradient(to right, transparent, #faf1eb);
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+            pointer-events: none;
+            > div {
+              pointer-events: auto;
+              ul {
+                list-style: none;
+                > li > div {
+                  display: flex;
+                  justify-content: flex-end;
+                  a {
+                    text-decoration: none;
+                    color: $main-color;
+                    font-family: 'Joost', sans-serif;
+                    font-weight: bold;
+                    font-size: $m-font-size;
+                    display: inline-block;
+                    margin: 15px 0;
+                    text-align: right;
+                  }
+                }
+              }
+            }
+          } 
+        }
       }
     }
-    > #etape-modale {
+    > #etape-modale > div {
       z-index: 2;
-      position: absolute;
-      top: 10vh;
+      position: relative;
+      top: 15vh;
       left: 25vw;
       width: 50vw;
-      height: 80vh;
       background-color: rgba(255,255,255,0.5);
     }
   }
diff --git a/web/themes/custom/caravane/templates/block--caravane-mainnavigation.html.twig b/web/themes/custom/caravane/templates/block--caravane-mainnavigation.html.twig
index 28b2e27..b914ff2 100644
--- a/web/themes/custom/caravane/templates/block--caravane-mainnavigation.html.twig
+++ b/web/themes/custom/caravane/templates/block--caravane-mainnavigation.html.twig
@@ -36,21 +36,23 @@
 #}
 {% set heading_id = attributes.id ~ '-menu'|clean_id %}
 <nav role="navigation" aria-labelledby="{{ heading_id }}"{{ attributes|without('role', 'aria-labelledby') }}>
-  {# Label. If not displayed, we still provide it for screen readers. #}
-  {% if not configuration.label_display %}
-    {% set title_attributes = title_attributes.addClass('visually-hidden') %}
-  {% endif %}
-  {{ title_prefix }}
-  <h2{{ title_attributes.setAttribute('id', heading_id) }}>{{ configuration.label }}</h2>
-  <div id="hamburger">
-    <div></div>
-    <div></div>
-    <div></div>
-  </div>
-  {{ title_suffix }}
+  <div>
+    {# Label. If not displayed, we still provide it for screen readers. #}
+    {% if not configuration.label_display %}
+      {% set title_attributes = title_attributes.addClass('visually-hidden') %}
+    {% endif %}
+    {{ title_prefix }}
+    <h2{{ title_attributes.setAttribute('id', heading_id) }}>{{ configuration.label }}</h2>
+    <div id="hamburger">
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+    {{ title_suffix }}
 
-  {# Menu. #}
-  {% block content %}
-    {{ content }}
-  {% endblock %}
+    {# Menu. #}
+    {% block content %}
+      {{ content }}
+    {% endblock %}
+  </div>
 </nav>