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 {
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;

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-small : 70px;
$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;
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{