css header & footer

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

@@ -150,31 +150,63 @@ header {
   top: 0;
   box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; }
   header div {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between; }
+    display: inline-grid;
+    align-items: center;
+    grid-template-columns: repeat(10, 1fr); }
     header div #block-reha-logoministere {
-      width: fit-content; }
+      grid-column: 1;
+      width: fit-content;
+      padding-left: 4rem;
+      height: 150px; }
     header div #block-reha-logoreha {
-      max-height: 90%; }
+      grid-column: 2;
+      max-height: 90%;
+      height: 150px; }
+      header div #block-reha-logoreha .field--name-field-logo {
+        height: 150px; }
+        header div #block-reha-logoreha .field--name-field-logo .field__item {
+          height: 150px; }
+          header div #block-reha-logoreha .field--name-field-logo .field__item img {
+            height: 150px;
+            width: fit-content; }
     header div #block-reha-connexionutilisateur {
+      grid-column: 9;
       display: flex;
       flex-direction: column;
-      width: 15%;
       height: 150px; }
+      header div #block-reha-connexionutilisateur .bouton-connexion {
+        padding-right: 3rem; }
+        header div #block-reha-connexionutilisateur .bouton-connexion :before {
+          content: url(../images/noun-contact-2495375.svg);
+          padding-right: 1rem; }
       header div #block-reha-connexionutilisateur .user-login-form {
-        display: none; }
+        display: none;
+        background-color: white;
+        width: 100%;
+        height: 100vh;
+        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+        clip-path: inset(0px -10px -10px -10px);
+        padding: 5% 10% 5% 5%; }
       header div #block-reha-connexionutilisateur ul {
-        display: none; }
+        display: none;
+        background-color: white;
+        width: 100%;
+        height: 100vh;
+        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+        clip-path: inset(0px -10px -10px -10px);
+        padding: 5% 10% 5% 5%; }
     header div #block-reha-config-pages {
-      width: 35%;
+      grid-column: 10;
       display: flex;
       flex-direction: column;
       height: 150px; }
-      header div #block-reha-config-pages .bouton {
-        align-self: flex-end;
-        width: 50%; }
+      header div #block-reha-config-pages .bouton-contact {
+        padding-right: 4rem; }
+        header div #block-reha-config-pages .bouton-contact ::before {
+          content: url(../images/noun-letter-1064628.svg);
+          padding-right: 1rem; }
       header div #block-reha-config-pages .config_pages--contact--full {
+        float: right;
         display: none;
         /* Cacher initialement le contenu */
         height: 0;
@@ -191,32 +223,49 @@ header {
         clip-path: inset(0px -10px -10px -10px); }
         header div #block-reha-config-pages .field--type-text-long .field__item {
           padding: 5% 10% 5% 5%; }
+  header .bouton {
+    align-self: flex-end;
+    width: fit-content; }
+    header .bouton h2 {
+      text-transform: lowercase;
+      display: inline-flex; }
 
 footer {
   background-color: white;
+  padding-top: 3rem;
   font-family: "Marianne";
-  font-weight: 800; }
+  font-weight: 800;
+  font-size: 1.3rem;
+  text-transform: lowercase; }
+  footer h2 {
+    font-size: 1.3rem; }
   footer div {
-    display: flex;
-    flex: 1 1 120px;
-    flex-direction: row; }
-    footer div h2 {
-      font-family: 'Marianne'; }
+    display: grid;
+    grid-template-columns: repeat(10, 1fr); }
+
+#block-reha-logoreha-2 {
+  grid-column: 2;
+  grid-row: 1; }
 
 #block-reha-pieddepage {
-  font-size: 1.5rem; }
+  grid-column: 2;
+  grid-row: 3; }
+  #block-reha-pieddepage ul {
+    padding-left: 0; }
 
 #block-reha-operateurduprogramme {
+  grid-column: 4 /span 5;
+  grid-row: 1 /span 3;
   display: flex;
   flex-direction: column;
   border-left: #fdc300 solid 5px;
