project page title scale down on scroll

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

@@ -46,13 +46,16 @@ div.layout-container{
   max-width:1080px;
   margin: 0 auto;
   header[role="banner"]{
+    display: block;
+    position: relative;
     padding: 0.5em 0;
-    flex: 0 1 content;
+    flex: 1 1 $header_height;
     z-index: 100;
     // position: fixed;
     // top:0;
     // width: 100%;
     height: $header_height;
+    min-height: $header_height;
   }
   main[role="main"]{
     flex: 1 1 auto;
@@ -95,7 +98,7 @@ header[role="banner"]{
       text-decoration: none;
       font-size: 2em;
       font-weight: 500;
-
+      margin-right: 0.5em;
       // &:hover{
       //   color: $rose;
       // }
@@ -116,7 +119,7 @@ header[role="banner"]{
       &, &::before, &::after{
         // position: absolute;
         width:20px; height:3px;
-        background-color: red;
+        background-color: #000;
 
       }
       &:hover{
@@ -279,12 +282,17 @@ article.node-type-projet.view-mode-full{
     // column-gap: 2em;
     div.col{
       flex:0 0 calc(50% - $colsgap / 2);
-      // max-width: 48%;
+      max-width: calc(50% - $colsgap / 2);
 
       &.left{
-        >h2{
+        >h2.node-title{
+          position: relative;
           font-size: 12em;
           margin: 0;
+          z-index: 100;
+          width: 205%;//calc(50% - $colsgap / 2);
+          pointer-events: none;
+          transform-origin: 0 0;
         }
 
         .field_artiste_s_invite_s{
@@ -366,6 +374,7 @@ article.node-type-projet.view-mode-full{
               transition: opacity 0.3s ease-in-out;
             }
             &:hover{
+              z-index:200;
               blockquote.image-field-caption{
                 opacity: 1;
               }

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

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