css block phase 1 home

web/themes/custom/reha/css/reha.css

@@ -3,12 +3,12 @@
 /*global*/
 /* Colors used for REHA */
 .field--type-link {
-  width: 45%;
   text-transform: uppercase;
   padding: 1rem;
   border: solid black 1px;
   margin-bottom: 1rem;
-  background-color: white; }
+  background-color: white;
+  width: fit-content; }
 
 .bouton {
   background-color: white !important;
@@ -16,7 +16,6 @@
   cursor: pointer; }
 
 .field--type-file {
-  width: 45%;
   text-transform: uppercase;
   padding: 1rem;
   border: solid black 1px;
@@ -319,18 +318,50 @@ input {
     font-weight: 900;
     margin: 0;
     line-height: 0.6; }
-  .home-page-layout-content .layout--onecol .block-region-content .block-block-content1ca95211-9fa2-4ef2-a460-8184d1eaf20f {
+  .home-page-layout-content .layout--onecol .block-region-content {
     display: flex;
-    justify-content: flex-end;
+    flex-wrap: wrap; }
-    margin-top: 5rem; }
+    .home-page-layout-content .layout--onecol .block-region-content .block-block-content5ae07b35-3c0b-48f5-b51b-f0f0e4c1765f {
-    .home-page-layout-content .layout--onecol .block-region-content .block-block-content1ca95211-9fa2-4ef2-a460-8184d1eaf20f :hover {
+      width: 35%;
-      background-color: #fdc300; }
+      border: solid #fdc300 1px;
-  .home-page-layout-content .layout--onecol .block-region-content .block-block-content1dd151e8-8a8b-4586-9e62-8905ba0c93e0 {
+      background-color: white;
-    display: flex;
+      font-weight: 800;
-    justify-content: flex-end;
+      padding: 1rem; }
-    margin-bottom: 4rem; }
+      .home-page-layout-content .layout--onecol .block-region-content .block-block-content5ae07b35-3c0b-48f5-b51b-f0f0e4c1765f h2 {
-    .home-page-layout-content .layout--onecol .block-region-content .block-block-content1dd151e8-8a8b-4586-9e62-8905ba0c93e0 :hover {
+        margin-top: 0;
-      background-color: #fdc300; }
+        margin-bottom: 0;
+        text-transform: lowercase;
+        font-weight: 900;
+        line-height: 1rem;
+        font-size: 1.8rem; }
+      .home-page-layout-content .layout--onecol .block-region-content .block-block-content5ae07b35-3c0b-48f5-b51b-f0f0e4c1765f .field--name-field-description {
+        margin-top: 0;
+        font-size: 2rem;
+        line-height: 2.2rem; }
+        .home-page-layout-content .layout--onecol .block-region-content .block-block-content5ae07b35-3c0b-48f5-b51b-f0f0e4c1765f .field--name-field-description p {
+          margin-top: 0.8rem; }
+      .home-page-layout-content .layout--onecol .block-region-content .block-block-content5ae07b35-3c0b-48f5-b51b-f0f0e4c1765f .field--type-link {
+        padding: 0;
+        margin: 0;
+        border: none;
+        font-weight: 400; }
+        .home-page-layout-content .layout--onecol .block-region-content .block-block-content5ae07b35-3c0b-48f5-b51b-f0f0e4c1765f .field--type-link .field__item ::after {
+          justify-self: unset;
+          padding-left: 1rem;
+          content: url(../images/noun-arrow-1569918.svg); }
+    .home-page-layout-content .layout--onecol .block-region-content .block-block-content08189a6a-2ca1-42c3-a780-d7ad0c65619d {
+      width: 45%;
+      height: fit-content;
+      display: flex;
+      justify-content: flex-end; }
+      .home-page-layout-content .layout--onecol .block-region-content .block-block-content08189a6a-2ca1-42c3-a780-d7ad0c65619d :hover {
+        background-color: #fdc300; }
+    .home-page-layout-content .layout--onecol .block-region-content .block-block-content259faa3e-f66e-4776-9f4e-9a3aa26e8252 {
+      width: 45%;
+      display: flex;
+      justify-content: flex-end; }
+      .home-page-layout-content .layout--onecol .block-region-content .block-block-content259faa3e-f66e-4776-9f4e-9a3aa26e8252 :hover {
+        background-color: #fdc300; }
 
 .user--register h1 {
   font-size: 3rem !important;

web/themes/custom/reha/images/noun-arrow-1569918.svg

@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 60.166816 38.10535"
+   id="svg10"
+   sodipodi:docname="noun-arrow-1569918.svg"
+   inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
+   width="45"
+   height="24.10535"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs14" />
+  <sodipodi:namedview
+     id="namedview12"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="9.741103"
+     inkscape:cx="15.552654"
+     inkscape:cy="15.809298"
+     inkscape:window-width="1920"
+     inkscape:window-height="1016"
+     inkscape:window-x="0"
+     inkscape:window-y="276"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg10">
+    <inkscape:page
+       x="0"
+       y="0"
+       width="60.166817"
+       height="38.10535"
+       id="page1"
+       margin="0 6.0311446 0 0"
+       bleed="0" />
+  </sodipodi:namedview>
+  <g
+     transform="translate(-19.52231,-983.19166)"
+     id="g4">
+    <path
+       style="color:#fdc300;text-indent:0;text-transform:none;direction:ltr;baseline-shift:baseline;enable-background:accumulate"
+       d="m 79.9999,1002.3622 c 0,-0.4628 -0.2799,-1.0773 -0.56389,-1.3755 l -15.9997,-17.00032 c -0.747,-0.7723 -1.9572,-0.8618 -2.8281,-0.078 -0.7786,0.7007 -0.798,2.0673 -0.078,2.8282 l 12.8435,13.62522 H 22.0001 c -1.1046,0 -2,0.8954 -2,2 0,1.1046 0.8954,2.0001 2,2.0001 h 51.37361 l -12.8435,13.6252 c -0.7199,0.7608 -0.6688,2.0938 0.078,2.8281 0.7885,0.7752 2.0925,0.7062 2.8281,-0.078 l 15.9997,-17.0002 c 0.4701,-0.4611 0.556,-0.9052 0.56389,-1.3748 z"
+       fill="#fdc300"
+       fill-opacity="1"
+       stroke="none"
+       marker="none"
+       visibility="visible"
+       display="inline"
+       overflow="visible"
+       id="path2" />
+  </g>
+</svg>

web/themes/custom/reha/scss/global/variables/_buttons.scss

@@ -1,16 +1,16 @@
 
 // home 
 .field--type-link{
-    width: 45%;
     text-transform: uppercase;
     padding: 1rem;
     border: solid black 1px;
     margin-bottom: 1rem;
-    background-color: white;
+    background-color: $white-button;
+    width: fit-content;
 
 }
 .bouton{
-    background-color: white !important;
+    background-color: $white-button !important;
     border: none !important;
     cursor: pointer;
 }
@@ -18,10 +18,9 @@
 
 
 .field--type-file{
-    width: 45%;
     text-transform: uppercase;
     padding: 1rem;
     border: solid black 1px;
     margin-bottom: 1rem;
-    background-color: white;
+    background-color: $white-button;
 }

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

@@ -4,7 +4,8 @@
 
 
 $background-home: rgba(153, 147, 174, 0.1);
-$white: white;
+$white-button: rgb(255, 255, 255);
+$white-header:rgb(255, 255, 255);
 $yellow-puca: #fdc300;
 
 

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

@@ -20,19 +20,61 @@
 
         }
         .block-region-content{
+            display: flex;
+            flex-wrap: wrap;
+            .block-block-content5ae07b35-3c0b-48f5-b51b-f0f0e4c1765f{
+                width: 35%;
+                border: solid $yellow-puca 1px;
+                background-color: $white-button;
+                font-weight: 800;
+                padding: 1rem;
+                h2{
+                    margin-top: 0;
+                    margin-bottom: 0;
+                    text-transform: lowercase;
+                    font-weight: 900;
+                    line-height: 1rem;
+                    font-size:1.8rem ;
 
-            .block-block-content1ca95211-9fa2-4ef2-a460-8184d1eaf20f{
+                }
+                .field--name-field-description{
+                    margin-top: 0;
+                    font-size: 2rem;
+                    line-height: 2.2rem;
+                    // inline-size: 1rem;
+                    p{
+                        margin-top: 0.8rem;
+                    }
+                }
+                .field--type-link{
+                    padding: 0;
+                    margin: 0;
+                    border: none;
+                    font-weight: 400;
+                    .field__item {
+
+                        ::after{
+                            justify-self: unset;
+                            padding-left: 1rem;
+                            content: url(../images/noun-arrow-1569918.svg);
+                        }
+                    }
+                }
+            }
+    
+            .block-block-content08189a6a-2ca1-42c3-a780-d7ad0c65619d{
+                width: 45%;
+                height: fit-content;
                 display: flex;
                 justify-content: flex-end;  
-                margin-top: 5rem;
                 :hover{
                     background-color: $yellow-puca;
                 }
             }
-            .block-block-content1dd151e8-8a8b-4586-9e62-8905ba0c93e0{
+            .block-block-content259faa3e-f66e-4776-9f4e-9a3aa26e8252{
+                width: 45%;
                 display: flex;
                 justify-content: flex-end;     
-                margin-bottom: 4rem;   
                 :hover{
                     background-color: $yellow-puca;
                 }

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

@@ -1,5 +1,5 @@
 footer{
-    background-color: $white;
+    background-color: $white-header;
     padding-top: 3rem;
     font-family: "Marianne";
     font-weight: 800;

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

@@ -3,7 +3,7 @@
 header{                       
     display: block;
     height: $header-height;
-    background-color: white;
+    background-color: $white-header;
     // position: fixed;
     z-index: 99;
     width: 100vw;
@@ -62,7 +62,7 @@ header{
                     right:-235px;
                     top: 36px;  // Positionnez-les sous les boutons
                     position: absolute;
-                    background-color: $white;
+                    background-color: $white-header;
                     width: 30vw;
                     height: 100vh;
                     box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
@@ -90,7 +90,7 @@ header{
                 width: 100%;
                 .field--type-text-long {
                     display: none;
-                    background-color: $white;
+                    background-color: $white-header;
                     position: absolute;
                     right:0px;
                     top: 100%;

web/themes/custom/reha/scss/reha.scss

@@ -5,7 +5,7 @@
 
 /*global*/
 
-@import "global/variables/colors";
+@import "global/variables/colors.scss";
 @import "global/variables/typography";
 @import "global/variables/buttons";
 @import "global/core";