-  border-right: #fdc300 solid 5px;
-  padding-left: 3rem; }
+  padding-left: 1rem; }
 
 #block-reha-config-pages-2 {
-  margin-left: 3rem;
-  border: none;
-  width: 20%;
+  grid-column: 6 /span 10;
+  grid-row: 1 /span 3;
+  border-left: #fdc300 solid 5px;
+  padding-left: 1rem;
   display: flex;
   flex-direction: column; }
 

web/themes/custom/reha/images/noun-contact-2495375.svg

@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 26.046085 26.038707"
+   enable-background="new 0 0 64 64"
+   xml:space="preserve"
+   id="svg3"
+   sodipodi:docname="noun-contact-2495375.svg"
+   width="35"
+   height="34.9"
+   inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
+   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="defs3" /><sodipodi:namedview
+     id="namedview3"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="14.354268"
+     inkscape:cx="25.811139"
+     inkscape:cy="15.117455"
+     inkscape:window-width="1920"
+     inkscape:window-height="1016"
+     inkscape:window-x="0"
+     inkscape:window-y="276"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg3"><inkscape:page
+       x="0"
+       y="0"
+       width="26.046085"
+       height="26.038708"
+       id="page3"
+       margin="0 0 0"
+       bleed="0" /></sodipodi:namedview><g
+     id="g1"
+     transform="translate(-18.965517,-18.971494)"><path
+       d="m 32.003,33.004 c -3.861,0 -7.002,-3.141 -7.002,-7.002 0,-3.859 3.141,-7 7.002,-7 3.859,0 6.998,3.141 6.998,7 0,3.861 -3.139,7.002 -6.998,7.002 z m 0,-12.002 c -2.758,0 -5.002,2.243 -5.002,5 0,2.758 2.244,5.002 5.002,5.002 2.756,0 4.998,-2.244 4.998,-5.002 0,-2.757 -2.242,-5 -4.998,-5 z"
+       id="path1" /></g><g
+     id="g2"
+     transform="translate(-18.965517,-18.971494)"><path
+       d="M 44,44.998 H 20.001 c -0.552,0 -1,-0.447 -1,-1 C 19.001,39.036 23.038,35 28,35 h 8 c 4.962,0 9,4.036 9,8.998 0,0.553 -0.448,1 -1,1 z m -22.927,-2 H 42.928 C 42.441,39.611 39.52,37 36,37 h -8 c -3.52,0 -6.441,2.611 -6.927,5.998 z"
+       id="path2" /></g></svg>

web/themes/custom/reha/images/noun-letter-1064628.svg

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 87.855651 61.55043"
+   xml:space="preserve"
+   id="svg2"
+   sodipodi:docname="noun-letter-1064628.svg"
+   width="45"
+   height="31.5"
+   inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
+   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="defs2" /><sodipodi:namedview
+     id="namedview2"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="2.5518698"
+     inkscape:cx="117.36492"
+     inkscape:cy="50.551168"
+     inkscape:window-width="1920"
+     inkscape:window-height="1016"
+     inkscape:window-x="0"
+     inkscape:window-y="276"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2" /><path
+     d="m 87.828003,2.0327436 c 0,0 0,-0.1 0,-0.1 0,-0.2 0,-0.3 -0.1,-0.5 0,0 0,0 0,-0.1 0,0 0,0 0,0 -0.1,-0.2 -0.2,-0.3 -0.3,-0.49999992 0,0 0,-0.1 -0.1,-0.1 -0.1,-0.1 -0.2,-0.3 -0.4,-0.4 0,0 0,0 0,0 -0.2,-0.1 -0.3,-0.2 -0.5,-0.2 0,0 -0.1,0 -0.1,0 -0.2,-0.1 -0.4,-0.1 -0.6,-0.1 H 2.1280029 c -0.2,0 -0.4,0 -0.6,0 0,0 -0.1,0 -0.1,0 -0.2,0.1 -0.3,0.1 -0.50000002,0.2 0,0 0,0 0,0 -0.1,0.1 -0.3,0.2 -0.4,0.4 0,0 -0.1,0.1 -0.1,0.1 -0.1,0.19999999 -0.2,0.29999992 -0.3,0.49999992 0,0 0,0 0,0 0,0 0,0 0,0.1 -0.1,0.2 -0.1,0.3 -0.1,0.5 0,0 0,0.1 0,0.1 0,0 0,0 0,0.1 V 59.432745 c 0,1.1 0.9,2.1 2.10000002,2.1 H 85.728003 c 1.1,0 2.1,-0.9 2.1,-2.1 z m -7.7,2.1 -36.2,31.0000014 L 7.7280029,4.1327436 Z m 3.5,53.3000014 H 4.2280029 V 6.6327436 L 42.628003,39.432745 c 0.4,0.3 0.9,0.5 1.4,0.5 0.5,0 1,-0.2 1.4,-0.5 l 38.4,-32.8000014 V 57.432745 Z"
+     id="path1" /></svg>

