From e6d1cab22476b53541b07f4138bfb68310c5c8ca Mon Sep 17 00:00:00 2001
From: ouidade <ouidade@figureslibres.io>
Date: Thu, 30 Nov 2023 10:41:05 +0100
Subject: [PATCH] mobile header & home

---
 web/themes/custom/reha/css/reha.css           | 195 ++++++++++++------
 .../custom/reha/scss/global/_layout.scss      |   4 +
 web/themes/custom/reha/scss/pages/_home.scss  |  38 +++-
 .../custom/reha/scss/partials/_header.scss    |  42 +++-
 4 files changed, 202 insertions(+), 77 deletions(-)

diff --git a/web/themes/custom/reha/css/reha.css b/web/themes/custom/reha/css/reha.css
index c123e9a..c294bc5 100644
--- a/web/themes/custom/reha/css/reha.css
+++ b/web/themes/custom/reha/css/reha.css
@@ -146,6 +146,9 @@
   padding-bottom: 6rem;
   width: 70%;
   margin: auto; }
+  @media (max-width: 891px) {
+    .layout-content {
+      width: 90%; } }
 
 aside {
   width: 20%;
@@ -200,10 +203,19 @@ header {
   position: sticky;
   top: 0;
   box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; }
+  @media (max-width: 800px) {
+    header {
+      height: 100px;
+      width: 800px; } }
   header .region-header {
     display: inline-grid;
     align-items: center;
     grid-template-columns: repeat(10, 1fr); }
+    @media (max-width: 891px) {
+      header .region-header {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between; } }
     header .region-header #block-reha-logoministere {
       grid-column: 1;
       width: 200px;
@@ -259,6 +271,9 @@ header {
           box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
           clip-path: inset(0px -10px -10px -10px);
           padding: 5% 10% 5% 5%; }
+          @media (max-width: 891px) {
+            header .region-header #block-reha-connexionutilisateur .connexion .connexion-full {
+              top: 15px; } }
           header .region-header #block-reha-connexionutilisateur .connexion .connexion-full .titre {
             width: 100%;
             position: relative; }
@@ -334,79 +349,97 @@ header {
           height: 200vh;
           box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
           clip-path: inset(0px -10px -10px -10px); }
+          @media (max-width: 891px) {
+            header .region-header #block-reha-config-pages .contacts .contacts-full {
+              right: 0px;
+              top: 100%;
+              width: 100vw;
+              padding-left: 0;
+              padding-top: 1rem;
+              height: fit-content; } }
           header .region-header #block-reha-config-pages .contacts .contacts-full .titre {
             padding-left: 3rem; }
             header .region-header #block-reha-config-pages .contacts .contacts-full .titre ::after {
               left: 320px; }
-          header .region-header #block-reha-config-pages .contacts .contacts-full .field__item {
+              @media (max-width: 891px) {
+                header .region-header #block-reha-config-pages .contacts .contacts-full .titre ::after {
+                  left: 242px; } }
+        header .region-header #block-reha-config-pages .contacts .field__item {
+          display: flex;
+          flex-direction: column;
+          padding-left: 3rem; }
+  header #block-reha-views-block-current-user-block-block-1 {
+    grid-column: 9;
+    display: flex;
+    flex-direction: column;
+    height: fit-content; }
+    header #block-reha-views-block-current-user-block-block-1 .bouton-connected {
+      padding-right: 3rem; }
+      header #block-reha-views-block-current-user-block-block-1 .bouton-connected :before {
+        content: url(../images/noun-contact-2495375.svg);
+        padding-right: 1rem; }
+    header #block-reha-views-block-current-user-block-block-1 .connected {
+      height: 0;
+      /* Hauteur initiale à 0 pour créer l'effet de glissement vers le bas */
+      width: 100%;
+      position: relative; }
+      header #block-reha-views-block-current-user-block-block-1 .connected .connected-full {
+        display: none;
+        right: -267px;
+        top: 36px;
+        position: absolute;
+        background-color: white;
+        width: 550px;
+        height: 200vh;
+        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+        clip-path: inset(0px -10px -10px -10px);
+        padding: 5% 10% 5% 45%; }
+        header #block-reha-views-block-current-user-block-block-1 .connected .connected-full footer {
+          font-weight: 400;
+          font-size: 1rem;
+          margin-top: 2rem;
+          border-top: 1px solid black;
+          padding-top: 1.5rem; }
+          header #block-reha-views-block-current-user-block-block-1 .connected .connected-full footer ul {
+            width: 45%;
             display: flex;
