css bandeau zoom projets sur home

web/themes/custom/eql/css-compiled/styles.css

@@ -471,9 +471,10 @@ a {
   visibility: hidden; }
 
 .path-frontpage .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) {
-  padding-top: 2rem; }
+  padding-top: 2rem;
+  padding-bottom: 4rem; }
   .path-frontpage .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static {
-    width: 70%;
+    width: 80%;
     margin: auto; }
     @media (max-width: 479px) {
       .path-frontpage .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static {
@@ -537,7 +538,84 @@ a {
 
 .path-frontpage .block-views-blockprojets-block-4 {
   border-top: 5px solid #009ee3;
-  background: rgba(0, 158, 227, 0.2); }
+  background: rgba(0, 158, 227, 0.2);
+  padding-top: 2rem;
+  padding-bottom: 4rem; }
+  .path-frontpage .block-views-blockprojets-block-4 span h2 {
+    width: 80%;
+    margin: auto;
+    padding-top: 1rem;
+    padding-bottom: 5rem;
+    text-transform: uppercase;
+    color: #e1000f;
+    font-family: 'Source Code Pro';
+    font-weight: 1000; }
+  .path-frontpage .block-views-blockprojets-block-4 .view-projets {
+    width: 80%;
+    margin: auto; }
+    .path-frontpage .block-views-blockprojets-block-4 .view-projets .view-content {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between; }
+      .path-frontpage .block-views-blockprojets-block-4 .view-projets .view-content .views-row {
+        width: 49%; }
+        .path-frontpage .block-views-blockprojets-block-4 .view-projets .view-content .views-row .node-type-projet {
+          color: #09398b;
+          line-height: 1.5rem; }
+          @media (max-width: 479px) {
+            .path-frontpage .block-views-blockprojets-block-4 .view-projets .view-content .views-row .node-type-projet {
+              padding-left: 0rem;
+              padding-right: 0rem;
+              padding-top: 2rem; } }
+          .path-frontpage .block-views-blockprojets-block-4 .view-projets .view-content .views-row .node-type-projet div:first-child {
+            display: flex;
+            flex-direction: column; }
+            .path-frontpage .block-views-blockprojets-block-4 .view-projets .view-content .views-row .node-type-projet div:first-child a {
+              color: #09398b; }
+            .path-frontpage .block-views-blockprojets-block-4 .view-projets .view-content .views-row .node-type-projet div:first-child .field--name-field-photo {
+              order: 1; }
+              .path-frontpage .block-views-blockprojets-block-4 .view-projets .view-content .views-row .node-type-projet div:first-child .field--name-field-photo img {
+                width: 100%;
+                object-fit: cover;
+                height: fit-content; }
+            .path-frontpage .block-views-blockprojets-block-4 .view-projets .view-content .views-row .node-type-projet div:first-child .field--name-field-adresse {
+              order: 2;
+              display: flex;
+              text-transform: uppercase;
+              font-size: 0.9rem;
+              font-weight: 800;
+              margin-top: 0.8rem;
+              line-height: 0.6rem; }
+              .path-frontpage .block-views-blockprojets-block-4 .view-projets .view-content .views-row .node-type-projet div:first-child .field--name-field-adresse .address {
+                display: flex;
+                flex-direction: row;
+                margin: 0; }
+                .path-frontpage .block-views-blockprojets-block-4 .view-projets .view-content .views-row .node-type-projet div:first-child .field--name-field-adresse .address .locality {
+                  padding-top: 0 !important;
+                  padding-bottom: 0 !important; }
+                  .path-frontpage .block-views-blockprojets-block-4 .view-projets .view-content .views-row .node-type-projet div:first-child .field--name-field-adresse .address .locality::after {
+                    content: ",";
+                    margin-right: 0.3rem; }
+                .path-frontpage .block-views-blockprojets-block-4 .view-projets .view-content .views-row .node-type-projet div:first-child .field--name-field-adresse .address .country {
+                  padding-top: 0 !important;
+                  padding-bottom: 0 !important; }
+            .path-frontpage .block-views-blockprojets-block-4 .view-projets .view-content .views-row .node-type-projet div:first-child .field--name-field-sous-titre {
+              margin-top: 0.5rem;
+              font-size: 0.9rem;
+              font-weight: 800;
+              order: 4; }
+            .path-frontpage .block-views-blockprojets-block-4 .view-projets .view-content .views-row .node-type-projet div:first-child .field--name-title {
+              order: 3;
+              margin-top: 0.5rem;
+              font-size: 0.9rem;
+              font-weight: 800; }
+              .path-frontpage .block-views-blockprojets-block-4 .view-projets .view-content .views-row .node-type-projet div:first-child .field--name-title h2 {
+                margin: 0; }
+            .path-frontpage .block-views-blockprojets-block-4 .view-projets .view-content .views-row .node-type-projet div:first-child .field--name-field-incube {
+              order: 4;
+              color: #e1000f;
+              margin-top: 0.8rem;
+              font-size: 0.7rem; }
 
 .node-id-20 {
   background: url("../images/pictos/carre-contour-bleu_partenaire.svg");

web/themes/custom/eql/scss/global/variables/_colors.scss

@@ -7,4 +7,5 @@ $blue-dark: rgb(9,57,139);
 $grey-background: rgb(153,147,174);
 $black: rgb(0,0,0);
 $white: rgb(255,255,255);
-$background-actus: rgba(0,158,227, 0.2);
+$background-actus: rgba(0,158,227, 0.2);
+$red: rgb(225,0,15);

web/themes/custom/eql/scss/pages/_home.scss

@@ -100,6 +100,7 @@
                 }
             }
         }
+    
         // bouton voir toutes actus du bandeau bleu
         .block-block-content3ee1f633-aaa7-4b4c-a42a-02206e26d3a2{
             visibility: hidden;
@@ -151,6 +152,7 @@
  
             .view-display-id-block_2:is(.view-id-home_nodes){
                 padding-top: 2rem;
+                padding-bottom: 4rem;
                 // // 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%;
@@ -160,7 +162,7 @@
 
                 
                 .node-type-static{
-                    width: 70%;
+                    width: 80%;
                     margin: auto;
                     @media (max-width: 479px) {
                         width: 80%;
@@ -256,7 +258,115 @@
         .block-views-blockprojets-block-4{
             border-top: 5px solid $blue-light;
             background: $background-actus;
+            padding-top: 2rem;
+            padding-bottom: 4rem;
+            span h2{
+                width: 80%;
+                margin: auto;
+                padding-top: 1rem;
+                padding-bottom: 5rem;
+                text-transform: uppercase;
+                color: $red;
+                font-family: 'Source Code Pro';
+                font-weight: 1000;
+            }
+            .view-projets{
+                width: 80%;
+                margin: auto;
+                .view-content{
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: space-between;
+                    .views-row{
+                        width: 49%;
+                        
+                        .node-type-projet{
+                            color: $blue-dark;
+                            line-height: 1.5rem;
+                            // padding: 0.5rem;
+                            // padding-right: 1rem;
+                            // padding-left: 1rem;
+                            @media (max-width: 479px){
+                                padding-left: 0rem;
+                                padding-right: 0rem;
+                                padding-top: 2rem;
+                            }
+                            div:first-child{                
+                                display: flex;
+                                flex-direction: column;
+                           
+                                a{
+                                    color: $blue-dark;
+                                } 
+                                .field--name-field-photo {
+                                    order:1;
+                                    img{  
+                                        width: 100%; 
+                                        object-fit: cover;
+                                        height: fit-content;
+                                    }
+                                    // &::after{ 
+                                    //     display: block;
+                                    //     content:url('data:image/svg+xml,<svg width="160" height="25" xmlns="http://www.w3.org/2000/svg" version="1.1"> <line x1="0" x2="80" y1="20" y2="20" stroke-linecap="cube" stroke="rgb(9,57,139)" stroke-width="2.5"/></svg>');
+                                    // }
+                                }
+                                .field--name-field-adresse{
+                                    order:2;
+                                    display: flex;
+                                    text-transform: uppercase;
+                                    font-size: 0.9rem;
+                                    font-weight: 800;
+                                    margin-top: 0.8rem;
+                                    line-height: 0.6rem;
+                                    .address{
+                                        display: flex;
+                                        flex-direction: row;
+                                        margin: 0;
+                                        .locality{
+                                            padding-top: 0 !important;
+                                            padding-bottom: 0 !important;
+                                            &::after{
+                                                content:",";
+                                                margin-right: 0.3rem;
+                                            }
+                                        }  
+                                        .country{
+                                            padding-top: 0 !important;
+                                            padding-bottom: 0 !important;
+                                        }                                      }
+                                }
+                                .field--name-field-sous-titre{
+                                    margin-top: 0.5rem;
+                                    font-size: 0.9rem;
+                                    font-weight: 800;
+                                    order: 4;
+                                }
+                                .field--name-title{
+                                    order: 3;
+                                    margin-top: 0.5rem;
+                                    font-size: 0.9rem;
+                                    font-weight: 800;
+                                    h2{margin: 0;}
+                                }
+    
+                                .field--name-field-incube{
+                                    order:4;
+                                    color: $red;
+                                    margin-top: 0.8rem;
+                                    font-size: 0.7rem;
+                                }
+                            }
+                        }
+                        // .node-type-projet{
+                        //     .field--type-image img{
+                        //         object-fit: cover;
+                        //         width: 100%;
 
-        }
+                        //     }
+                        // } 
+                    }
+                }
 
+            }
+        }
 }