retouche design

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

@@ -189,7 +189,7 @@ a {
       padding-bottom: 0rem; } }
   .path-node.page-node-type-static .layout-container .layout-content .layout__region--top .block-entity-fieldnodetitle {
     width: fit-content;
-    margin-left: 13%;
+    margin-left: 11%;
     margin-top: 15vh; }
     @media (max-width: 810px) {
       .path-node.page-node-type-static .layout-container .layout-content .layout__region--top .block-entity-fieldnodetitle {
@@ -375,7 +375,7 @@ a {
   min-height: 100vh; }
   .path-frontpage .block-region-content .block-views-blockhome-nodes-block-1 {
     grid-area: presentation;
-    background: url("../images/pictos/forme_home_2.svg");
+    background: url("../images/carre_site.mp4");
     background-size: 75%;
     background-position-y: bottom;
     background-position-x: left;
@@ -1883,25 +1883,38 @@ a {
       margin-top: 4rem;
       background-color: #009ee3;
       height: fit-content;
-      width: 80%;
-      margin-left: 2rem; }
+      width: 60%;
+      margin-left: 2rem;
+      aspect-ratio: 1/1;
+      display: flex; }
+      @media (max-width: 1260px) {
+        .offresdeservices .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-block-content7dc5bc6b-f5ca-4815-b689-49382aafa2dc {
+          width: 70%; } }
+      @media (max-width: 1073px) {
+        .offresdeservices .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-block-content7dc5bc6b-f5ca-4815-b689-49382aafa2dc {
+          width: 80%; } }
+      @media (max-width: 935px) {
+        .offresdeservices .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-block-content7dc5bc6b-f5ca-4815-b689-49382aafa2dc {
+          width: 90%; } }
+      @media (max-width: 810px) {
+        .offresdeservices .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-block-content7dc5bc6b-f5ca-4815-b689-49382aafa2dc {
+          width: 100%; } }
       .offresdeservices .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-block-content7dc5bc6b-f5ca-4815-b689-49382aafa2dc .field--name-field-lien {
         display: flex;
         flex-direction: column;
-        margin-top: 2rem;
-        margin-bottom: 2rem;
-        margin-left: 1.5rem;
-        margin-right: 1.5rem;
-        text-align: center; }
+        text-align: center;
+        margin: auto;
+        padding: 1rem; }
         .offresdeservices .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-block-content7dc5bc6b-f5ca-4815-b689-49382aafa2dc .field--name-field-lien a {
+          display: block;
           font-weight: 800;
           color: white;
           font-size: 1.3rem; }
-        .offresdeservices .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-block-content7dc5bc6b-f5ca-4815-b689-49382aafa2dc .field--name-field-lien:after {
-          margin-left: auto;
-          padding-top: 1rem;
-          display: block;
-          content: url("../images/pictos/noun_Arrow_3771902.svg"); }
+          .offresdeservices .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-block-content7dc5bc6b-f5ca-4815-b689-49382aafa2dc .field--name-field-lien a:after {
+            margin-left: 80%;
+            padding-top: 0.5rem;
+            display: block;
+            content: url("../images/pictos/noun_Arrow_3771902.svg"); }
     .offresdeservices .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockoffres-de--block-1 {
       grid-column: 2 / span 3; }
       @media (max-width: 810px) {
@@ -2081,7 +2094,7 @@ a {
       grid-row: 3;
       text-transform: uppercase;
       font-weight: 800;
-      font-size: 0.8rem;
+      font-size: 1.2rem;
       margin-top: 0.5rem; }
       .page-node-type-offre-de-service .layout__region--top .block-region-top .block-entity-fieldnodefield-structure::after {
         content: url('data:image/svg+xml,<svg width="160" height="30" xmlns="http://www.w3.org/2000/svg" version="1.1"> <line x1="0" x2="80" y1="20" y2="20" stroke-linecap="cube" stroke="rgb(0,158,227)" stroke-width="3"/></svg>'); }
@@ -2092,7 +2105,7 @@ a {
       grid-row: 4;
       font-size: 2.5rem;
       font-family: "Source Code Pro";
-      padding-right: 15%; }
+      width: 70%; }
       @media (max-width: 810px) {
         .page-node-type-offre-de-service .layout__region--top .block-region-top .block-entity-fieldnodetitle {
           font-size: 1.2rem; } }
@@ -2105,7 +2118,8 @@ a {
       grid-row: 5;
       text-transform: uppercase;
       font-weight: 800;
-      font-size: 00.8rem; }
+      font-size: 0.8rem;
+      margin-top: 1.5rem; }
     .page-node-type-offre-de-service .layout__region--top .block-region-top .block-entity-fieldnodefield-date-de-proposition {
       background: white;
       width: fit-content;
@@ -2870,7 +2884,9 @@ a {
         height: auto; }
     #header-top .region-header-top-left #block-headermenu {
       align-self: baseline;
-      width: 70%; }
+      width: 70%;
+      margin-left: 3rem;
+      margin-right: 3rem; }
     #header-top .region-header-top-left ul {
       font-size: 1rem;
       list-style: none;

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

