mobile header & home

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

@@ -8,6 +8,9 @@
   border: solid black 1px;
   margin-bottom: 1rem;
   background-color: white; }
+  @media (max-width: 891px) {
+    .field--type-link, .field--type-file, .links, .views-field-edit-node, .views-field-edit-user, .form-submit, #edit-field-telephone-0-phone, .layout-sidebar-first #block-reha-phase1 footer, #block-reha-contenudelapageprincipale .node-operation-form #edit-field-fiche-candidature-wrapper .form-managed-file, #block-reha-contenudelapageprincipale .node-operation-form #edit-field-dossier-de-candidature-wrapper .form-managed-file, #block-reha-contenudelapageprincipale #node-operation-edit-form #edit-field-fiche-candidature-wrapper .form-managed-file, #block-reha-contenudelapageprincipale #node-operation-edit-form #edit-field-dossier-de-candidature-wrapper .form-managed-file {
+      font-size: 1rem; } }
 
 .field--type-link {
   width: fit-content; }
@@ -274,12 +277,21 @@ header {
           @media (max-width: 891px) {
             header .region-header #block-reha-connexionutilisateur .connexion .connexion-full {
               top: 15px; } }
+          @media (max-width: 500px) {
+            header .region-header #block-reha-connexionutilisateur .connexion .connexion-full {
+              top: 15px;
+              right: -150px;
+              width: 100vw;
+              height: fit-content; } }
           header .region-header #block-reha-connexionutilisateur .connexion .connexion-full .titre {
             width: 100%;
             position: relative; }
             header .region-header #block-reha-connexionutilisateur .connexion .connexion-full .titre ::after {
               position: relative;
               left: 430px; }
+              @media (max-width: 500px) {
+                header .region-header #block-reha-connexionutilisateur .connexion .connexion-full .titre ::after {
+                  left: 325px; } }
           header .region-header #block-reha-connexionutilisateur .connexion .connexion-full #user-login-form {
             width: 80%;
             display: flex;
@@ -319,6 +331,9 @@ header {
             border: solid black 1px;
             margin-bottom: 1rem;
             background-color: white; }
+            @media (max-width: 891px) {
+              header .region-header #block-reha-connexionutilisateur .connexion .connexion-full ul:last-of-type a {
+                font-size: 1rem; } }
             header .region-header #block-reha-connexionutilisateur .connexion .connexion-full ul:last-of-type a p {
               font-style: italic; }
           header .region-header #block-reha-connexionutilisateur .connexion .connexion-full ul:last-of-type a:hover {
@@ -359,15 +374,25 @@ header {
               height: fit-content; } }
           header .region-header #block-reha-config-pages .contacts .contacts-full .titre {
             padding-left: 3rem; }
+            @media (max-width: 500px) {
+              header .region-header #block-reha-config-pages .contacts .contacts-full .titre {
+                padding-left: 1.5rem; } }
             header .region-header #block-reha-config-pages .contacts .contacts-full .titre ::after {
               left: 320px; }
               @media (max-width: 891px) {
                 header .region-header #block-reha-config-pages .contacts .contacts-full .titre ::after {
                   left: 242px; } }
+              @media (max-width: 500px) {
+                header .region-header #block-reha-config-pages .contacts .contacts-full .titre ::after {
+                  left: 175px; } }
         header .region-header #block-reha-config-pages .contacts .field__item {
           display: flex;
           flex-direction: column;
           padding-left: 3rem; }
+          @media (max-width: 500px) {
+            header .region-header #block-reha-config-pages .contacts .field__item {
+              padding-left: 1.5rem;
+              padding-bottom: 2rem; } }
   header #block-reha-views-block-current-user-block-block-1 {
     grid-column: 9;
     display: flex;
@@ -516,6 +541,9 @@ input {
   font-size: 1.2rem;
   font-weight: 300;
   width: fit-content; }
+  @media (max-width: 891px) {
+    .form-submit {
+      font-size: 1rem; } }
 
 #user-login-form {
   padding-left: 2rem; }
