taille logo header
This commit is contained in:
@@ -192,7 +192,7 @@ h2, h3 {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
padding-top: 200px;
|
padding-top: 200px;
|
||||||
padding-bottom: 3rem;
|
padding-bottom: 3rem;
|
||||||
min-height: calc(100vh - (200px + 3rem));
|
min-height: calc(100vh - (200px + 6rem));
|
||||||
}
|
}
|
||||||
@media (max-width: 810px) {
|
@media (max-width: 810px) {
|
||||||
.layout-container main {
|
.layout-container main {
|
||||||
@@ -387,9 +387,9 @@ header[role=banner] .header_left_container img {
|
|||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
transition: height 0.3s;
|
transition: height 0.3s;
|
||||||
}
|
}
|
||||||
@media (max-width: 891px) {
|
@media (max-width: 1000px) {
|
||||||
header[role=banner] .header_left_container img {
|
header[role=banner] .header_left_container img {
|
||||||
height: 160px;
|
height: calc(160px - 4rem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media (max-width: 660px) {
|
@media (max-width: 660px) {
|
||||||
@@ -397,11 +397,6 @@ header[role=banner] .header_left_container img {
|
|||||||
height: 70px;
|
height: 70px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media (max-width: 450px) {
|
|
||||||
header[role=banner] .header_left_container img {
|
|
||||||
height: 50px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
header[role=banner] .header_right_container {
|
header[role=banner] .header_right_container {
|
||||||
display: none;
|
display: none;
|
||||||
flex: 0 0 0%;
|
flex: 0 0 0%;
|
||||||
@@ -2518,18 +2513,6 @@ body {
|
|||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
font-weight: 800;
|
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) {
|
#home article.node-type-static #paragraph-id--6 .field_field_texte .colone-picto > p:nth-of-type(3) {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
align-self: center;
|
align-self: center;
|
||||||
|
|||||||
@@ -38,7 +38,7 @@ $width-menu-slidedown : 550px;
|
|||||||
padding-top: $header-height;
|
padding-top: $header-height;
|
||||||
padding-bottom: 3rem;
|
padding-bottom: 3rem;
|
||||||
// box-sizing:border-box;
|
// box-sizing:border-box;
|
||||||
min-height: calc(100vh - ($header-height + 3rem));
|
min-height: calc(100vh - ($header-height + 6rem));
|
||||||
@media(max-width: 810px){
|
@media(max-width: 810px){
|
||||||
padding-top: 180px;
|
padding-top: 180px;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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 {
|
#block-quartiers-de-demain-logoquartiersdedemain {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
|
||||||
.field_field_logo {
|
|
||||||
// width: 100%;
|
|
||||||
// margin: auto;
|
|
||||||
|
|
||||||
// @media (max-width: 1650px) {
|
|
||||||
// width: 80%;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .qdd-header {
|
|
||||||
// width: 100%;
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
@@ -495,17 +128,25 @@
|
|||||||
height: calc($header-height - 3rem);
|
height: calc($header-height - 3rem);
|
||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
transition: height 0.3s;
|
transition: height 0.3s;
|
||||||
|
@media (max-width: 1700px) {
|
||||||
@media (max-width: 891px) {
|
// height: calc($header-height - 6rem);
|
||||||
height: $header-height-pad;
|
}
|
||||||
|
@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) {
|
@media (max-width: 660px) {
|
||||||
|
// height: calc($header-height-small - 6rem);
|
||||||
height: $header-height-small;
|
height: $header-height-small;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 450px) {
|
@media (max-width: 450px) {
|
||||||
height: $header-height-ultrasmall;
|
// height: calc($header-height-ultrasmall - 3rem);
|
||||||
|
// height: $header-height-ultrasmall;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user