bachir
/
drupal-quartiersdedemain
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

taille header

This commit is contained in:
ouidade 2024-09-20 23:34:40 +02:00
parent 56973f5abb
commit 75504e912b
3 changed files with 15 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css vendored
View File

@ -193,7 +193,7 @@ h2 {
} }
.layout-container main { .layout-container main {
width: 100%; width: 100%;
padding-top: 270px; padding-top: 320px;
} }
@media (max-width: 810px) { @media (max-width: 810px) {
.layout-container main { .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 { header .header_left_container #block-quartiers-de-demain-logoepau-2 {
display: none; display: none;
height: 270px; height: 320px;
} }
@media (max-width: 891px) { @media (max-width: 891px) {
header .header_left_container #block-quartiers-de-demain-logoepau-2 { 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 { header .header_left_container img {
width: auto; width: auto;
margin: auto; margin: auto;
height: calc(270px - 5rem); height: calc(320px - 5rem);
padding: 2rem; padding: 2rem;
transition: height 0.3s; /* Add transition for smooth resizing */ transition: height 0.3s; /* Add transition for smooth resizing */
} }
@ -381,11 +381,6 @@ header .header_nav_container {
transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out;
z-index: -1; z-index: -1;
} }
@media (max-width: 1090px) {
header .header_nav_container {
text-align: left;
}
}
@media (max-width: 500px) { @media (max-width: 500px) {
header .header_nav_container { header .header_nav_container {
flex: 0 0 40%; flex: 0 0 40%;
@ -399,16 +394,15 @@ header .header_nav_container #block-quartiers-de-demain-entete ul {
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
position: relative; position: relative;
top: 67.5px; top: 80px;
padding-left: 1rem; padding-left: 1rem;
padding-right: 1rem; padding-right: 1rem;
margin: 0; margin: 0;
} }
@media (max-width: 810px) { @media (max-width: 920px) {
header .header_nav_container #block-quartiers-de-demain-entete ul { header .header_nav_container #block-quartiers-de-demain-entete ul {
top: 40px; top: 16px;
align-items: center; align-items: center;
margin: 1rem;
} }
} }
@media (max-width: 1090px) { @media (max-width: 1090px) {
@ -462,12 +456,12 @@ header .header:hover + .header_nav_container {
/* Taille définitive du header après l'animation */ /* Taille définitive du header après l'animation */
.header--collapsed { .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%; width: 45%;
transform-origin: bottom right; transform-origin: bottom right;
transition: all 1s ease-in-out; transition: all 1s ease-in-out;
} }
@media (max-width: 1600px) { @media (max-width: 1090px) {
.header--collapsed { .header--collapsed {
height: 160px; height: 160px;
} }
@ -503,7 +497,7 @@ header .header:hover + .header_nav_container {
} }
.header--collapsed-already { .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%; width: 45%;
transform-origin: bottom right; transform-origin: bottom right;
transition: all 0s ease-in-out; transition: all 0s ease-in-out;

2
web/themes/custom/quartiers_de_demain/src/assets/scss/global/_layout.scss
View File

@ -1,5 +1,5 @@
$header-height : 270px; $header-height : 320px;
$header-height-pad : 160px; $header-height-pad : 160px;
$header-height-small : 70px; $header-height-small : 70px;
$header-height-ultrasmall : 50px; $header-height-ultrasmall : 50px;

10
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss
View File

@ -120,7 +120,7 @@ header{
transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out;
z-index: -1 ; z-index: -1 ;
@media(max-width: 1090px){ @media(max-width: 1090px){
text-align:left; // text-align:left;
} }
@media(max-width: 500px){ @media(max-width: 500px){
flex: 0 0 40%; flex: 0 0 40%;
@ -142,10 +142,10 @@ header{
// @media(max-width: 1200px){ // @media(max-width: 1200px){
// top:0; // top:0;
// } // }
@media(max-width: 810px){ @media(max-width: 920px){
top: calc($header-height-pad / 4 ); top: calc($header-height-pad / 10 );
align-items: center; align-items: center;
margin: 1rem; // margin: 1rem;
} }
li{ li{
@media(max-width: 1090px){ @media(max-width: 1090px){
@ -208,7 +208,7 @@ header{
width: 45%; width: 45%;
transform-origin: bottom right; transform-origin: bottom right;
transition: all 1s ease-in-out; transition: all 1s ease-in-out;
@media(max-width: 1600px) { @media(max-width: 1090px) {
height: $header-height-pad; height: $header-height-pad;
} }
.qdd-header{ .qdd-header{