From 7981d2a13c3e88b2051dc8a1c7cb540f5f98fbef Mon Sep 17 00:00:00 2001 From: ouidade Date: Thu, 7 Nov 2024 15:07:09 +0100 Subject: [PATCH] taille et alignement map node-type-site --- .../custom/q2d_mod/assets/css/fontface.scss | 0 .../dist/assets/css/bundle.css | 26 ++++++++++++++++--- .../quartiers_de_demain.theme | 2 ++ .../src/assets/scss/pages/lessites.scss | 5 ++++ .../scss/partials/actu-caroussel-home.scss | 2 +- .../src/assets/scss/partials/header.scss | 22 +++++++++++++--- 6 files changed, 49 insertions(+), 8 deletions(-) create mode 100644 web/modules/custom/q2d_mod/assets/css/fontface.scss diff --git a/web/modules/custom/q2d_mod/assets/css/fontface.scss b/web/modules/custom/q2d_mod/assets/css/fontface.scss new file mode 100644 index 0000000..e69de29 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 dd7bf9f..02eacfa 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 @@ -333,7 +333,14 @@ header .header_left_container img { } header .header_right_container { display: none; - margin: auto; + flex: 0 0 0%; + width: 100%; + min-width: fit-content; + background: rgb(7, 50, 194); + text-align: center; + transform: translateX(0); + transition: transform 0.3s ease-in-out; + z-index: -1; } @media (max-width: 660px) { header .header_right_container { @@ -342,11 +349,12 @@ header .header_right_container { } header .header_right_container .language-switcher-language-url { text-transform: uppercase; + color: white; } header .header_right_container .language-switcher-language-url ul { display: flex; flex-direction: row; - font-size: 0.8rem; + font-size: 0.6rem; padding: 0; } @media (max-width: 660px) { @@ -360,6 +368,10 @@ header .header_right_container .language-switcher-language-url ul { margin: auto; } } +header .header_right_container .language-switcher-language-url ul li a { + color: white; + font-family: "gilroy-light"; +} header .header_right_container .language-switcher-language-url ul li:nth-child(1)::after { content: " / "; white-space: pre; @@ -370,7 +382,7 @@ header .header_right_container .language-switcher-language-url ul li:nth-child(1 } } header .header_right_container .language-switcher-language-url ul .is-active { - font-weight: 600; + font-family: "gilroy-bold"; } header .header_nav_container { flex: 0 0 0%; @@ -1375,7 +1387,7 @@ footer { height: 100%; } #actus-caroussel .content-actus .views-row article.node-type-actualite .field_field_images div div { - height: 100%; + height: 600px; } #actus-caroussel .content-actus .views-row article.node-type-actualite .field_field_images div div a { display: block; @@ -3230,6 +3242,10 @@ main { } #lessites .content_container .view .header_view #block-sitesmap-block { margin: auto; + width: 30vw; +} +#lessites .content_container .view .header_view #block-sitesmap-block #sites-map-container { + width: 100%; } @media (max-width: 810px) { #lessites .content_container .view .header_view #block-sitesmap-block #sites-map-container { @@ -3240,6 +3256,7 @@ main { display: flex; flex-direction: row; flex-wrap: wrap; + justify-content: center; width: 85%; margin: auto; gap: 20px; @@ -3247,6 +3264,7 @@ main { #lessites .content_container .view .views-row-wrapper .views-row { width: 18%; margin-bottom: 2rem; + font-size: 0.6rem; } @media (max-width: 810px) { #lessites .content_container .view .views-row-wrapper .views-row { diff --git a/web/themes/custom/quartiers_de_demain/quartiers_de_demain.theme b/web/themes/custom/quartiers_de_demain/quartiers_de_demain.theme index 9d5ae37..e6ea426 100644 --- a/web/themes/custom/quartiers_de_demain/quartiers_de_demain.theme +++ b/web/themes/custom/quartiers_de_demain/quartiers_de_demain.theme @@ -25,10 +25,12 @@ function quartiers_de_demain_preprocess_html(&$variables) { /** * Implements hook_preprocess_HOOK() for page.html.twig. */ + function quartiers_de_demain_preprocess_page(&$variables) { } + /** * Implements hook_preprocess_HOOK() for node.html.twig. */ diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/lessites.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/lessites.scss index 19bfea9..7566837 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/lessites.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/lessites.scss @@ -39,8 +39,10 @@ main{ #block-sitesmap-block{ margin: auto; + width: 30vw; #sites-map-container{ + width: 100%; @media(max-width: 810px){ height: 300px; } @@ -53,12 +55,15 @@ main{ display: flex; flex-direction: row; flex-wrap: wrap; + justify-content: center; width: 85%; margin: auto; gap: 20px; .views-row{ width: 18%; margin-bottom: 2rem; + font-size: 0.6rem ; + @media(max-width: 810px){ width: 45%; } diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/actu-caroussel-home.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/actu-caroussel-home.scss index c278818..4f44eac 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/actu-caroussel-home.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/actu-caroussel-home.scss @@ -43,7 +43,7 @@ div{ height: 100%; div{ - height: 100%; + height: 600px; a{ display: block; 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 f52440e..112562d 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 @@ -76,17 +76,28 @@ header{ } .header_right_container{ display: none; - margin: auto; + flex: 0 0 0%; + width: 100%; + min-width: fit-content; + background: $blue_QDD; + text-align: center; + transform: translateX(0); + transition: transform 0.3s ease-in-out; + z-index: -1 ; + @media(max-width: 660px){ padding-right: 0; } .language-switcher-language-url{ text-transform: uppercase; + color: white; + ul{ display: flex; flex-direction: row; - font-size: $font-normal; + font-size:0.6rem; padding: 0; + @media(max-width: 660px){ margin-bottom: 0; } @@ -95,6 +106,11 @@ header{ // margin-bottom: 0; margin: auto; } + li a { + color: white; + font-family: 'gilroy-light'; + + } li:nth-child(1){ &::after{ content: " / "; @@ -105,7 +121,7 @@ header{ } } .is-active{ - font-weight: 600; + font-family: 'gilroy-bold'; } } }