From eec8fd6063cd704fcc39f59e610d1e77f7256ee0 Mon Sep 17 00:00:00 2001
From: ouidade <ouidade@figureslibres.io>
Date: Thu, 2 Dec 2021 14:09:46 +0100
Subject: [PATCH] grille 3e bandeau home

---
 web/themes/custom/eql/css-compiled/styles.css |  45 ++---
 web/themes/custom/eql/scss/pages/_home.scss   | 169 +++++++++---------
 2 files changed, 104 insertions(+), 110 deletions(-)

diff --git a/web/themes/custom/eql/css-compiled/styles.css b/web/themes/custom/eql/css-compiled/styles.css
index 296a357..4ddf369 100644
--- a/web/themes/custom/eql/css-compiled/styles.css
+++ b/web/themes/custom/eql/css-compiled/styles.css
@@ -253,7 +253,7 @@ a {
 
 .path-frontpage .block-region-content {
   display: grid;
-  grid-template-areas: "presentation presentation presentation presentation presentation presentation" "presentation presentation presentation presentation presentation presentation" "actus actus actus actus actus actus" "actus actus actus actus actus actus" "programme programme programme programme programme programme" "programme programme programme programme programme programme" "programme programme programme programme programme programme";
+  grid-template-areas: "presentation presentation presentation presentation presentation presentation"  "presentation presentation presentation presentation presentation presentation"  "actus actus actus actus actus actus" "actus actus actus actus actus actus" "programme programme programme programme programme programme" "programme programme programme programme programme programme" "programme programme programme programme programme programme";
   grid-template-rows: auto auto auto;
   grid-template-columns: 1fr repeat(4, 2fr) 1fr;
   min-height: 100vh; }
@@ -277,7 +277,9 @@ a {
         line-height: 6rem;
         margin-bottom: 5rem; }
         .path-frontpage .block-region-content .block-views-blockhome-nodes-block-1 .node-type-static div:first-child .field--name-field-accroche p {
-          margin: 0; }
+          display: table;
+          margin: 0px auto 0px auto;
+          background-color: white; }
       .path-frontpage .block-region-content .block-views-blockhome-nodes-block-1 .node-type-static div:first-child .field--name-title {
         grid-column: 4;
         grid-row: 1;
@@ -285,7 +287,10 @@ a {
         .path-frontpage .block-region-content .block-views-blockhome-nodes-block-1 .node-type-static div:first-child .field--name-title h2 a {
           color: #e1000f;
           font-weight: 900;
-          text-transform: uppercase; }
+          text-transform: uppercase;
+          display: table;
+          margin: 0px auto 0px auto;
+          background-color: white; }
       .path-frontpage .block-region-content .block-views-blockhome-nodes-block-1 .node-type-static div:first-child .links.inline {
         grid-column: 2;
         grid-row: 4;
@@ -455,12 +460,14 @@ a {
         width: 70%;
         margin: auto; }
         .path-frontpage .block-region-content .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static div:first-child:not(.field__item):not(.field) {
-          display: grid;
-          grid-template-columns: 1fr repeat(4, 2fr) 1fr;
-          grid-template-rows: 1fr 1fr 1fr 0.5fr 1fr 1fr; }
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap; }
+          .path-frontpage .block-region-content .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static div:first-child:not(.field__item):not(.field) :nth-child(4) {
+            order: 3; }
         .path-frontpage .block-region-content .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .inline.links {
-          grid-row: 3;
-          grid-column: 5 / span 6;
+          z-index: 95;
+          align-self: flex-end;
           width: fit-content;
           height: fit-content;
           padding: 0.4rem 1rem;
@@ -468,26 +475,20 @@ a {
           margin: 0;
           background-color: white;
           border: 2px solid #009ee3;
-          list-style: none;
-          align-self: end; }
+          list-style: none; }
           .path-frontpage .block-region-content .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .inline.links a {
             text-transform: uppercase;
             font-weight: 700;
             color: #009ee3; }
             .path-frontpage .block-region-content .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .inline.links a:after {
               content: url('data:image/svg+xml,<svg width="40" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1"><polyline points="71.9,49 24.3,49 24.3,51 71.9,51 58.1,64.8 59.5,66.2 75.7,50 59.5,33.8 58.1,35.2" transform="scale(0.5) translate(0,-25)" fill="rgb(0,158,227)" stroke="rgb(0,158,227)" stroke-width="0.7"/></svg>'); }
-        .path-frontpage .block-region-content .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .field--name-field-images {
-          grid-column: 1;
-          grid-row: 1;
-          width: fit-content; }
-          .path-frontpage .block-region-content .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .field--name-field-images .field__item img {
-            width: 15rem;
-            height: auto; }
+        .path-frontpage .block-region-content .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .field--name-field-images .field__item img {
+          width: 15rem;
+          height: auto; }
         .path-frontpage .block-region-content .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .field--name-title {
           display: none; }
         .path-frontpage .block-region-content .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .field--name-field-accroche {
-          grid-column: 2 / 6;
-          grid-row: 1 /span 3;
+          flex: 1 1 50px;
           padding-left: 1rem; }
           .path-frontpage .block-region-content .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .field--name-field-accroche p {
             background-color: white;
@@ -497,9 +498,9 @@ a {
             padding-bottom: 2rem;
             margin-block-start: 0; }
         .path-frontpage .block-region-content .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .field--name-field-videos {
-          grid-column: 1 / span 5;
-          grid-row: 5 / span 6;
-          height: fit-content; }
+          flex: 0 0 80%;
+          padding-top: 4rem;
+          margin: auto; }
 
 .node-id-20 {
   background: url("../images/pictos/carre-contour-bleu_partenaire.svg");
diff --git a/web/themes/custom/eql/scss/pages/_home.scss b/web/themes/custom/eql/scss/pages/_home.scss
index b897d33..65da14d 100644
--- a/web/themes/custom/eql/scss/pages/_home.scss
+++ b/web/themes/custom/eql/scss/pages/_home.scss
@@ -3,7 +3,6 @@
         display: grid;
         grid-template-areas: "presentation presentation presentation presentation presentation presentation" 
                             "presentation presentation presentation presentation presentation presentation" 
-                            // "presentation presentation presentation presentation presentation presentation" 
                              "actus actus actus actus actus actus"
                              "actus actus actus actus actus actus"
                              "programme programme programme programme programme programme"
@@ -22,22 +21,11 @@
             .node-type-static{
                 div:first-child{
                     display: grid;
-                    // flex-direction: column;
                     grid-template-columns: 1fr repeat(4, 2fr) 1fr;
                     grid-template-rows: repeat(4, auto);
                     .field--name-field-images{
                         display: none;
-                        //     z-index: -99;
-                    //     filter: grayscale(100%);
-                    //     filter: brightness(0%);
-                    //     opacity: 0.5;
-                    //     // display: none;
-                    //     grid-column: 1 /span 10;
-                    //     grid-row: 1 / span 4;
-                    //     img{
-                    //         width: 100vw;
-                    //         height: auto;
-                    //     }
+
                     }
                     .field--name-field-accroche{
                         grid-column: 2 /span 3;
@@ -48,7 +36,9 @@
                         line-height: 6rem;
                         margin-bottom: 5rem;
                         p{
-                            margin: 0;
+                            display: table;
+                            margin: 0px auto 0px auto;
+                            background-color: $white;
                         }
                     }
                     .field--name-title{
@@ -61,6 +51,9 @@
                                 color: #e1000f;
                                 font-weight: 900;
                                 text-transform: uppercase;
+                                display: table;
+                                margin: 0px auto 0px auto;
+                                background-color: $white;
                             }
                         }
                     }
@@ -275,84 +268,84 @@
         // présentation programme
         .block-views-blockhome-nodes-block-2{
             grid-area: programme;
-            .view-display-id-block_2:is(.view-id-home_nodes){
-                padding-top: 2rem;
-                background: url('../images/pictos/carre-contour-bleu.svg');
-                background-repeat: no-repeat;
-                max-width: 100vw;
-                background-size: cover;
-            
-                
-                .node-type-static{
-                    width: 70%;
-                    margin: auto;
+ 
+.view-display-id-block_2:is(.view-id-home_nodes){
+    padding-top: 2rem;
+    // background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"  version="1.1"><rect x="0" y="0" width="80" height="80" transform="rotate(35) translate(430, -800) scale(15)" fill="none" stroke="rgb(0,158,227)" stroke-width="0.4px"/></svg>');
+    background: url('../images/pictos/carre-contour-bleu.svg');
+    // background-position-y: 50%;
+    background-repeat: no-repeat;
+    max-width: 100vw;
+    background-size: cover;
 
-                    div:first-child:not(.field__item):not(.field){
-                        display: grid;
-                        grid-template-columns: 1fr repeat(4, 2fr) 1fr;
-                        grid-template-rows: 1fr 1fr 1fr 0.5fr 1fr 1fr;
-                    }
-            
-                    .inline.links{
-                        grid-row: 3;
-                        grid-column: 5 / span 6;
-                        width: fit-content;
-                        height: fit-content;
-                        padding: 0.4rem 1rem;
-                        font-size: 0.8rem;
-                        margin: 0;
-                        background-color: $white;
-                        border: 2px solid $blue-light;  
-                        list-style: none;
-                        align-self: end;
-            
-                        a{
-                            text-transform: uppercase;
-                            font-weight: 700;
-                            color: $blue-light;
-                            &:after{
-                                // display: block;
-                                content: url('data:image/svg+xml,<svg width="40" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1"><polyline points="71.9,49 24.3,49 24.3,51 71.9,51 58.1,64.8 59.5,66.2 75.7,50 59.5,33.8 58.1,35.2" transform="scale(0.5) translate(0,-25)" fill="rgb(0,158,227)" stroke="rgb(0,158,227)" stroke-width="0.7"/></svg>');
-                            }
-                        }
-                    }
-                    .field--name-field-images{
-                        grid-column: 1;
-                        grid-row: 1;
-                        width: fit-content;
-                        .field__item{
-                            img{
-                                width: 15rem;
-                                height: auto;
-                            }
-                        }
-                    }
-                    .field--name-title{
-                        display: none;
-                    }
-                    .field--name-field-accroche{
-                        grid-column: 2 / 6;
-                        grid-row: 1 /span 3;
-                        padding-left: 1rem;
-                        p{
-                            background-color: $white;
-                            font-size: 1.5rem;
-                            width: 110%;
-                            margin-bottom: 2rem;
-                            padding-bottom: 2rem;
-                            margin-block-start: 0;
-                        }
-            
-                    }
-                    .field--name-field-videos{
+    
+    .node-type-static{
+        width: 70%;
+        margin: auto;
+        div:first-child:not(.field__item):not(.field){
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        :nth-child(4) { order: 3; } 
+    }
 
-                        grid-column: 1 / span 5;
-                        grid-row: 5 / span 6;
-                        height: fit-content;
-                    }
+        .inline.links{
+            z-index: 95;
+            align-self: flex-end;
+            width: fit-content;
+            height: fit-content;
+            padding: 0.4rem 1rem;
+            font-size: 0.8rem;
+            margin: 0;
+            background-color: $white;
+            border: 2px solid $blue-light;  
+            list-style: none;
+
+
+            a{
+                text-transform: uppercase;
+                font-weight: 700;
+                color: $blue-light;
+                &:after{
+                    // display: block;
+                    content: url('data:image/svg+xml,<svg width="40" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1"><polyline points="71.9,49 24.3,49 24.3,51 71.9,51 58.1,64.8 59.5,66.2 75.7,50 59.5,33.8 58.1,35.2" transform="scale(0.5) translate(0,-25)" fill="rgb(0,158,227)" stroke="rgb(0,158,227)" stroke-width="0.7"/></svg>');
                 }
-            
             }
         }
+        .field--name-field-images{
+            // grid-column: 2 / 4;
+            .field__item{
+                img{
+                    width: 15rem;
+                    height: auto;
+                }
+            }
+        }
+        .field--name-title{
+            display: none;
+        }
+        .field--name-field-accroche{
+            flex: 1 1 50px;
+            // grid-column: 4 / 9;
+            padding-left: 1rem;
+            p{
+                background-color: $white;
+                font-size: 1.5rem;
+                width: 110%;
+                margin-bottom: 2rem;
+                padding-bottom: 2rem;
+                margin-block-start: 0;
+            }
+
+        }
+        .field--name-field-videos{
+            flex: 0 0 80%;
+            padding-top: 4rem;
+            margin: auto;
+        }
+    }
+
+}
+        }
     }
 }
\ No newline at end of file