-            flex-direction: column;
-            padding-left: 3rem; }
-    header .region-header #block-reha-views-block-current-user-block-block-1 {
-      grid-column: 9;
-      display: flex;
-      flex-direction: column;
-      height: fit-content; }
-      header .region-header #block-reha-views-block-current-user-block-block-1 .bouton-connected {
-        padding-right: 3rem; }
-        header .region-header #block-reha-views-block-current-user-block-block-1 .bouton-connected :before {
-          content: url(../images/noun-contact-2495375.svg);
-          padding-right: 1rem; }
-      header .region-header #block-reha-views-block-current-user-block-block-1 .connected {
-        height: 0;
-        /* Hauteur initiale à 0 pour créer l'effet de glissement vers le bas */
-        width: 100%;
-        position: relative; }
-        header .region-header #block-reha-views-block-current-user-block-block-1 .connected .connected-full {
-          display: none;
-          right: -267px;
-          top: 36px;
-          position: absolute;
-          background-color: white;
-          width: 550px;
-          height: 200vh;
-          box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
-          clip-path: inset(0px -10px -10px -10px);
-          padding: 5% 10% 5% 45%; }
-          header .region-header #block-reha-views-block-current-user-block-block-1 .connected .connected-full footer {
-            font-weight: 400;
-            font-size: 1rem;
-            margin-top: 2rem;
-            border-top: 1px solid black;
-            padding-top: 1.5rem; }
-            header .region-header #block-reha-views-block-current-user-block-block-1 .connected .connected-full footer ul {
-              width: 45%;
-              display: flex;
-              flex-direction: column-reverse;
-              padding-left: 0; }
-              header .region-header #block-reha-views-block-current-user-block-block-1 .connected .connected-full footer ul li:first-of-type {
-                margin-top: 4rem;
-                border-bottom: 1px solid black; }
-              header .region-header #block-reha-views-block-current-user-block-block-1 .connected .connected-full footer ul li {
-                text-transform: uppercase;
-                padding: 1rem;
-                border: solid black 1px;
-                margin-bottom: 1rem;
-                background-color: white; }
-              header .region-header #block-reha-views-block-current-user-block-block-1 .connected .connected-full footer ul li:hover {
-                background-color: #fdc300; }
-  header .bouton {
-    align-self: flex-end;
-    width: fit-content; }
-    header .bouton h2 {
-      text-transform: lowercase;
-      display: inline-flex; }
-  header .titre {
-    display: inline-flex;
-    font-weight: 800;
-    font-size: 1.8rem;
-    position: relative; }
-    header .titre ::after {
-      content: url(../images/noun-cross-1151731.svg);
-      float: right;
-      position: relative;
-      left: 90px;
-      cursor: pointer; }
+            flex-direction: column-reverse;
+            padding-left: 0; }
+            header #block-reha-views-block-current-user-block-block-1 .connected .connected-full footer ul li:first-of-type {
+              margin-top: 4rem;
+              border-bottom: 1px solid black; }
+            header #block-reha-views-block-current-user-block-block-1 .connected .connected-full footer ul li {
+              text-transform: uppercase;
+              padding: 1rem;
+              border: solid black 1px;
+              margin-bottom: 1rem;
+              background-color: white; }
+            header #block-reha-views-block-current-user-block-block-1 .connected .connected-full footer ul li:hover {
+              background-color: #fdc300; }
+
+.bouton {
+  align-self: flex-end;
+  width: fit-content; }
+  @media (max-width: 891px) {
+    .bouton {
+      font-size: 0.1rem;
+      color: white;
+      padding-right: 0 !important; } }
+  .bouton h2 {
+    text-transform: lowercase;
+    display: inline-flex; }
+
+.titre {
+  display: inline-flex;
+  font-weight: 800;
+  font-size: 1.8rem;
+  position: relative; }
+  .titre ::after {
+    content: url(../images/noun-cross-1151731.svg);
+    float: right;
+    position: relative;
+    left: 90px;
+    cursor: pointer; }
 
 footer {
   background-color: white;
@@ -528,14 +561,25 @@ input {
     font-size: 5rem;
     font-weight: normal;
     margin: 0; }
+    @media (max-width: 891px) {
+      .home-page-layout-content .layout--onecol h4 {
+        font-size: 4rem; } }
   .home-page-layout-content .layout--onecol h5 {
     font-size: 5rem;
     font-weight: 900;
     margin: 0;
     line-height: 0.6; }
+    @media (max-width: 891px) {
+      .home-page-layout-content .layout--onecol h5 {
+        font-size: 4rem;
+        line-height: 0.9; } }
   .home-page-layout-content .layout--onecol .block-region-content {
     display: grid;
     grid-column: repeat(2, 1fr); }
+    @media (max-width: 891px) {
+      .home-page-layout-content .layout--onecol .block-region-content {
+        display: flex;
+        flex-direction: column; } }
     .home-page-layout-content .layout--onecol .block-region-content .block-views-blockhome-block-1 {
       grid-column: 1 /span 2;
       grid-row: 1;
@@ -549,6 +593,9 @@ input {
       font-weight: 800;
       padding: 2rem;
       margin-right: 1rem; }
+      @media (max-width: 891px) {
+        .home-page-layout-content .layout--onecol .block-region-content .block-block-content5ae07b35-3c0b-48f5-b51b-f0f0e4c1765f {
+          margin-bottom: 1rem; } }
       .home-page-layout-content .layout--onecol .block-region-content .block-block-content5ae07b35-3c0b-48f5-b51b-f0f0e4c1765f h2 {
         margin-top: 0;
         margin-bottom: 0;
@@ -586,9 +633,15 @@ input {
       display: flex;
       justify-content: flex-end;
       align-items: center; }
+      @media (max-width: 891px) {
+        .home-page-layout-content .layout--onecol .block-region-content .block-block-content08189a6a-2ca1-42c3-a780-d7ad0c65619d {
+          width: 100%; } }
       .home-page-layout-content .layout--onecol .block-region-content .block-block-content08189a6a-2ca1-42c3-a780-d7ad0c65619d .field--type-file {
         width: 80%;
         margin: 0; }
+        @media (max-width: 891px) {
+          .home-page-layout-content .layout--onecol .block-region-content .block-block-content08189a6a-2ca1-42c3-a780-d7ad0c65619d .field--type-file {
+            width: 100%; } }
       .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 {
@@ -598,9 +651,15 @@ input {
       display: flex;
       justify-content: flex-end;
       align-items: center; }
+      @media (max-width: 891px) {
+        .home-page-layout-content .layout--onecol .block-region-content .block-block-content259faa3e-f66e-4776-9f4e-9a3aa26e8252 {
+          width: 100%; } }
       .home-page-layout-content .layout--onecol .block-region-content .block-block-content259faa3e-f66e-4776-9f4e-9a3aa26e8252 .field--type-file {
         width: 80%;
         margin: 0; }
+        @media (max-width: 891px) {
+          .home-page-layout-content .layout--onecol .block-region-content .block-block-content259faa3e-f66e-4776-9f4e-9a3aa26e8252 .field--type-file {
+            width: 100%; } }
       .home-page-layout-content .layout--onecol .block-region-content .block-block-content259faa3e-f66e-4776-9f4e-9a3aa26e8252 :hover {
         background-color: #fdc300; }
     .home-page-layout-content .layout--onecol .block-region-content .block-views-blockhome-block-2 {
diff --git a/web/themes/custom/reha/scss/global/_layout.scss b/web/themes/custom/reha/scss/global/_layout.scss
index 209d7a4..fffc2dd 100644
--- a/web/themes/custom/reha/scss/global/_layout.scss
+++ b/web/themes/custom/reha/scss/global/_layout.scss
@@ -34,6 +34,10 @@ $width-menu-slidedown : 550px;
     padding-bottom: 6rem;
     width: 70%;
     margin: auto;
+    @media(max-width: 891px){
+        width: 90%;
+    }
+        
 }
 aside{
     width: 20%;
diff --git a/web/themes/custom/reha/scss/pages/_home.scss b/web/themes/custom/reha/scss/pages/_home.scss
index 2fb275e..9c39a25 100644
--- a/web/themes/custom/reha/scss/pages/_home.scss
+++ b/web/themes/custom/reha/scss/pages/_home.scss
@@ -8,20 +8,32 @@
         font-style: normal;
         h4{
             font-size: 5rem;
-          font-weight: normal;
-          margin: 0;
+            font-weight: normal;
+            margin: 0;
+            @media(max-width: 891px){
+            font-size: 4rem;
+            }
         }
         
         h5{
             font-size: 5rem;
-          font-weight: 900;
-          margin: 0;
-          line-height: 0.6;
+            font-weight: 900;
+            margin: 0;
+            line-height: 0.6;
+            @media(max-width: 891px){
+            font-size: 4rem;
+            line-height: 0.9;
+            }
         }
 
         .block-region-content{
             display: grid;
             grid-column: repeat(2, 1fr);
+            @media(max-width: 891px){
+                display: flex;
+                flex-direction: column;
+            
+            }
             .block-views-blockhome-block-1{
                 grid-column: 1 /span 2;
                 grid-row: 1;
@@ -39,6 +51,9 @@
                 font-weight: 800;
                 padding: 2rem;
                 margin-right: 1rem;
+                @media(max-width: 891px){
+                    margin-bottom: 1rem;
+                }
 
                 h2{
                     margin-top: 0;
@@ -74,6 +89,7 @@
             }
             .block-block-content5ae07b35-3c0b-48f5-b51b-f0f0e4c1765f:hover{
                 background-color: $yellow-puca;
+
                 .field--type-link{
                     .field__item {
                         ::after{
@@ -94,9 +110,15 @@
                 display: flex;
                 justify-content: flex-end;  
                 align-items: center;
+                @media(max-width: 891px){
+                    width: 100%;
+                }
                 .field--type-file{
                     width: 80%;
                     margin: 0;
+                    @media(max-width: 891px){
+                        width: 100%;
+                    }
                 }
                 :hover{
                     background-color: $yellow-puca;
@@ -109,9 +131,15 @@
                 display: flex;
                 justify-content: flex-end;  
                 align-items: center; 
+                @media(max-width: 891px){
+                    width: 100%;
+                }
                 .field--type-file{
                     width: 80%;
                     margin: 0;
+                    @media(max-width: 891px){
+                        width: 100%;
+                    }
                 }
                 :hover{
                     background-color: $yellow-puca;
diff --git a/web/themes/custom/reha/scss/partials/_header.scss b/web/themes/custom/reha/scss/partials/_header.scss
index 5bd2d5e..c313471 100644
--- a/web/themes/custom/reha/scss/partials/_header.scss
+++ b/web/themes/custom/reha/scss/partials/_header.scss
@@ -11,14 +11,21 @@ header{
     position: sticky;
     top: 0;
     box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
-    // @media (max-width:800px) {
-    //         height: 100px;
+    @media (max-width:800px) {
+            height: 100px;
+            width: 800px;
  
-    //  }
+     }
     .region-header{
         display: inline-grid;
         align-items: center;
         grid-template-columns: repeat(10, 1fr) ;
+        @media (max-width:891px) {
+         display: flex;
+         flex-direction: row;
+         justify-content: space-between;
+
+        }
 
         #block-reha-logoministere{
             grid-column: 1;
@@ -68,6 +75,10 @@ header{
             
             .bouton-connexion{
                 padding-right: 3rem;
+                // @media (max-width:891px) {
+                //     font-size: 0.1rem;
+                //     color: white;
+                // }
                 :before{
                     content: url(../images/noun-contact-2495375.svg);
                     padding-right: 1rem;
@@ -90,6 +101,9 @@ header{
                     box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
                     clip-path: inset(0px -10px -10px -10px);
                     padding: 5% 10% 5% 5%;
+                    @media (max-width:891px) {
+                        top: 15px;
+                    }
                     .titre{
                         width: 100%;
                         position: relative;
@@ -201,10 +215,24 @@ header{
                     height: 200vh;
                     box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
                     clip-path: inset(0px -10px -10px -10px);
+
+                    @media(max-width: 891px){
+                        right: 0px;
+                        top: 100%;
+                        width: 100vw;
+                        padding-left: 0;
+                        padding-top: 1rem;
+                        height: fit-content;
+                    }
                     .titre{
                         padding-left:3rem ;
                         ::after{
                             left: 320px;
+                            @media(max-width: 891px){
+                                left: 242px;
+                            }
+                        }
+                            
                         }
                     }
                     .field__item{
@@ -219,6 +247,7 @@ header{
             grid-column: 9;
             .bouton-connected{
                 padding-right: 3rem;
+               
                 :before{
                     content: url(../images/noun-contact-2495375.svg);
                     padding-right: 1rem;
@@ -279,6 +308,11 @@ header{
     .bouton{
         align-self: flex-end;
         width: fit-content;
+        @media (max-width:891px) {
+            font-size: 0.1rem;
+            color: white;
+            padding-right: 0 !important;
+        }
         h2{
             text-transform: lowercase;
             display: inline-flex;
@@ -296,7 +330,7 @@ header{
             position: relative;
             left: 90px;
             cursor: pointer;
-        }
+            
     }
 }