@@ -20,7 +20,8 @@
         .block-views-blockhome-nodes-block-1{
             grid-area: presentation;
             // grid-row: 1;
-            background: url("../images/pictos/forme_home_2.svg");
+            // background: url("../images/pictos/forme_home_2.svg");
+             background: url("../images/carre_site.mp4");
             background-size: 75%;
             background-position-y: bottom;
             background-position-x: left;

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

@@ -87,7 +87,7 @@
                     grid-row: 3;
                     text-transform: uppercase;
                     font-weight: 800;
-                    font-size: 0.8rem;
+                    font-size: 1.2rem;
                     margin-top: 0.5rem;
                     &::after{
                         content:url('data:image/svg+xml,<svg width="160" height="30" xmlns="http://www.w3.org/2000/svg" version="1.1"> <line x1="0" x2="80" y1="20" y2="20" stroke-linecap="cube" stroke="rgb(0,158,227)" stroke-width="3"/></svg>');
@@ -100,7 +100,8 @@
                     grid-row: 4;
                     font-size: 2.5rem;
                     font-family: "Source Code Pro";
-                    padding-right: 15%;
+                    // padding-right: 15%;
+                    width: 70%;
                     @media (max-width: 810px){
                         font-size: 1.2rem;
                     }
@@ -115,7 +116,8 @@
                     grid-row: 5;
                     text-transform: uppercase;
                     font-weight: 800;
-                    font-size: 00.8rem;
+                    font-size: 0.8rem;
+                    margin-top: 1.5rem;
                 }
                 .block-entity-fieldnodefield-date-de-proposition{
                     background: $white;

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

@@ -54,29 +54,46 @@
                             margin-top: 4rem;
                             background-color: $blue-light;
                             height: fit-content;
-                            width: 80%;
+                            width: 60%;
+                            // width: 80%;
                             margin-left: 2rem;
-
+                            aspect-ratio: 1/1;
+                            display: flex;
+                            @media (max-width: 1260px) {
+                                width: 70%;
+                            }
+                            @media (max-width: 1073px) {
+                                width: 80%;
+                            }
+                            @media (max-width: 935px) {
+                                width: 90%;
+                            }
+                            @media (max-width: 810px) {
+                                width: 100%;
+                            }
                             .field--name-field-lien{
                                 display: flex;
                                 flex-direction: column;
-                                margin-top: 2rem;
-                                margin-bottom: 2rem;
-                                margin-left: 1.5rem;
-                                margin-right: 1.5rem;
+                                // margin-top: 2rem;
+                                // margin-bottom: 2rem;
+                                // margin-left: 1.5rem;
+                                // margin-right: 1.5rem;
                                 text-align: center;
+                                margin: auto;
+                                padding: 1rem;
                                 a{
+                                    display: block;
                                     font-weight: 800;
                                     color: $white;
                                     font-size: 1.3rem;
+                                    &:after{
+                                        margin-left:80%;
+                                        padding-top: 0.5rem;
+                                        display: block;
+                                        content:url("../images/pictos/noun_Arrow_3771902.svg")
+                                    }
                                 } 
-                                &:after{
-                                    margin-left: auto;
-                                    padding-top: 1rem;
-                                    display: block;
-                                    content:url("../images/pictos/noun_Arrow_3771902.svg")
-                                    
-                                }
+                                
     
                             }
 

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

@@ -20,7 +20,7 @@
                     }
                     .block-entity-fieldnodetitle{
                         width: fit-content;
-                        margin-left: 13%;
+                        margin-left: 11%;
                         margin-top: 15vh;
                         @media (max-width: 810px){
                             margin-left: 8%;

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

@@ -32,8 +32,8 @@
     scroll-margin: 8rem {};
    
 
-
-    .region-header-top-left {      // logo + menu déroulant
+ // logo + menu déroulant
+    .region-header-top-left {     
         display:flex;
         flex-direction: row;
         padding: 1rem;
@@ -67,6 +67,8 @@
         #block-headermenu{
             align-self: baseline;
             width: 70%;
+            margin-left: 3rem;
+            margin-right: 3rem;
         }
 
         ul{
@@ -190,7 +192,8 @@
         
     }
 
-    #block-burger {              // menu burger à droite
+// menu burger à droite
+    #block-burger {              
         z-index: 1;
         background-color: $blue-light;
         font-size: 0.7rem;

web/themes/custom/eql/templates/block.html.twig

@@ -35,10 +35,16 @@
 <div{{ attributes.addClass(classes) }}>
   {{ title_prefix }}
   {% if label %}
+      <video autoplay muted loop id="myVideo">
+  <source src="rain.mp4" type="video/mp4">
+</video>
     <span><h2{{ title_attributes }}>{{ label }}</h2></span>
   {% endif %}
   {{ title_suffix }}
+
+
   {% block content %}
+
     {{ content }}
   {% endblock %}
 </div>