From 4cbb80d6fb5c6fe8a7df2282a9a9b3252b387d29 Mon Sep 17 00:00:00 2001 From: ouidade Date: Tue, 13 Jan 2026 14:36:15 +0100 Subject: [PATCH] taille logo header --- .../dist/assets/css/bundle.css | 23 +- .../src/assets/scss/global/_layout.scss | 2 +- .../src/assets/scss/partials/header.scss | 385 +----------------- 3 files changed, 17 insertions(+), 393 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 892ec87..74d438d 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 @@ -192,7 +192,7 @@ h2, h3 { width: 100%; padding-top: 200px; padding-bottom: 3rem; - min-height: calc(100vh - (200px + 3rem)); + min-height: calc(100vh - (200px + 6rem)); } @media (max-width: 810px) { .layout-container main { @@ -387,9 +387,9 @@ header[role=banner] .header_left_container img { padding: 2rem; transition: height 0.3s; } -@media (max-width: 891px) { +@media (max-width: 1000px) { header[role=banner] .header_left_container img { - height: 160px; + height: calc(160px - 4rem); } } @media (max-width: 660px) { @@ -397,11 +397,6 @@ header[role=banner] .header_left_container img { height: 70px; } } -@media (max-width: 450px) { - header[role=banner] .header_left_container img { - height: 50px; - } -} header[role=banner] .header_right_container { display: none; flex: 0 0 0%; @@ -2518,18 +2513,6 @@ body { font-size: 0.8rem; font-weight: 800; } -#home article.node-type-static #paragraph-id--6 .field_field_texte .colone-picto > p:nth-of-type(2) { - width: 60%; - font-size: 0.8rem; - align-self: center; - padding-top: 1.5rem; -} -@media (max-width: 810px) { - #home article.node-type-static #paragraph-id--6 .field_field_texte .colone-picto > p:nth-of-type(2) { - width: 80%; - padding-top: 0; - } -} #home article.node-type-static #paragraph-id--6 .field_field_texte .colone-picto > p:nth-of-type(3) { width: 90%; align-self: center; 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 71d3379..618449f 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 @@ -38,7 +38,7 @@ $width-menu-slidedown : 550px; padding-top: $header-height; padding-bottom: 3rem; // box-sizing:border-box; - min-height: calc(100vh - ($header-height + 3rem)); + min-height: calc(100vh - ($header-height + 6rem)); @media(max-width: 810px){ padding-top: 180px; } 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 62bfd5b..1521774 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 @@ -1,358 +1,3 @@ -// /* =========================== -// HEADER GLOBAL -// =========================== */ - -// header[role="banner"] { -// position: fixed; -// top: 0; -// left: 0; -// z-index: 99; -// max-width: 100vw; - -// display: flex; -// flex-direction: row; -// transform-origin: bottom right; -// height: $header-height; -// width: 35%; -// transition: all 1.4s ease-in-out; - -// @media (max-width: 1090px) { -// height: $header-height-pad; -// } - -// @media (min-width: 1400px) { -// height: $header-height-big; -// } - -// @media (max-width: 810px) { -// width: 100%; -// height: 170px; -// flex-direction: row; -// } - -// .qdd-header { -// opacity: 1 !important; -// } - -// /* =========================== -// LANGUAGE SWITCHER -// =========================== */ - -// .language-switcher-language-url { -// text-transform: uppercase; -// color: white; - -// ul { -// display: flex; -// flex-direction: row; -// font-size: 0.6rem; -// padding: 0; -// width: fit-content; - -// @media (max-width: 810px) { -// font-size: 0.9rem; -// } - -// li a { -// color: white; -// font-family: "gilroy-light"; -// } - -// li:nth-child(1) { -// &::after { -// content: " / "; -// white-space: pre; -// } -// } - -// .is-active { -// font-family: "gilroy-bold"; -// } -// } -// } - -// .contextual-region { -// width: max-content; -// } - -// /* =========================== -// COLONNE GAUCHE (LOGO) -// =========================== */ - -// .header_left_container { -// flex: 0 0 45%; -// display: flex; -// flex-direction: row; -// background-color: $white-header; -// transition: -// flex-basis 0.9s ease-in-out, -// width 0.9s ease-in-out; - -// img { -// display: none; -// } - -// @media (max-width: 660px) { -// height: inherit; -// } - -// #block-quartiers-de-demain-logorepu-2 { -// display: none; - -// @media (max-width: 891px) { -// height: $header-height-pad; -// } -// } - -// #block-quartiers-de-demain-logoepau-2 { -// display: none; -// height: $header-height; - -// @media (max-width: 891px) { -// height: $header-height-pad; -// } -// } - -// #block-quartiers-de-demain-logoquartiersdedemain { -// margin: auto; - -// .field_field_logo { -// width: 90%; -// margin: auto; - -// @media (max-width: 1650px) { -// width: 80%; -// } - -// .qdd-header { -// width: 100%; -// } -// } -// } - -// img { -// width: auto; -// margin: auto; -// height: calc($header-height - 1rem); -// padding: 2rem; -// transition: height 0.3s; - -// @media (max-width: 891px) { -// height: $header-height-pad; -// } - -// @media (max-width: 660px) { -// height: $header-height-small; -// } - -// @media (max-width: 450px) { -// height: $header-height-ultrasmall; -// } -// } -// } - -// /* =========================== -// BOUTON / BLOCS DROITE (SI BESOIN) -// =========================== */ - -// .header_right_container { -// display: none; -// flex: 0 0 0%; -// width: fit-content; -// min-width: fit-content; -// background: $blue_QDD; -// text-align: center; -// transform: translateX(0); -// transition: transform 0.3s ease-in-out; -// z-index: 10; -// position: fixed; -// right: 0; -// border-radius: 11px; -// padding: 0.5rem 0.5rem 0 0.5rem; -// margin: 1rem; - -// @media (max-width: 660px) { -// padding-right: 0; -// } -// } - -// /* =========================== -// NAVIGATION (COLONNE DROITE) -// =========================== */ - -// .header_nav_container { -// flex: 0 0 0%; -// width: 100%; -// min-width: fit-content; - -// background: $blue_QDD; -// text-align: center; -// display: flex; -// flex-direction: column; - -// z-index: -1; -// transform: translateX(0); -// transition: -// flex-basis 0.9s ease-in-out, -// width 0.9s ease-in-out, -// transform 0.3s ease-in-out; - -// @media (max-width: 810px) { -// height: 200px; -// top: -30px; -// flex: 1 0 100%; -// position: relative; -// } - -// @media (max-width: 500px) { -// flex: 0 0 40%; -// } - -// /* ---- Bloc menu principal ---- */ -// #block-quartiers-de-demain-entete { -// margin: auto; - -// h2 { -// display: none; -// } - -// ul { -// display: flex; -// flex-direction: column; -// align-items: flex-start; -// position: relative; -// padding-left: 1rem; -// padding-right: 1rem; -// margin: auto; - -// @media (max-width: 1025px) { -// top: 0; -// align-items: center; -// padding-top: 0.3rem; -// } - -// li { -// width: 100%; -// text-align: left; - -// .is-active { -// font-family: "gilroy-bold"; -// } - -// :hover { -// font-family: "gilroy-bold"; -// } - -// @media (max-width: 1090px) { -// padding-top: 0.3rem; -// } - -// @media (max-width: 810px) { -// line-height: 1.3rem; -// } - -// a { -// text-transform: uppercase; -// color: white; -// font-size: 0.5rem; - -// @media (max-width: 1090px) { -// font-size: 0.6rem; -// } - -// @media (max-width: 810px) { -// display: flex; -// flex-direction: column; -// align-items: center; -// font-size: 0.8rem; -// } -// } -// } -// } -// } - -// /* ---- Sélecteur de langue en bas du menu ---- */ -// #block-quartiers-de-demain-selecteurdelangue { -// width: fit-content; -// margin: auto; - -// @media (max-width: 810px) { -// padding-bottom: 0.5rem; -// margin-bottom: 0.5rem; - -// .links { -// margin-top: 0.5rem; -// } -// } -// } -// } - -// /* =========================== -// ÉTATS D’AFFICHAGE DU MENU -// (pilotés en JS avec .nav-hidden) -// =========================== */ - -// /* État par défaut : menu visible */ -// .header_nav_container { -// transform: translateX(0); -// } - -// /* Menu caché : desktop → slide vers la gauche */ -// .header_nav_container.nav-hidden { -// transform: translateX(-100%); -// } - -// /* Spécifique mobile : on slide verticalement */ -// @media (max-width: 810px) { -// .header_nav_container { -// transform: translateY(0); -// } - -// .header_nav_container.nav-hidden { -// transform: translateY(-100%); -// } -// } -// } - -// /* =========================== -// HEADER "SHRINK" AU SCROLL -// =========================== */ - -// .shrink { -// height: 260px; - -// @media (max-width: 810px) { -// height: 170px; -// } -// } - -// /* =========================== -// RÉGLAGES DE LA RÉPARTITION GAUCHE / DROITE -// (quand le header est à son état "final") -// =========================== */ - -// header[role="banner"] { -// .header_left_container { -// flex-basis: 65%; -// transform-origin: bottom right; - -// @media (max-width: 810px) { -// flex: 1 0 100%; -// } -// } - -// .header_nav_container { -// flex-basis: 30%; -// transform-origin: bottom right; -// min-width: fit-content; - -// @media (max-width: 810px) { -// flex: 1 0 100%; -// position: relative; -// } -// } -// } - /* =========================== @@ -474,19 +119,7 @@ #block-quartiers-de-demain-logoquartiersdedemain { margin: auto; - - .field_field_logo { - // width: 100%; - // margin: auto; - - // @media (max-width: 1650px) { - // width: 80%; - // } - - // .qdd-header { - // width: 100%; - // } - } + } img { @@ -495,17 +128,25 @@ height: calc($header-height - 3rem); padding: 2rem; transition: height 0.3s; - - @media (max-width: 891px) { - height: $header-height-pad; + @media (max-width: 1700px) { + // height: calc($header-height - 6rem); + } + @media (max-width: 1300px) { + // height: calc($header-height - 6rem); + } + @media (max-width: 1000px) { + height: calc($header-height-pad - 4rem); + // height: $header-height-pad; } @media (max-width: 660px) { + // height: calc($header-height-small - 6rem); height: $header-height-small; } @media (max-width: 450px) { - height: $header-height-ultrasmall; + // height: calc($header-height-ultrasmall - 3rem); + // height: $header-height-ultrasmall; } } }