css /mes-operations

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

@@ -127,12 +127,11 @@
   position: relative;
   width: 100vw;
   background-color: rgba(153, 147, 174, 0.1);
-  font-family: 'Marianne';
+  font-family: "Marianne", sans-serif;
   font-weight: 400;
   font-style: normal;
   top: 0%;
   left: 0%;
-  width: 100%;
   overflow: hidden;
   display: flex;
   flex-flow: row wrap; }
@@ -152,7 +151,8 @@ aside {
   width: 20%;
   order: 1;
   margin-top: 5rem;
-  margin-left: 10rem; }
+  margin-left: 10%;
+  margin-right: 1rem; }
 
 main {
   width: 100%;
@@ -184,6 +184,10 @@ html.js body div.dialog-off-canvas-main-canvas div.layout-container {
 svg.mailto {
   display: none; }
 
+@media (max-width: 800px) {
+  header #block-reha-logoministere {
+    padding-left: 2rem; } }
+
 /*partials*/
 header {
   display: block;
@@ -191,6 +195,7 @@ header {
   background-color: white;
   z-index: 99;
   width: 100vw;
+  max-width: 100vw;
   position: -webkit-sticky;
   position: sticky;
   top: 0;
@@ -201,9 +206,17 @@ header {
     grid-template-columns: repeat(10, 1fr); }
     header .region-header #block-reha-logoministere {
       grid-column: 1;
-      width: fit-content;
+      width: 200px;
+      min-width: 100px;
       padding-left: 4rem;
-      height: 150px; }
+      height: 100%; }
+      header .region-header #block-reha-logoministere img {
+        max-width: 100%;
+        object-fit: contain; }
+      @media (max-width: 891px) {
+        header .region-header #block-reha-logoministere {
+          width: 150px;
+          padding-left: 1rem; } }
     header .region-header #block-reha-logoreha {
       display: none;
       grid-column: 2;
@@ -273,8 +286,8 @@ header {
             header .region-header #block-reha-connexionutilisateur .connexion .connexion-full ul .request-password-link {
               margin-bottom: 4rem;
               font-size: 1rem; }
-            header .region-header #block-reha-connexionutilisateur .connexion .connexion-full ul .request-password-link:hover {
-              text-decoration: #fdc300 underline; }
+              header .region-header #block-reha-connexionutilisateur .connexion .connexion-full ul .request-password-link:hover {
+                text-decoration: #fdc300 underline; }
             header .region-header #block-reha-connexionutilisateur .connexion .connexion-full ul li p {
               font-style: italic;
               font-size: 0.9rem;

web/themes/custom/reha/scss/configuratoin/_breakpoints.scss

@@ -0,0 +1,16 @@
+// Media Device Breakpoints
+$large-desktop-container:		75.000em !default;
+$desktop-container:				60.000em !default;
+$tablet-container:				48.000em !default;
+$large-mobile-container:		30.000em !default;
+$mobile-container:				100% !default;
+
+// Breakpoint Variables For Particles
+$media: "all" !default;
+$mobile-only: "#{$media} and (max-width:#{$tablet-container - 0.062})" !default;
+$no-mobile: "#{$media} and (min-width:#{$tablet-container})" !default;
+$small-mobile-range: "#{$media} and (max-width:#{$large-mobile-container})" !default;
+$large-mobile-range: "#{$media} and (min-width:#{$large-mobile-container + 0.063}) and (max-width:#{$tablet-container - 0.062})" !default;
+$tablet-range: "#{$media} and (min-width:#{$tablet-container}) and (max-width:#{$desktop-container - 0.062})" !default;
+$desktop-range: "#{$media} and (min-width:#{$desktop-container}) and (max-width:#{$large-desktop-container - 0.062})" !default;
+$large-desktop-range: "#{$media} and (min-width:#{$large-desktop-container})" !default;

web/themes/custom/reha/scss/functions/mixins/_breakpoints.scss

@@ -0,0 +1,30 @@
+// Breakpoints
+@mixin breakpoint($breakpoints, $media: all) {
+    @each $breakpoint in $breakpoints {
+        @if $breakpoint == large-desktop-range {
+            @media only #{$media} and (min-width: $large-desktop-container) { @content; }
+        }
+        @else if $breakpoint == desktop-range {
+            @media only #{$media} and (min-width: $desktop-container) and (max-width: $large-desktop-container - 0.062) { @content; }
+        }
+        @else if $breakpoint == tablet-range {
+            @media only #{$media} and (min-width: $tablet-container) and (max-width: $desktop-container - 0.062) { @content; }
+        }
+        @else if $breakpoint == large-mobile-range {
+            @media only #{$media} and (min-width: $large-mobile-container + 0.063) and (max-width: $tablet-container - 0.062) { @content; }
+        }
+        @else if $breakpoint == small-mobile-range {
+            @media only #{$media} and (max-width: $large-mobile-container) { @content; }
+        }
+        @else if $breakpoint == no-mobile {
+            @media only #{$media} and (min-width: $tablet-container) { @content; }
+        }
+        @else if $breakpoint == mobile-only {
+            @media only #{$media} and (max-width: $tablet-container - 0.062) { @content; }
+        }
+        @else if $breakpoint == desktop-only {
+            @media only #{$media} and (max-width: $desktop-container - 0.062) { @content; }
+        }
+    }
+
+}