web/themes/custom/reha/js/reha.js

@@ -48,14 +48,20 @@ jQuery(document).ready(function($){
 //////////////// ok /////////////////
 
   $(document).ready(function() {
-    $(".bouton").click(function(event) {
+    $(".bouton-contact").click(function(event) {
       $(".config_pages--contact--full").slideToggle();
     });
   });
 
   /////////////// ok /////////////////
 
+  $(document).ready(function() {
+    $(".bouton-connexion").click(function(event) {
+      $(".user-login-form").slideToggle();
+      $("ul").slideToggle();
 
+    });
+  });
 
 
 

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

@@ -1,47 +1,48 @@
 footer{
-    // box-shadow: 1px 0px 8px $black;
-    // display: flex;
-
-    // flex-direction: row;
     background-color: $white;
+    padding-top: 3rem;
     font-family: "Marianne";
     font-weight: 800;
-    
+    font-size: 1.3rem;
+    text-transform: lowercase;
+    h2{font-size: 1.3rem;}
     div{
-        display: flex;
-        flex: 1 1 120px;
-        flex-direction: row;
-        h2{
-            font-family: 'Marianne';
-        }
+        // display: flex;
+        // flex: 1 1 120px;
+        // flex-direction: row;
+        display: grid;
+        grid-template-columns: repeat(10, 1fr) ;
+
     }
 }
 
 #block-reha-logoreha-2{
-
+    grid-column: 2;
+    grid-row: 1;
 }
 
 #block-reha-pieddepage {
-    // background-color: yellowgreen;
-    // font-family: 'Marianne';
-    font-size: 1.5rem;
-
+    grid-column: 2;
+    grid-row: 3;
+    ul{padding-left: 0;}
 }
 
 #block-reha-operateurduprogramme{
+    grid-column: 4 /span 5;
+    grid-row: 1 /span 3;
     display: flex;
     flex-direction: column;
     border-left: $yellow-puca solid 5px;
-    border-right: $yellow-puca solid 5px;
-    padding-left: 3rem;
-    // font-family: 'Marianne';
-
+    padding-left: 1rem;
 }
 
 #block-reha-config-pages-2{
-    margin-left: 3rem;
-    border: none;
-    width: 20%;
+    grid-column: 6 /span 10;
+    grid-row: 1 /span 3;
+
+    // margin-left: 3rem;
+    border-left: $yellow-puca solid 5px;
+    padding-left: 1rem;
     display: flex;
     flex-direction: column;
 

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

@@ -15,59 +15,94 @@ header{
     //         position: fixed;
     // }
     div{
-        display:flex;
-        flex-direction: row;
-        justify-content: space-between;
+        display: inline-grid;
+        align-items: center;
+        grid-template-columns: repeat(10, 1fr) ;
 
         #block-reha-logoministere{
-
+            grid-column: 1;
             width: fit-content;
+            padding-left: 4rem;
+            height: $header-height;
+
+
         }
         #block-reha-logoreha{
+            grid-column: 2;
             max-height: 90%;
-            img{
-                // max-height: ;
+            height: $header-height;
+            .field--name-field-logo{
+                height: $header-height;
+                .field__item{
+                    height: $header-height;
+                    img{
+                        height: 150px;
+                        width: fit-content;
+        
+                    }
+                }
             }
 
+
+
         }
 
         #block-reha-connexionutilisateur{
+            grid-column: 9;
+            .bouton-connexion{
+                padding-right: 3rem;
+
+                :before{
+                    content: url(../images/noun-contact-2495375.svg);
+                    padding-right: 1rem;
+                }
+            }
             display: flex;
             flex-direction: column;
-            width: 15%;
             height: $header-height;
 
             .user-login-form{
                 display: none;
+                // transition: height 0.5s; /* Animation de 0.5 seconde lors de l'expansion vers le bas */
+                background-color: $white;
+                width: 100%;
+                height: 100vh;
+                box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+                clip-path: inset(0px -10px -10px -10px);
+                padding: 5% 10% 5% 5%;
+
             }
             ul{
                 display: none;
+                // transition: height 0.5s; /* Animation de 0.5 seconde lors de l'expansion vers le bas */
+                background-color: $white;
+                width: 100%;
+                height: 100vh;
+                box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+                clip-path: inset(0px -10px -10px -10px);
+                padding: 5% 10% 5% 5%;
             }
-            
         }
         #block-reha-config-pages{
-            width:35%;
+            grid-column: 10;
+            .bouton-contact{
+                padding-right: 4rem;
+                ::before{
+                    content: url(../images/noun-letter-1064628.svg);
+                    padding-right: 1rem;
+                }
+            }
             display: flex;
             flex-direction: column;
             height: $header-height;
-            
-            .bouton{
-                align-self: flex-end;
-                width: 50%;
-            }
+
             .config_pages--contact--full {
+                float: right;
                 display: none; /* Cacher initialement le contenu */
                 height: 0; /* Hauteur initiale à 0 pour créer l'effet de glissement vers le bas */
                 // transition: height 0.5s; /* Animation de 0.5 seconde lors de l'expansion vers le bas */
                 width: 100%;
-                
-            }
-            // .open{
-            //     display: block;
-            //     width: 300px;
-            //     background-color: $white;
-            // }
- 
+            } 
             
             .field--type-text-long {
                 transition: height 0.5s; /* Animation de 0.5 seconde lors de l'expansion vers le bas */
@@ -80,29 +115,18 @@ header{
                 .field__item{
                   	padding: 5% 10% 5% 5%;
                   }
-
-
-
             } 
         }
