changement design home

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

@@ -79,7 +79,19 @@
   font-weight: 1000;
   font-style: italic; }
 
-/* Manifont Grotesk */
+/* Source Code Pro */
+@font-face {
+  font-family: 'Source Code Pro';
+  src: url("../fonts/source-code-pro/SourceCodePro-Medium.otf.woff2") format("woff2"), url("../fonts/source-code-pro/SourceCodePro-Medium.otf.woff") format("woff");
+  font-weight: 500;
+  font-style: normal; }
+
+@font-face {
+  font-family: 'Source Code Pro';
+  src: url("../fonts/source-code-pro/SourceCodePro-Bold.otf.woff2") format("woff2"), url("../fonts/source-code-pro/SourceCodePro-Bold.otf.woff") format("woff");
+  font-weight: 1000;
+  font-style: normal; }
+
 /* Colors used for EQL */
 .layout-container {
   font-family: "Marianne", sans-serif;
@@ -118,8 +130,12 @@ a {
 /*
 @import "pages/partials/header_footer";
 @import "pages/home";*/
+.layout--threecol-25-50-25 {
+  padding-top: 2rem;
+  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" 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-repeat: no-repeat; }
+
 .layout__region--top {
-  height: 500px;
   padding-bottom: 3rem; }
   .layout__region--top .block-region-top {
     height: inherit; }
@@ -127,13 +143,15 @@ a {
     display: none;
     height: inherit; }
   .layout__region--top .block-entity-fieldnodetitle {
-    width: 50%;
+    width: 80%;
     margin: auto; }
     .layout__region--top .block-entity-fieldnodetitle .field--name-title {
-      font-size: 4rem;
+      font-family: 'Source Code Pro';
+      font-size: 2rem;
       font-weight: 800;
       color: #009ee3;
       background-color: white;
+      text-transform: uppercase;
       padding: 2rem 1rem 2rem 1rem; }
 
 .layout__region--first .block-region-first {
@@ -155,21 +173,26 @@ a {
         text-decoration: underline; }
 
 .layout__region--second .block-entity-fieldnodefield-textes .field--name-field-titre {
-  font-size: 2rem;
+  font-size: 1.5rem;
   font-weight: 800;
-  color: #09398b; }
+  color: #09398b;
+  text-transform: uppercase; }
+
+.layout__region--second .block-entity-fieldnodefield-textes h4 {
+  text-transform: none !important; }
 
 .layout__region--second .block-entity-fieldnodefield-textes .field--type-text-long {
   padding-right: 2rem; }
 
 .layout__region--third .block-entity-fieldnodefield-fichiers {
-  height: fit-content; }
+  height: fit-content;
+  border: 2px solid #009ee3;
+  width: 72%; }
 
 .layout__region--third .field--name-field-fichiers {
   min-height: 4rem;
-  max-width: 75%;
-  background: #009ee3;
-  color: white;
+  background: white;
+  color: #009ee3;
   padding-left: 1rem;
   padding-top: 1rem; }
   .layout__region--third .field--name-field-fichiers span:nth-of-type(2) {
@@ -185,34 +208,35 @@ a {
     .layout__region--third .field--name-field-fichiers .file--mime-application-pdf a {
       display: inline-flex;
       align-items: center;
-      color: white;
+      color: #009ee3;
       font-weight: 800; }
 
-.layout__region--third .block-entity-fieldnodefield-ress h2 {
-  font-size: 1rem;
-  color: #09398b; }
-
-.layout__region--third .block-entity-fieldnodefield-ress .node-type-ressource {
-  display: flex;
-  border: 1px solid #009ee3;
-  padding-left: 1rem;
-  padding-bottom: 3rem;
-  width: 75%;
-  height: fit-content;
-  margin-bottom: 1rem; }
-  .layout__region--third .block-entity-fieldnodefield-ress .node-type-ressource:first-of-type {
-    border-top: 1px solid #009ee3;
-    padding-top: 1rem; }
-  .layout__region--third .block-entity-fieldnodefield-ress .node-type-ressource .field, .layout__region--third .block-entity-fieldnodefield-ress .node-type-ressource a {
-    line-height: 0.6rem;
-    font-size: 1.5rem;
-    color: #09398b;
-    font-weight: 500; }
-  .layout__region--third .block-entity-fieldnodefield-ress .node-type-ressource .field--name-field-images {
-    width: 50%; }
-    .layout__region--third .block-entity-fieldnodefield-ress .node-type-ressource .field--name-field-images img {
-      width: 100%;
-      height: auto; }
+.layout__region--third .block-entity-fieldnodefield-ress {
+  margin-top: 5rem; }
+  .layout__region--third .block-entity-fieldnodefield-ress h2 {
+    font-size: 1rem;
+    color: black; }
+  .layout__region--third .block-entity-fieldnodefield-ress .node-type-ressource {
+    display: flex;
+    border: 2px solid #009ee3;
+    padding-left: 1rem;
+    padding-bottom: 3rem;
+    width: 69%;
+    height: fit-content;
+    margin-bottom: 1rem; }
+    .layout__region--third .block-entity-fieldnodefield-ress .node-type-ressource:first-of-type {
+      border-top: 1px solid #009ee3;
+      padding-top: 1rem; }
+    .layout__region--third .block-entity-fieldnodefield-ress .node-type-ressource .field, .layout__region--third .block-entity-fieldnodefield-ress .node-type-ressource a {
+      line-height: 0.6rem;
+      font-size: 1.5rem;
+      color: #09398b;
+      font-weight: 500; }
+    .layout__region--third .block-entity-fieldnodefield-ress .node-type-ressource .field--name-field-images {
+      width: 50%; }
+      .layout__region--third .block-entity-fieldnodefield-ress .node-type-ressource .field--name-field-images img {
+        width: 100%;
+        height: auto; }
 
 .field--type-entity-reference-revisions .paragraph-summary {
   font-family: "Marianne", sans-serif;
@@ -230,12 +254,36 @@ a {
 .block-views-blockhome-nodes-block-1 .node-type-static div:first-child {
   display: grid;
   grid-template-columns: 1fr repeat(4, 2fr) 1fr; }
+  .block-views-blockhome-nodes-block-1 .node-type-static div:first-child .field--name-field-images {
+    grid-column: 1 /span 10; }
+    .block-views-blockhome-nodes-block-1 .node-type-static div:first-child .field--name-field-images img {
+      height: auto; }
 
-.block-views-blockhome-nodes-block-1 h2 {
-  grid-column: 1; }
-  .block-views-blockhome-nodes-block-1 h2 a {
-    color: #009ee3;
-    font-weight: 800; }
+.block-views-blockhome-nodes-block-1 .field--name-title {
+  grid-column: 2; }
+  .block-views-blockhome-nodes-block-1 .field--name-title h2 {
+    grid-column: 2; }
+    .block-views-blockhome-nodes-block-1 .field--name-title h2 a {
+      color: #009ee3;
+      font-weight: 900; }
+
+.block-views-blockhome-nodes-block-1 .links.inline {
+  grid-column: 2;
+  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 #009ee3;
+  list-style: none; }
+  .block-views-blockhome-nodes-block-1 .links.inline a {
+    text-transform: uppercase;
+    font-weight: 700;
+    color: #009ee3; }
+    .block-views-blockhome-nodes-block-1 .links.inline 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)"  stroke="rgb(0,158,227)" stroke-width="0.7"/></svg>'); }
 
 .block-views-blockactus-blocks-pages-block-1 {
   border-bottom: 5px solid #009ee3;
@@ -261,7 +309,7 @@ a {
         .block-views-blockactus-blocks-pages-block-1 .view-content .node-type-actualite div:first-child :nth-child(5) {
           order: 3; }
       .block-views-blockactus-blocks-pages-block-1 .view-content .node-type-actualite .field--name-field-images .field__item img {
-        width: 50%;
+        width: 70%;
         height: fit-content; }
       .block-views-blockactus-blocks-pages-block-1 .view-content .node-type-actualite .field--name-field-images::after {
         display: block;
@@ -301,9 +349,8 @@ a {
 
 .view-display-id-block_2:is(.view-id-home_nodes) {
   padding-top: 2rem;
-  background-image: url("../images/pictos/carre-contour-bleu.svg");
-  background-repeat: no-repeat;
-  background-position: -20px; }
+  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" 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-repeat: no-repeat; }
   .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static {
     width: 70%;
     margin: auto; }
@@ -341,6 +388,17 @@ a {
         padding-bottom: 2rem;
         margin-block-start: 0; }
 
+.block-entity-fieldnodetitle {
+  width: 80%;
+  margin: auto; }
+  .block-entity-fieldnodetitle .field--name-title {
+    font-size: 2rem;
+    font-weight: 800;
+    color: white;
+    background-color: #009ee3;
+    text-transform: uppercase;
+    padding: 2rem 1rem 2rem 1rem; }
+
 .field--name-field-partenaires {
   padding-top: 3rem; }
   .field--name-field-partenaires .paragraph--type--partenaire {
@@ -516,8 +574,8 @@ header {
       margin-top: 0;
       color: #09398b; }
     #fotter-bottom .region img {
-      height: 5rem;
-      width: auto; }
+      max-width: 5rem;
+      max-height: 5rem; }
   #fotter-bottom .region-footer-bottom-left {
     width: 35%;
     border: none; }

web/themes/custom/eql/scss/global/_fonts.scss

@@ -105,5 +105,20 @@
 }
 
 
-/* Manifont Grotesk */
+/* Source Code Pro */
 
+@font-face {
+    font-family: 'Source Code Pro';
+    src: url('../fonts/source-code-pro/SourceCodePro-Medium.otf.woff2') format('woff2'),
+         url('../fonts/source-code-pro/SourceCodePro-Medium.otf.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Source Code Pro';
+    src: url('../fonts/source-code-pro/SourceCodePro-Bold.otf.woff2') format('woff2'),
+         url('../fonts/source-code-pro/SourceCodePro-Bold.otf.woff') format('woff');
+    font-weight: 1000;
+    font-style: normal;
+}

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

@@ -27,18 +27,50 @@
         div:first-child{
             display: grid;
             grid-template-columns: 1fr repeat(4, 2fr) 1fr;
+            .field--name-field-images{
+                grid-column: 1 /span 10;
+                img{
+                    height: auto;
+                }
+            }
+
         }
     }
 
-    h2{ 
-        grid-column: 1;
+    .field--name-title{
+        grid-column: 2;
+        h2{ 
+            grid-column: 2;
+            a{
+                color: $blue-light;
+                font-weight: 900;
+        
+            }
+        }
+    
+    }
+    .links.inline{
+        grid-column: 2;
+        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;
-            font-weight: 800;
-    
+            &: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)"  stroke="rgb(0,158,227)" stroke-width="0.7"/></svg>');
+            }
         }
     }
-
 }
 
 
@@ -68,7 +100,7 @@
             }
             .field--name-field-images {
                 .field__item img{  
-                    width: 50%; 
+                    width: 70%; 
                     height: fit-content;  
                 }
                 &::after{ 
@@ -128,21 +160,19 @@
 
 .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" width="100%" version="1.1"><rect x="0" y="0" width="100" height="100" transform="rotate(35) translate(400, -800) scale(15)" fill="none" stroke="rgb(0,158,227)" stroke-width="0.4px"/></svg>');
-    background-image: url("../images/pictos/carre-contour-bleu.svg");
+    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" 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-image: url("../images/pictos/carre-contour-bleu.svg");
     background-repeat: no-repeat;
-    background-position: -20px;
+    // background-position: -20px;
     
 
     
-    // background-position-y: +300px;
     .node-type-static{
         width: 70%;
         margin: auto;
         div:first-child:not(.field__item):not(.field){
         display: flex;
         flex-direction: row;
-
     }
 
         .inline.links{

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

@@ -1,5 +1,22 @@
 
-
+// .block-entity-fieldnodetitle {
+//     // .field--type-string{
+//     //     color: $white;
+//     //     background-color: $blue-light;
+//     // }
+// }
+.block-entity-fieldnodetitle{
+    width: 80%;
+    margin: auto;
+    .field--name-title{
+        font-size: 2rem;
+        font-weight: 800;
+        color: $white;
+        background-color: $blue-light;
+        text-transform: uppercase;
+        padding: 2rem 1rem 2rem 1rem;
+    }
+}
 
 .field--name-field-partenaires{
     padding-top: 3rem;

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

@@ -1,7 +1,13 @@
 
-
+.layout--threecol-25-50-25{
+    padding-top: 2rem;
+    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" 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-image: url("../images/pictos/carre-contour-bleu.svg");
+    background-repeat: no-repeat;
+    // background-position: -20px;
+}
 .layout__region--top{               //bandeau titre page static
-    height: 500px;
+    // height: 500px;
     padding-bottom: 3rem;
     .block-region-top{
         height: inherit;
@@ -12,13 +18,15 @@
 
     }
     .block-entity-fieldnodetitle{
-        width: 50%;
+        width: 80%;
         margin: auto;
         .field--name-title{
-            font-size: 4rem;
+            font-family: 'Source Code Pro';
+            font-size: 2rem;
             font-weight: 800;
             color: $blue-light;
             background-color: $white;
+            text-transform: uppercase;
             padding: 2rem 1rem 2rem 1rem;
         }
     }
@@ -56,9 +64,13 @@
     
     .block-entity-fieldnodefield-textes{
         .field--name-field-titre{
-            font-size: 2rem;
+            font-size: 1.5rem;
             font-weight: 800;
             color: $blue-dark;
+            text-transform: uppercase;
+        }
+        h4{
+            text-transform: none !important;
         }
         .field--type-text-long{
             padding-right: 2rem;
@@ -70,12 +82,14 @@
 .layout__region--third{                     // colone de droite fichiers et ressources liées
     .block-entity-fieldnodefield-fichiers{
         height: fit-content;
+        border: 2px solid $blue-light;
+        width: 72%;
     }         
     .field--name-field-fichiers{
         min-height: 4rem;
-        max-width: 75%;
-        background: #009ee3;
-        color: white;
+        // max-width: 75%;
+        background: $white;
+        color: $blue-light;
         padding-left: 1rem;
         padding-top: 1rem;
 
@@ -95,25 +109,26 @@
             a{
                 display: inline-flex;
                 align-items: center;
-                color: $white;
+                color: $blue-light;
                 font-weight: 800;
             }
         }
     }
 
     .block-entity-fieldnodefield-ress{
+        margin-top: 5rem;        
 
         h2{
             font-size: 1rem;
-            color: $blue-dark;
+            color: $black;
         }
 
         .node-type-ressource{
             display: flex;
-            border: 1px solid $blue-light;
+            border: 2px solid $blue-light;
             padding-left: 1rem;
             padding-bottom: 3rem;
-            width: 75%;
+            width: 69%;
             height: fit-content;
             margin-bottom: 1rem;
             &:first-of-type{

web/themes/custom/eql/scss/partials/_footer.scss

@@ -19,8 +19,8 @@
         }
         img{
             
-            height: 5rem;
-            width: auto;
+            max-width: 5rem;
+            max-height: 5rem;
         }
 
     }

web/themes/custom/eql/scss/styles.scss

@@ -22,6 +22,7 @@
 @import "pages/_partenaires";
 @import "pages/_actualites";
 @import "pages/_gouvernance";
+@import "pages/_ami";
 
 
 /*partials*/