web/themes/custom/reha/scss/global/_layout.scss

@@ -6,12 +6,12 @@ $width-menu-slidedown : 550px;
     position: relative;
     width: 100vw;
     background-color: $background-home;
-    font-family: 'Marianne';
+    font-family: $font-family-default;
     font-weight: 400;
     font-style: normal;
     top: 0%;
     left: 0%;
-    width: 100%;
+    // width: 100%;
     overflow: hidden;
     display: flex;
     flex-flow: row wrap;
@@ -39,7 +39,8 @@ aside{
     width: 20%;
     order: 1;
     margin-top: 5rem;
-    margin-left: 10rem;
+    margin-left: 10%;
+    margin-right: 1rem;
 }
 main{
     width: 100%;
@@ -47,6 +48,7 @@ main{
     flex-direction: row;
     position: relative;
 
+
 }
 
 .main-content{

web/themes/custom/reha/scss/global/_mediaquerries.scss

@@ -0,0 +1,8 @@
+
+@media (max-width:800px) {
+   header{
+    #block-reha-logoministere{
+        padding-left: 2rem;
+    }
+   } 
+}

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

@@ -9,12 +9,4 @@ $white-header:rgb(255, 255, 255);
 $yellow-puca: #fdc300;
 
 
-// $blue-light: rgb(0,158,227);
-// $blue-dark: rgb(9,57,139);
-// $grey-background: rgb(153,147,174);
-// $black: rgb(0,0,0);
-// $white: rgb(255,255,255);
-// $background-actus: rgba(0,158,227, 0.2);
-// $red: rgb(225,0,15);
-
 

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

@@ -2,20 +2,8 @@
 $font-family-default: "Marianne", sans-serif;
 $font-family-header: "Marianne", sans-serif;
 $font-family-chapeau: "Marianne", sans-serif;
-// $font-family-mono: "Inconsolata", monospace;
-// $font-family-serif:	"Georgia", "Times", "Times New Roman", serif;
 
 
 
-// Font Weight
-// les deux lignes qui suivent ne marchent pas !!
 
-$font-regular: "Marianne", 600, normal;
-$font-regular-italic: 600, italic;
 
-// à tester, pas aboutis
-// $font-titre-page() {
-//     font-style: normal;
-//     font-weight: 900;
-//     font-family: $font-family-default;
-// }

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

@@ -2,14 +2,19 @@
 
 header{                       
     display: block;
-    height: $header-height;
+    height: 150px;
     background-color: $white-header;
     z-index: 99;
     width: 100vw;
+    max-width: 100vw;
     position: -webkit-sticky;
     position: sticky;
     top: 0;
     box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+    // @media (max-width:800px) {
+    //         height: 100px;
+ 
+    //  }
     .region-header{
         display: inline-grid;
         align-items: center;
@@ -17,9 +22,20 @@ header{
 
         #block-reha-logoministere{
             grid-column: 1;
-            width: fit-content;
+            width: 200px;
+
+            min-width: 100px;
             padding-left: 4rem;
-            height: $header-height;
+            height: 100%;
+                img{
+                    max-width: 100%;
+                    object-fit: contain;
+                }
+            @media (max-width:891px) {
+                width: 150px;
+                padding-left: 1rem;
+            }   
+            
         }
         #block-reha-logoreha{
             display: none;
@@ -90,7 +106,6 @@ header{
                                 flex-grow: 0;
                             }
                         }
-                        
                     }
                     ul{
                         font-size: 1.2rem;
@@ -107,10 +122,13 @@ header{
                         .request-password-link{
                             margin-bottom: 4rem;
                             font-size: 1rem;
+                            &:hover{
+                                text-decoration: $yellow-puca underline;
+                             }
                         }
-                        .request-password-link:hover{
-                            text-decoration: $yellow-puca underline;
-                         }
+                        // .request-password-link:hover{
+                        //     text-decoration: $yellow-puca underline;
+                        //  }
                         li p{
                             font-style: italic;
                             font-size: 0.9rem;

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

@@ -1,7 +1,7 @@
 /*reha*/
 
-
-
+// @import "configuration/_breakpoints.scss";
+// @import "functions/mixins/_breakpoints.scss";
 
 /*global*/
 
@@ -12,6 +12,8 @@
 @import "global/fonts";
 @import "global/layout";
 @import "global/reset";
+@import "global/mediaquerries";
+
 
 /*partials*/
 @import "partials/header";
@@ -24,5 +26,5 @@
 @import "pages/home";
 @import "pages/creer-un-compte";
 @import "pages/mes-operations";
-@import "pages/proposer-une-operation.scss";
-@import "pages/user--edit.scss";
+@import "pages/proposer-une-operation";
+@import "pages/user--edit";