-        // #block-reha-config-pages {
-        //     position: relative;
-        //   }
-      
-        //   .config_pages--contact--full {
-        //     overflow: hidden;
-        //     height: 0; /* Hauteur initiale à 0 pour créer l'effet de glissement vers le bas */
-        //     transition: height 0.5s; /* Animation de 0.5 seconde lors de l'expansion vers le bas */
-        //   }
-      
-        //   .field--type-text-long {
-        //     padding: 20px;
-        //     background-color: #f0f0f0;
-        //   }
-    
     }
 
-
+    .bouton{
+        align-self: flex-end;
+        width: fit-content;
+        h2{
+            text-transform: lowercase;
+            display: inline-flex;
+        }
+    }
 }
 
 

web/themes/custom/reha/templates/block--config-pages--contact.html.twig

@@ -38,7 +38,7 @@
 <div{{ attributes.addClass(classes) }}>
   {{ title_prefix }}
   {% if label %}
-    <button class="bouton">
+    <button class="bouton bouton-contact">
     <h2{{ title_attributes }}>{{ label }}</h2>
     </button>
   {% endif %}

web/themes/custom/reha/templates/block--reha-connexionutilisateur.html.twig

@@ -38,7 +38,7 @@
 <div{{ attributes.addClass(classes) }}>
   {{ title_prefix }}
   {% if label %}
-    <button class="bouton">
+    <button class="bouton bouton-connexion">
     <h2{{ title_attributes }}>{{ label }}</h2>
     </button>
   {% endif %}