@@ -564,6 +592,9 @@ input {
     @media (max-width: 891px) {
       .home-page-layout-content .layout--onecol h4 {
         font-size: 4rem; } }
+    @media (max-width: 520px) {
+      .home-page-layout-content .layout--onecol h4 {
+        font-size: 3rem; } }
   .home-page-layout-content .layout--onecol h5 {
     font-size: 5rem;
     font-weight: 900;
@@ -573,6 +604,9 @@ input {
       .home-page-layout-content .layout--onecol h5 {
         font-size: 4rem;
         line-height: 0.9; } }
+    @media (max-width: 520px) {
+      .home-page-layout-content .layout--onecol h5 {
+        font-size: 3rem; } }
   .home-page-layout-content .layout--onecol .block-region-content {
     display: grid;
     grid-column: repeat(2, 1fr); }
@@ -587,7 +621,7 @@ input {
     .home-page-layout-content .layout--onecol .block-region-content .block-block-content5ae07b35-3c0b-48f5-b51b-f0f0e4c1765f {
       grid-column: 1;
       grid-row: 2 /span 2;
-      width: 85%;
+      width: 80%;
       border: solid #fdc300 1px;
       background-color: white;
       font-weight: 800;
@@ -634,6 +668,9 @@ input {
       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: 90%; } }
+      @media (max-width: 520px) {
         .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 {
@@ -652,6 +689,9 @@ input {
       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: 90%; } }
+      @media (max-width: 520px) {
         .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 {

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

@@ -7,6 +7,9 @@
     border: solid black 1px;
     margin-bottom: 1rem;
     background-color: $white-button;
+    @media (max-width:891px) {
+        font-size: 1rem;
+     }
     
 }
 

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

@@ -13,6 +13,9 @@
             @media(max-width: 891px){
             font-size: 4rem;
             }
+            @media(max-width: 520px){
+                font-size: 3rem;
+            }
         }
         
         h5{
@@ -24,6 +27,10 @@
             font-size: 4rem;
             line-height: 0.9;
             }
+            @media(max-width: 520px){
+                font-size: 3rem;
+            }
+            
         }
 
         .block-region-content{
@@ -45,7 +52,7 @@
             .block-block-content5ae07b35-3c0b-48f5-b51b-f0f0e4c1765f{
                 grid-column: 1;
                 grid-row: 2 /span 2;
-                width: 85%;
+                width: 80%;
                 border: solid $yellow-puca 1px;
                 background-color: $white-button;
                 font-weight: 800;
@@ -53,6 +60,7 @@
                 margin-right: 1rem;
                 @media(max-width: 891px){
                     margin-bottom: 1rem;
+                    // margin: auto;
                 }
 
                 h2{
@@ -111,6 +119,9 @@
                 justify-content: flex-end;  
                 align-items: center;
                 @media(max-width: 891px){
+                    width: 90%;
+                }
+                @media(max-width: 520px){
                     width: 100%;
                 }
                 .field--type-file{
@@ -132,6 +143,9 @@
                 justify-content: flex-end;  
                 align-items: center; 
                 @media(max-width: 891px){
+                    width: 90%;
+                }
+                @media(max-width: 520px){
                     width: 100%;
                 }
                 .field--type-file{

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

@@ -17,6 +17,9 @@ input{
     font-weight: 300;
     width: fit-content;
     @extend %buttonwithborder;
+    @media (max-width:891px) {
+        font-size: 1rem;
+     }
 }
 
 #user-login-form{

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

@@ -104,13 +104,23 @@ header{
                     @media (max-width:891px) {
                         top: 15px;
                     }
+                    @media (max-width:500px) {
+                        top: 15px;
+                        right: -150px;
+                        width: 100vw;
+                        height: fit-content;
+                    }
                     .titre{
                         width: 100%;
                         position: relative;
                         ::after{
                             position: relative;
                             left: 430px;
+                            @media (max-width:500px) {
+                                left: 325px;
+                            }
                         }
+                       
                     }
                     #user-login-form{
 
@@ -169,6 +179,9 @@ header{
                             border: solid black 1px;
                             margin-bottom: 1rem;
                             background-color: $white-button;
+                            @media (max-width:891px) {
+                               font-size: 1rem;
+                            }
                         p{
                             font-style: italic;
                          }
@@ -224,13 +237,20 @@ header{
                         padding-top: 1rem;
                         height: fit-content;
                     }
+
                     .titre{
                         padding-left:3rem ;
+                        @media (max-width:500px) {
+                            padding-left: 1.5rem;
+                        }
                         ::after{
                             left: 320px;
                             @media(max-width: 891px){
                                 left: 242px;
                             }
+                            @media (max-width:500px) {
+                                left: 175px;
+                            }
                         }
                             
                         }
@@ -239,6 +259,10 @@ header{
                         display: flex;
                         flex-direction: column;
                         padding-left: 3rem;
+                        @media (max-width:500px) {
+                            padding-left: 1.5rem;
+                            padding-bottom: 2rem;
+                        }
                     }
                 } 
             }