From e9002dee201ed7db56ee1b514d61c7bb3f48e0f3 Mon Sep 17 00:00:00 2001
From: ouidade <ouidade@figureslibres.io>
Date: Wed, 1 Dec 2021 14:52:27 +0100
Subject: [PATCH] bandeau presentation programme home

---
 web/themes/custom/eql/css-compiled/styles.css | 55 ++++++++++-
 web/themes/custom/eql/scss/pages/_home.scss   | 93 ++++++++++++++++---
 2 files changed, 134 insertions(+), 14 deletions(-)

diff --git a/web/themes/custom/eql/css-compiled/styles.css b/web/themes/custom/eql/css-compiled/styles.css
index b4feaab..be6e5e7 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"  "presentation presentation presentation presentation presentation presentation"  "actus actus actus actus actus actus" "actus actus actus actus actus actus" "programme programme programme programme programme programme";
+  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" "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; }
   .path-frontpage .block-region-content .block-views-blockhome-nodes-block-1 {
@@ -341,6 +341,59 @@ a {
         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 {
     grid-area: programme; }
+    .path-frontpage .block-region-content .block-views-blockhome-nodes-block-2 .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; }
+      .path-frontpage .block-region-content .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static {
+        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 6fr; }
+        .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: 4;
+          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 #009ee3;
+          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-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;
+          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;
+            font-size: 1.5rem;
+            width: 110%;
+            margin-bottom: 2rem;
+            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; }
 
 .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 45aa10c..e01a0e9 100644
--- a/web/themes/custom/eql/scss/pages/_home.scss
+++ b/web/themes/custom/eql/scss/pages/_home.scss
@@ -6,6 +6,8 @@
                             "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;
@@ -20,6 +22,7 @@
         .block-block-content1bb9024b-d95f-4137-894c-362abf10a483{
             grid-area: presentation;
         }
+        // bandeau actus
         .block-views-blockactus-blocks-pages-block-1{
             grid-area: actus;
             width: 100vw;
@@ -87,23 +90,14 @@
                 }
             }
         }
+        // bouton voir toutes actus du bandeau bleu
         .block-block-content3ee1f633-aaa7-4b4c-a42a-02206e26d3a2{
             grid-area: actus;
             grid-row: 5;
             grid-column: 5 / span 6;
             width: fit-content;
-            margin-bottom: 2rem;
-
-            // display: grid;
-            // grid-template-columns: 1fr repeat(4, 2fr) 1fr;
-            // position: relative;
-            // height: 0;
-                
+            margin-bottom: 2rem;                
             .field--type-link {
-                // grid-column: 2;
-                // justify-self: end;
-                // position: relative;
-                // top: -200%;
                 width: fit-content;
                 height: fit-content;
                 padding: 0.4rem 1rem;
@@ -124,11 +118,84 @@
             
                 }
             }
-        
-            
         }
         .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;
+
+                    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 6fr;
+                    }
+            
+                    .inline.links{
+                        grid-row: 4;
+                        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;
+            
+                        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{
+                        grid-column: 1 / span 5;
+                        grid-row: 5;
+                    }
+                }
+            
+            }
         }
     }
 }
\ No newline at end of file