From 1b7a447d9c270039d06f0550ac644b67a39133c0 Mon Sep 17 00:00:00 2001 From: ouidade Date: Tue, 29 Oct 2024 15:46:30 +0100 Subject: [PATCH] page site design --- .../assets/css/carte-interactive-qdd.scss | 2 +- .../dist/assets/css/bundle.css | 37 +++++++++++-------- .../dist/assets/img/next.svg | 4 +- .../dist/assets/img/prev.svg | 4 +- .../src/assets/scss/global/_layout.scss | 2 +- .../src/assets/scss/pages/node-type-site.scss | 33 +++++++++++------ 6 files changed, 48 insertions(+), 34 deletions(-) diff --git a/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.scss b/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.scss index 8d08ed7..a9f7b30 100644 --- a/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.scss +++ b/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.scss @@ -3,7 +3,7 @@ src: url('../css/fonts/Gilroy/gilroy-semibold-webfont.woff') format('woff'); } #sites-map-container { - background-color: #cecfcc; + background-color: #f6f7f3; text-align: center; position: relative; width: 100%; /* Prend toute la largeur du conteneur parent */ 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 d15e701..dd1cb63 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 @@ -193,7 +193,7 @@ h2 { } .layout-container main { width: 100%; - padding-top: 280px; + padding-top: 200px; } @media (max-width: 810px) { .layout-container main { @@ -291,7 +291,7 @@ header .header_left_container #block-quartiers-de-demain-logorepu-2 { } header .header_left_container #block-quartiers-de-demain-logoepau-2 { display: none; - height: 280px; + height: 200px; } @media (max-width: 891px) { header .header_left_container #block-quartiers-de-demain-logoepau-2 { @@ -316,7 +316,7 @@ header .header_left_container #block-quartiers-de-demain-logoquartiersdedemain . header .header_left_container img { width: auto; margin: auto; - height: calc(280px - 1rem); + height: calc(200px - 1rem); padding: 2rem; transition: height 0.3s; /* Add transition for smooth resizing */ } @@ -459,7 +459,7 @@ header .header:hover + .header_nav_container { /* Taille définitive du header après l'animation */ .header--collapsed { - height: 280px; /* Ou la hauteur que vous souhaitez pour votre header */ + height: 200px; /* Ou la hauteur que vous souhaitez pour votre header */ width: 35%; transform-origin: bottom right; transition: all 1s ease-in-out; @@ -501,7 +501,7 @@ header .header:hover + .header_nav_container { } .header--collapsed-already { - height: 280px; /* Ou la hauteur que vous souhaitez pour votre header */ + height: 200px; /* Ou la hauteur que vous souhaitez pour votre header */ width: 35%; transform-origin: bottom right; transition: all 0s ease-in-out; @@ -2929,7 +2929,7 @@ body { .node-type-site .layout--threecol-25-50-25 .layout__region--first div #sites-map-container { position: fixed; width: auto; - left: 1.3rem; + left: 0.3rem; } @media (max-width: 500px) { .node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_documents) { @@ -2992,13 +2992,13 @@ body { padding-left: 0.2rem; } .node-type-site .layout--threecol-25-50-25 .layout__region--second { - width: 60%; + flex: 0 1 60% !important; } .node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second { display: flex; flex-direction: row; flex-wrap: wrap; - margin-left: 3.5rem; + margin-left: 0.5rem; } @media (max-width: 500px) { .node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second { @@ -3012,17 +3012,20 @@ body { font-family: "gilroy-semibold"; font-size: 1.3rem; } -.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_numero ::before { - content: url("../img/map_pointer.svg"); - top: 0.8rem; - position: relative; - padding-right: 0.5rem; +.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_numero { + display: none; } .node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_numero div::after { content: "-"; padding-left: 0.4rem; padding-right: 0.4rem; } +.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_title ::before { + content: url("../img/map_pointer.svg"); + top: 0.8rem; + position: relative; + padding-right: 0.5rem; +} .node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second div:has(.field_title) { align-content: end; } @@ -3062,6 +3065,7 @@ body { border-bottom: none; } .node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second div:has(.field_field_mots_clefs) { + display: none; margin-top: 1rem; flex: 0 0 25%; padding-left: 1rem; @@ -3114,8 +3118,8 @@ body { } .node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .paragraph--type--site-diapo .field_field_images .diaporama .cadre-img-zoom img { object-fit: cover; - width: 350px; - height: 230px; + width: 220px; + height: 145px; } .node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .paragraph--type--site-diapo .field_field_images .diaporama .image-field-caption { margin: 0; @@ -3126,6 +3130,7 @@ body { font-family: "gilroy-light"; } .node-type-site .layout--threecol-25-50-25 .layout__region--third { + flex: 0 1 15% !important; height: fit-content; } @media (max-width: 500px) { @@ -3227,7 +3232,7 @@ main { src: url("../css/fonts/Gilroy/gilroy-semibold-webfont.woff") format("woff"); } #sites-map-container { - background-color: #cecfcc; + background-color: #f6f7f3; text-align: center; position: relative; width: 100%; /* Prend toute la largeur du conteneur parent */ diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/next.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/next.svg index cc062bb..ba95883 100644 --- a/web/themes/custom/quartiers_de_demain/dist/assets/img/next.svg +++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/next.svg @@ -4,8 +4,8 @@ diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/prev.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/prev.svg index 7a171f6..699e5e6 100644 --- a/web/themes/custom/quartiers_de_demain/dist/assets/img/prev.svg +++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/prev.svg @@ -4,8 +4,8 @@ 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 190c643..6edf7b1 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,5 +1,5 @@ -$header-height : 280px; +$header-height : 200px; $header-height-pad : 160px; $header-height-small : 70px; $header-height-ultrasmall : 50px; diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-site.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-site.scss index 9ddac8a..e857fd6 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-site.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-site.scss @@ -36,7 +36,7 @@ #sites-map-container{ position: fixed; width: auto; - left: 1.3rem; + left: 0.3rem; } } div:has(.field_field_documents){ @@ -103,13 +103,13 @@ } } .layout__region--second{ - // flex: 0 1 60%; - width: 60%; + flex: 0 1 60% !important; + // width: 60%; .block-region-second{ display: flex; flex-direction: row; flex-wrap: wrap; - margin-left: 3.5rem; + margin-left: 0.5rem; @media(max-width: 500px){ margin-left: 0.5rem; margin-top: 1rem; @@ -121,12 +121,8 @@ font-size: 1.3rem; } .field_field_numero{ - ::before{ - content: url("../img/map_pointer.svg"); - top: 0.8rem; - position: relative; - padding-right: 0.5rem; - } + display: none; + div{ &::after{ content: "-"; @@ -136,8 +132,19 @@ } } + + .field_title{ + ::before{ + content: url("../img/map_pointer.svg"); + top: 0.8rem; + position: relative; + padding-right: 0.5rem; + } + } + div:has(.field_title){ align-content: end; + } .field_field_sous_titre{ @@ -184,6 +191,7 @@ } } div:has(.field_field_mots_clefs){ + display: none; margin-top: 1rem; flex: 0 0 25%; padding-left: 1rem; @@ -239,8 +247,8 @@ margin: auto; img{ object-fit: cover; - width: 350px; - height: 230px; + width: 220px; + height: 145px; } } .image-field-caption{ @@ -262,6 +270,7 @@ .layout__region--third{ + flex: 0 1 15% !important; height: fit-content; @media(max-width: 500px){ display: flex;