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 4b4f05d..6df1330 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 @@ -282,7 +282,7 @@ header .header_left_container #block-quartiers-de-demain-logorepu-2 { } @media (max-width: 891px) { header .header_left_container #block-quartiers-de-demain-logorepu-2 { - height: 110px; + height: 160px; } } header .header_left_container #block-quartiers-de-demain-logoepau-2 { @@ -291,7 +291,7 @@ header .header_left_container #block-quartiers-de-demain-logoepau-2 { } @media (max-width: 891px) { header .header_left_container #block-quartiers-de-demain-logoepau-2 { - height: 110px; + height: 160px; } } header .header_left_container #block-quartiers-de-demain-logoquartiersdedemain { @@ -301,6 +301,11 @@ header .header_left_container #block-quartiers-de-demain-logoquartiersdedemain . width: 90%; margin: auto; } +@media (max-width: 1650px) { + header .header_left_container #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo { + width: 80%; + } +} header .header_left_container #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header { width: 100%; } @@ -313,7 +318,7 @@ header .header_left_container img { } @media (max-width: 891px) { header .header_left_container img { - height: 110px; + height: 160px; } } @media (max-width: 660px) { @@ -376,6 +381,11 @@ 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%; @@ -394,9 +404,14 @@ header .header_nav_container #block-quartiers-de-demain-entete ul { padding-right: 1rem; margin: 0; } +@media (max-width: 1200px) { + header .header_nav_container #block-quartiers-de-demain-entete ul { + top: 0; + } +} @media (max-width: 810px) { header .header_nav_container #block-quartiers-de-demain-entete ul { - top: 27.5px; + top: 40px; align-items: center; margin: 1rem; } @@ -413,7 +428,7 @@ header .header_nav_container #block-quartiers-de-demain-entete ul li a { } @media (max-width: 1090px) { header .header_nav_container #block-quartiers-de-demain-entete ul li a { - font-size: 0.9rem; + font-size: 0.6rem; } } @media (max-width: 500px) { @@ -457,6 +472,11 @@ header .header:hover + .header_nav_container { transform-origin: bottom right; transition: all 1s ease-in-out; } +@media (max-width: 1600px) { + .header--collapsed { + height: 160px; + } +} .header--collapsed .qdd-header { opacity: 1 !important; } 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 ce0beb6..b840d1c 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,6 +1,6 @@ $header-height : 270px; -$header-height-pad : 110px; +$header-height-pad : 160px; $header-height-small : 70px; $header-height-ultrasmall : 50px; $width-menu-slidedown : 550px; 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 459bbb6..1c9cff8 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 @@ -49,6 +49,9 @@ header{ .field_field_logo{ width: 90%; margin: auto; + @media(max-width: 1650px){ + width: 80%; + } .qdd-header{ width: 100%; } @@ -116,6 +119,9 @@ header{ transform: translateX(0); transition: transform 0.3s ease-in-out; z-index: -1 ; + @media(max-width: 1090px){ + text-align:left; + } @media(max-width: 500px){ flex: 0 0 40%; } @@ -133,6 +139,9 @@ header{ padding-left: 1rem; padding-right: 1rem; margin: 0; + @media(max-width: 1200px){ + top:0; + } @media(max-width: 810px){ top: calc($header-height-pad / 4 ); align-items: center; @@ -143,12 +152,11 @@ header{ padding-top: 0.3rem; } a{ - text-transform: uppercase; color: white; font-size: 0.5rem; @media(max-width:1090px){ - font-size: 0.9rem; + font-size: 0.6rem; } @media(max-width: 500px){ display: flex; @@ -200,6 +208,9 @@ header{ width: 45%; transform-origin: bottom right; transition: all 1s ease-in-out; + @media(max-width: 1600px) { + height: $header-height-pad; + } .qdd-header{ opacity: 1 !important; }