burger menu improved

web/themes/custom/leshed/assets/scss/main.scss

@@ -43,7 +43,7 @@ div.layout-container{
   flex-direction: column;
   height: 100vh;
   overflow: hidden;
-  max-width:1080px;
+  max-width:$layout_width;
   margin: 0 auto;
   header[role="banner"]{
     display: block;
@@ -146,39 +146,65 @@ header[role="banner"]{
 
 
     &>div.wrapper{
-      position:absolute;
-      top:$header_height; left:0;
-      // z-index: 99;
-      background-color: rgba(0,0,0,0.75);
-
+      // fixed (et non absolute) pour échapper à l'overflow:hidden de
+      // .layout-container : sinon le débord pleine largeur (et donc le
+      // backdrop-filter) est rogné aux bords du conteneur centré.
+      position:fixed;
+      top:$header_height;
+      left: 0;
       width:100vw;
+      padding: 0 calc((100vw - $layout_width) / 2) 0 calc((100vw - $layout_width) / 2);
+
+      background-color: rgba(255,255,255,0.3);
+      backdrop-filter: blur(7px);
+
       height: 0;
       overflow: hidden;
       transition-duration: 0.5s;
       &[opened]{
         height: calc(100vh - $header_height);
       }
-      &>nav{
+      nav#block-leshed-navigationprincipale{
+        // width: $layout_width;
+        // margin: 0 auto;
         padding-top: 10px;
-        background-color: #fff;
+        // background-color: #fff;
         >ul{
           margin: 0;
+          padding:0;
+          li{
+            list-style: none;
+            a{
+              font-size: 4em;
+              font-weight: 200;
+              filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #fff) drop-shadow(0 0 15px #fff);
+            }
+          }
         }
       }
-
-      nav#block-mathallo-navigationprincipale{
-        padding: 2em 1em;
+      div#block-leshed-selecteurdelangue{
         ul{
-          display: flex;
-          justify-content: flex-end;
-          list-style: none;
+          margin:0;
+          padding:0;
           li{
-            margin-right: 1em;
-            // background-color: $bleu_site;
-            color: #fff;
-            padding:0.5em 1em;
-            &:not(:last-child){
+            list-style: none;
+            padding:0;
+            display: inline-block;
+            font-size: 2em;
+            &:first-child{
+              &:after{
+                content: " /";
+                font-weight: 200;
+              }
             }
+            &:last-child{
+              padding-left: 0.3em;
+
+            }
+            &.is-active{
+              font-weight: 400;
+            }
+
           }
         }
       }

web/themes/custom/leshed/assets/scss/partials/variables.scss

@@ -1,3 +1,4 @@
+$layout_width: 1080px;
 $default_fwght: 200;
 $header_height: 70px;
 $colsgap: 2em;

web/themes/custom/leshed/leshed.theme

@@ -112,3 +112,10 @@ function leshed_preprocess_field(&$variables) {
   }
   $variables['attributes']['class'][] = $variables['field_name'];
 }
+
+function leshed_preprocess_links__language_block(&$variables){
+  foreach ($variables['links'] as $langcode => $link) {
+    $variables['links'][$langcode]['text'] = $langcode;
+    $variables['links'][$langcode]['link']['#title'] = $langcode;
+  }
+}