From 75504e912b5f62761d7870106744ef32f81d7b6d Mon Sep 17 00:00:00 2001 From: ouidade Date: Fri, 20 Sep 2024 23:34:40 +0200 Subject: [PATCH] taille header --- .../dist/assets/css/bundle.css | 24 +++++++------------ .../src/assets/scss/global/_layout.scss | 2 +- .../src/assets/scss/partials/header.scss | 10 ++++---- 3 files changed, 15 insertions(+), 21 deletions(-) diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css index 81db8a4..0fb3daa 100644 --- a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css +++ b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css @@ -193,7 +193,7 @@ h2 { } .layout-container main { width: 100%; - padding-top: 270px; + padding-top: 320px; } @media (max-width: 810px) { .layout-container main { @@ -287,7 +287,7 @@ header .header_left_container #block-quartiers-de-demain-logorepu-2 { } header .header_left_container #block-quartiers-de-demain-logoepau-2 { display: none; - height: 270px; + height: 320px; } @media (max-width: 891px) { header .header_left_container #block-quartiers-de-demain-logoepau-2 { @@ -312,7 +312,7 @@ header .header_left_container #block-quartiers-de-demain-logoquartiersdedemain . header .header_left_container img { width: auto; margin: auto; - height: calc(270px - 5rem); + height: calc(320px - 5rem); padding: 2rem; transition: height 0.3s; /* Add transition for smooth resizing */ } @@ -381,11 +381,6 @@ header .header_nav_container { transition: transform 0.3s ease-in-out; z-index: -1; } -@media (max-width: 1090px) { - header .header_nav_container { - text-align: left; - } -} @media (max-width: 500px) { header .header_nav_container { flex: 0 0 40%; @@ -399,16 +394,15 @@ header .header_nav_container #block-quartiers-de-demain-entete ul { flex-direction: column; align-items: flex-start; position: relative; - top: 67.5px; + top: 80px; padding-left: 1rem; padding-right: 1rem; margin: 0; } -@media (max-width: 810px) { +@media (max-width: 920px) { header .header_nav_container #block-quartiers-de-demain-entete ul { - top: 40px; + top: 16px; align-items: center; - margin: 1rem; } } @media (max-width: 1090px) { @@ -462,12 +456,12 @@ header .header:hover + .header_nav_container { /* Taille définitive du header après l'animation */ .header--collapsed { - height: 270px; /* Ou la hauteur que vous souhaitez pour votre header */ + height: 320px; /* Ou la hauteur que vous souhaitez pour votre header */ width: 45%; transform-origin: bottom right; transition: all 1s ease-in-out; } -@media (max-width: 1600px) { +@media (max-width: 1090px) { .header--collapsed { height: 160px; } @@ -503,7 +497,7 @@ header .header:hover + .header_nav_container { } .header--collapsed-already { - height: 270px; /* Ou la hauteur que vous souhaitez pour votre header */ + height: 320px; /* Ou la hauteur que vous souhaitez pour votre header */ width: 45%; transform-origin: bottom right; transition: all 0s ease-in-out; diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/global/_layout.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/global/_layout.scss index b840d1c..b648b9e 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/global/_layout.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/global/_layout.scss @@ -1,5 +1,5 @@ -$header-height : 270px; +$header-height : 320px; $header-height-pad : 160px; $header-height-small : 70px; $header-height-ultrasmall : 50px; diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss index 856d8d2..014c54f 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss @@ -120,7 +120,7 @@ header{ transition: transform 0.3s ease-in-out; z-index: -1 ; @media(max-width: 1090px){ - text-align:left; + // text-align:left; } @media(max-width: 500px){ flex: 0 0 40%; @@ -142,10 +142,10 @@ header{ // @media(max-width: 1200px){ // top:0; // } - @media(max-width: 810px){ - top: calc($header-height-pad / 4 ); + @media(max-width: 920px){ + top: calc($header-height-pad / 10 ); align-items: center; - margin: 1rem; + // margin: 1rem; } li{ @media(max-width: 1090px){ @@ -208,7 +208,7 @@ header{ width: 45%; transform-origin: bottom right; transition: all 1s ease-in-out; - @media(max-width: 1600px) { + @media(max-width: 1090px) { height: $header-height-pad; } .qdd-header{