From 8f48d2330d42b80ac2b2b7f8380d84cad2ceb3fc Mon Sep 17 00:00:00 2001 From: Valentin Date: Mon, 18 Mar 2024 15:25:21 +0100 Subject: [PATCH 1/2] corrections header --- .../quartiers_de_demain/css/animated_logo.css | 6 +- .../css/quartiers_de_demain.css | 1379 ++++++++++------- .../css/quartiers_de_demain.css.map | 1 + .../quartiers_de_demain/js/animated_logo.js | 4 +- .../scss/pages/_presentation.scss | 2 +- .../scss/partials/_header.scss | 59 +- 6 files changed, 870 insertions(+), 581 deletions(-) create mode 100644 web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css.map diff --git a/web/themes/custom/quartiers_de_demain/css/animated_logo.css b/web/themes/custom/quartiers_de_demain/css/animated_logo.css index 524571c..45ae221 100644 --- a/web/themes/custom/quartiers_de_demain/css/animated_logo.css +++ b/web/themes/custom/quartiers_de_demain/css/animated_logo.css @@ -27,8 +27,7 @@ overflow: hidden; } - - svg { + #logo-animated svg { position: absolute; width: 100%; height: auto; @@ -36,7 +35,8 @@ top: 0; left: 0; } - img { + + #logo-animated img { position: absolute; opacity: 0; } diff --git a/web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css b/web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css index 9df10fa..60eac57 100644 --- a/web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css +++ b/web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css @@ -3,98 +3,100 @@ /* Colors used for quartiers_de_demain */ @media (min-width: 48rem) { :root { - font-size: calc(1rem + ((1vw - .48rem) * 1.389)); + font-size: calc(1rem + (1vw - 0.48rem) * 1.389); /* .48rem = viewportWidthMinimum /100 */ - /* 1.389rem = 100 * fontSizeDifference / viewportWidthDifference */ } } - + /* 1.389rem = 100 * fontSizeDifference / viewportWidthDifference */ + } +} @media (min-width: 120em) { :root { - font-size: 2rem; } } - + font-size: 2rem; + } +} /*marianne*/ @font-face { - font-family: 'Marianne'; + font-family: "Marianne"; src: url("../fonts/Marianne/Marianne-Thin.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Thin.woff") format("woff"); font-weight: 300; - font-style: normal; } - + font-style: normal; +} @font-face { - font-family: 'Marianne'; + font-family: "Marianne"; src: url("../fonts/Marianne/Marianne-Thin_Italic.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Thin_Italic.woff") format("woff"); font-weight: 300; - font-style: italic; } - + font-style: italic; +} @font-face { - font-family: 'Marianne'; + font-family: "Marianne"; src: url("../fonts/Marianne/Marianne-Light.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Light.woff") format("woff"); font-weight: 400; - font-style: normal; } - + font-style: normal; +} @font-face { - font-family: 'Marianne'; + font-family: "Marianne"; src: url("../fonts/Marianne/Marianne-Light_Italic.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Light_Italic.woff") format("woff"); font-weight: 400; - font-style: italic; } - + font-style: italic; +} @font-face { - font-family: 'Marianne'; + font-family: "Marianne"; src: url("../fonts/Marianne/Marianne-Regular.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Regular.woff") format("woff"); font-weight: 600; - font-style: normal; } - + font-style: normal; +} @font-face { - font-family: 'Marianne'; + font-family: "Marianne"; src: url("../fonts/Marianne/Marianne-Regular_Italic.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Regular_Italic.woff") format("woff"); font-weight: 600; - font-style: italic; } - + font-style: italic; +} @font-face { - font-family: 'Marianne'; + font-family: "Marianne"; src: url("../fonts/Marianne/Marianne-Medium.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Medium.woff") format("woff"); font-weight: 800; - font-style: normal; } - + font-style: normal; +} @font-face { - font-family: 'Marianne'; + font-family: "Marianne"; src: url("../fonts/Marianne/Marianne-Medium_Italic.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Medium_Italic.woff") format("woff"); font-weight: 800; - font-style: italic; } - + font-style: italic; +} @font-face { - font-family: 'Marianne'; + font-family: "Marianne"; src: url("../fonts/Marianne/Marianne-Bold.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Bold.woff") format("woff"); font-weight: 900; - font-style: normal; } - + font-style: normal; +} @font-face { - font-family: 'Marianne'; + font-family: "Marianne"; src: url("../fonts/Marianne/Marianne-Bold_Italic.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Bold_Italic.woff") format("woff"); font-weight: 900; - font-style: italic; } - + font-style: italic; +} @font-face { - font-family: 'Marianne'; + font-family: "Marianne"; src: url("../fonts/Marianne/Marianne-ExtraBold.woff2") format("woff2"), url("../fonts/Marianne/Marianne-ExtraBold.woff") format("woff"); font-weight: 1000; - font-style: normal; } - + font-style: normal; +} @font-face { - font-family: 'Marianne'; + font-family: "Marianne"; src: url("../fonts/Marianne/Marianne-ExtraBold_Italic.woff2") format("woff2"), url("../fonts/Marianne/Marianne-ExtraBold_Italic.woff") format("woff"); font-weight: 1000; - font-style: italic; } - + font-style: italic; +} /*Font Awesome*/ @font-face { - font-family: 'Font Awesome'; + font-family: "Font Awesome"; src: url("../fonts/Font Awesome/fontawesome-webfont.woff2") format("woff2"); font-weight: 400; - font-style: normal; } - + font-style: normal; +} .layout-container { position: relative; width: 100vw; - background-color: white; + background-color: rgb(255, 255, 255); font-family: "Marianne", sans-serif; font-weight: 400; font-style: normal; @@ -103,47 +105,61 @@ left: 0%; overflow: hidden; display: flex; - flex-flow: row wrap; } - .layout-container header { - flex: 0 0 100%; } - .layout-container footer { - flex: 0 0 100%; } - .layout-container main { - width: 100%; - display: grid; - grid-template-columns: repeat(12, 1fr); } - .layout-container .content_container { - display: grid; - grid-template-columns: repeat(12, 1fr); } + flex-flow: row wrap; +} +.layout-container header { + flex: 0 0 100%; +} +.layout-container footer { + flex: 0 0 100%; +} +.layout-container main { + width: 100%; + display: grid; + grid-template-columns: repeat(12, 1fr); +} +.layout-container .content_container { + display: grid; + grid-template-columns: repeat(12, 1fr); +} .layout-content { - grid-column: 1 / span 12; - padding-top: 150px; } + grid-column: 1/span 12; + padding-top: 150px; +} /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */ ul { - list-style-type: none; } + list-style-type: none; +} a { - text-decoration: none; } + text-decoration: none; +} :link { - color: black; } + color: black; +} :visited { - color: black; } + color: black; +} html.js body { - margin: 0 !important; } + margin: 0 !important; +} html.js body div.dialog-off-canvas-main-canvas div.layout-container { - margin: 0 !important; } + margin: 0 !important; +} svg.mailto { - display: none; } + display: none; +} svg.ext { - display: none; } + display: none; +} /*partials*/ header { @@ -151,551 +167,778 @@ header { grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(3, 1fr); height: 150px; - background-color: white; + background-color: rgb(255, 255, 255); z-index: 99; width: 100vw; max-width: 100vw; position: fixed; top: 0; - border-bottom: 1px solid #808080; } - @media (max-width: 810px) { - header { - height: 110px; } } - @media (max-width: 660px) { - header { - height: 70px; } } - @media (max-width: 450px) { - header { - display: flex; - height: 50px; } } - header .contextual-region { - width: max-content; } - header .header_left_container { - grid-column: 1 /span 11; - grid-row: 1 /span 3; + border-bottom: 1px solid #808080; +} +@media (max-width: 810px) { + header { + height: 110px; + } +} +@media (max-width: 660px) { + header { + height: 70px; + } +} +@media (max-width: 450px) { + header { display: flex; - flex-direction: row; - border-right: 1px solid #808080; - padding-left: 2%; - padding-right: 2%; } - @media (max-width: 660px) { - header .header_left_container { - height: inherit; } } - @media (max-width: 891px) { - header .header_left_container #block-quartiers-de-demain-logorepu-2 { - height: 110px; } } - header .header_left_container #block-quartiers-de-demain-logoepau-2 { - height: 150px; } - @media (max-width: 891px) { - header .header_left_container #block-quartiers-de-demain-logoepau-2 { - height: 110px; } } - header .header_left_container #block-quartiers-de-demain-logoquartiersdedemain { - margin-left: auto; } - header .header_left_container img { - width: auto; - height: 150px; } - @media (max-width: 891px) { - header .header_left_container img { - height: 110px; } } - @media (max-width: 660px) { - header .header_left_container img { - height: 70px; } } - @media (max-width: 450px) { - header .header_left_container img { - height: 50px; } } + height: 50px; + } +} +header .contextual-region { + width: max-content; +} +header .header_left_container { + grid-column: 1/span 11; + grid-row: 1/span 3; + display: grid; + grid-template-columns: repeat(10, 1fr); + border-right: 1px solid #808080; + padding-left: 2%; + padding-right: 2%; +} +@media (max-width: 660px) { + header .header_left_container { + height: inherit; + } +} +header .header_left_container #block-quartiers-de-demain-logorepu-2 { + height: 100%; + grid-column: 1/span 1; +} +header .header_left_container #block-quartiers-de-demain-logoepau-2 { + height: 100%; + grid-column: 2/span 3; + padding-left: 2rem; +} +@media (max-width: 891px) { + header .header_left_container #block-quartiers-de-demain-logoepau-2 { + grid-column: 2/span 5; + } +} +header .header_left_container #block-quartiers-de-demain-logoepau-2 > div { + width: 100%; + height: 100%; +} +header .header_left_container #block-quartiers-de-demain-logoepau-2 > div > a { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; +} +header .header_left_container #block-quartiers-de-demain-logoepau-2 > div > a > img { + width: 100%; + height: auto; +} +header .header_left_container #block-quartiers-de-demain-logoquartiersdedemain { + grid-column: 8/span 3; + margin-left: auto; +} +header .header_left_container #block-quartiers-de-demain-logoquartiersdedemain > div { + width: 100%; + height: 100%; +} +header .header_left_container #block-quartiers-de-demain-logoquartiersdedemain > div > a { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; +} +header .header_left_container #block-quartiers-de-demain-logoquartiersdedemain > div > a > img { + padding-left: 4rem; + width: 100%; + height: auto; +} +@media (max-width: 891px) { + header .header_left_container #block-quartiers-de-demain-logoquartiersdedemain > div > a > img { + padding: 0; + } +} +header .header_left_container img { + width: auto; + height: 150px; +} +@media (max-width: 891px) { + header .header_left_container img { + height: 110px; + } +} +@media (max-width: 660px) { + header .header_left_container img { + height: 70px; + } +} +@media (max-width: 450px) { + header .header_left_container img { + height: 50px; + } +} +header .header_right_container { + padding-left: 25%; +} +@media (max-width: 660px) { header .header_right_container { - padding-left: calc(100% /4); } - @media (max-width: 660px) { - header .header_right_container { - padding-right: 0; } } - header .header_right_container .language-switcher-language-url { - text-transform: uppercase; } - header .header_right_container .language-switcher-language-url ul { - display: flex; - flex-direction: row; - font-size: 0.8rem; - padding: 0; } - @media (max-width: 660px) { - header .header_right_container .language-switcher-language-url ul { - margin-bottom: 0; } } - header .header_right_container .language-switcher-language-url ul li:nth-child(1)::after { - content: "/"; } - header .header_right_container .language-switcher-language-url ul .is-active { - font-weight: 600; } - header .header_nav_container { - display: none; - grid-row: 3; - grid-column: 1 /span 12; - position: absolute; - top: 100%; - width: 100%; - background: #e8ebf4; - border-bottom: 1px solid #808080; - border-top: 1px solid #808080; - font-size: 1rem; - text-align: center; } - header .header_nav_container #block-quartiers-de-demain-entete { - grid-column: 1 /span 11; - order: 2; - margin: auto; } - header .header_nav_container #block-quartiers-de-demain-entete h2 { - display: none; } - header .display-nav-opened { - display: grid; - grid-template-columns: repeat(12, 1fr); - grid-gap: 10px; } - header .open-block, header .open-block.opened { - cursor: pointer; } - header .open-block span, header .open-block.opened span { - display: block; - width: 58px; - height: 2px; - position: relative; - background: black; - border-radius: 3px; - z-index: 1; } - @media (max-width: 660px) { - header .open-block span, header .open-block.opened span { - width: 25px; } } + padding-left: 0; + padding-right: 0; + } +} +header .header_right_container .language-switcher-language-url { + text-transform: uppercase; +} +header .header_right_container .language-switcher-language-url ul { + display: flex; + flex-direction: row; + font-size: 0.8rem; + padding: 0; +} +@media (max-width: 660px) { + header .header_right_container .language-switcher-language-url ul { + margin-bottom: 0; + } +} +header .header_right_container .language-switcher-language-url ul li:nth-child(1)::after { + content: "/"; +} +header .header_right_container .language-switcher-language-url ul .is-active { + font-weight: 600; +} +header .header_nav_container { + display: none; + grid-row: 3; + grid-column: 1/span 12; + position: absolute; + top: 100%; + width: 100%; + background: rgb(232, 235, 244); + border-bottom: 1px solid #808080; + border-top: 1px solid #808080; + font-size: 1rem; + text-align: center; +} +header .header_nav_container #block-quartiers-de-demain-entete { + grid-column: 1/span 11; + order: 2; + margin: auto; +} +header .header_nav_container #block-quartiers-de-demain-entete h2 { + display: none; +} +header .display-nav-opened { + display: grid; + grid-template-columns: repeat(12, 1fr); + grid-gap: 10px; +} +header .open-block, header .open-block.opened { + cursor: pointer; +} +header .open-block span, header .open-block.opened span { + display: block; + width: 58px; + height: 2px; + position: relative; + background: black; + border-radius: 3px; + z-index: 1; +} +@media (max-width: 660px) { + header .open-block span, header .open-block.opened span { + width: 25px; + } +} +header .open-block { + height: 100%; + display: grid; + align-items: center; + margin: auto; +} +@media (max-width: 450px) { header .open-block { - height: 100%; - display: grid; - align-items: center; - margin: auto; } - @media (max-width: 450px) { - header .open-block { - height: 50px; } } - header .open-block span { - margin-bottom: 13px; - transform-origin: 4px 0px; } - @media (max-width: 660px) { - header .open-block span { - margin-bottom: 5px; } } - header .open-block.opened { - margin: auto; } - header .open-block.opened span { - transform-origin: center; - margin-bottom: 0; } - header .open-block.opened > div > span:first-child { - transform: translateY(57%) rotate(45deg); } - header .open-block.opened > div > span:nth-child(2) { - transform: rotate(-45deg); } - header .open-block.opened > div > span:nth-child(3) { - display: none; } + height: 50px; + } +} +header .open-block span { + margin-bottom: 13px; + transform-origin: 4px 0px; +} +@media (max-width: 660px) { + header .open-block span { + margin-bottom: 5px; + } +} +header .open-block.opened { + margin: auto; +} +header .open-block.opened span { + transform-origin: center; + margin-bottom: 0; +} +header .open-block.opened > div > span:first-child { + transform: translateY(57%) rotate(45deg); +} +header .open-block.opened > div > span:nth-child(2) { + transform: rotate(-45deg); +} +header .open-block.opened > div > span:nth-child(3) { + display: none; +} footer span.totop { display: inline-flex; - width: 100vw; } - footer span.totop #toTop { - margin: auto; - background-color: #fff; - border-top-left-radius: 10%; - border-top-right-radius: 10%; - padding-bottom: 0.5rem; } - footer span.totop #toTop .arrow-up { - font-size: 1.7rem; - line-height: 2.5rem; - text-align: center; - width: 3rem; - height: 2rem; - display: inline-block; - text-align: top; } - footer span.totop #toTop .arrow-up::before { - content: url("../images/up-arrow.svg"); - width: 50%; } + width: 100vw; +} +footer span.totop #toTop { + margin: auto; + background-color: #fff; + border-top-left-radius: 10%; + border-top-right-radius: 10%; + padding-bottom: 0.5rem; +} +footer span.totop #toTop .arrow-up { + font-size: 1.7rem; + line-height: 2.5rem; + text-align: center; + width: 3rem; + height: 2rem; + display: inline-block; + text-align: top; +} +footer span.totop #toTop .arrow-up::before { + content: url("../images/up-arrow.svg"); + width: 50%; +} .footer { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(1, 1fr); - background-color: white; + background-color: rgb(255, 255, 255); padding-top: 1rem; padding-bottom: 1rem; - border-top: 1px solid #808080; } - .footer section { - width: fit-content; } - .footer h2, .footer ul { - margin: 0; } - @media (max-width: 891px) { - .footer { - display: flex; - flex-wrap: wrap; - justify-content: space-between; } } - @media (max-width: 600px) { - .footer { - flex-wrap: nowrap; } } - .footer #footer-left { - grid-column: 1 /span 5; - grid-row: 1; - padding-left: 5%; } - .footer #footer-left .footer_left_container { - display: flex; - flex-direction: row; } - .footer #footer-left .footer_left_container #block-quartiers-de-demain-logoepau { - height: 150px; } - @media (max-width: 891px) { - .footer #footer-left .footer_left_container #block-quartiers-de-demain-logoepau { - height: 110px; } } - .footer #footer-left .footer_left_container img { - width: auto; - height: 150px; } - @media (max-width: 891px) { - .footer #footer-left .footer_left_container img { - height: 110px; } } - @media (max-width: 660px) { - .footer #footer-left .footer_left_container img { - height: 70px; } } - @media (max-width: 450px) { - .footer #footer-left .footer_left_container img { - height: 50px; } } - .footer #footer-middle { - grid-column: 6 /span 7; - grid-row: 1; } - .footer #footer-middle #block-quartiers-de-demain-pieddepage ul li { - padding-bottom: 0.2rem; } - @media (max-width: 891px) { - .footer #footer-middle #block-quartiers-de-demain-pieddepage ul { - padding-left: 00.5rem; } } - .footer #footer-right { - grid-column: 10 / 12; - grid-row: 1; } - .footer #footer-right #block-quartiers-de-demain-socialmedialinks { - flex-direction: column; } - .footer #footer-right #block-quartiers-de-demain-socialmedialinks h2 { - display: flex; - flex-direction: column; - font-size: 0.8rem; - font-weight: 400; - padding-bottom: 0.6rem; } - .footer #footer-right #block-quartiers-de-demain-socialmedialinks h2::before { - content: "Nous contacter"; - padding-bottom: 0.6rem; - font-weight: 600; } - .footer #footer-right #block-quartiers-de-demain-socialmedialinks .fa-3x { - font-size: 2em; } - @media (max-width: 891px) { - .footer div { - flex-wrap: wrap; } } - @media (max-width: 520px) { - .footer div { - flex-direction: column; } } + border-top: 1px solid #808080; +} +.footer section { + width: fit-content; +} +.footer h2, .footer ul { + margin: 0; +} +@media (max-width: 891px) { + .footer { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + } +} +@media (max-width: 600px) { + .footer { + flex-wrap: nowrap; + } +} +.footer #footer-left { + grid-column: 1/span 5; + grid-row: 1; + padding-left: 5%; +} +.footer #footer-left .footer_left_container { + display: flex; + flex-direction: row; +} +.footer #footer-left .footer_left_container #block-quartiers-de-demain-logoepau { + height: 150px; +} +@media (max-width: 891px) { + .footer #footer-left .footer_left_container #block-quartiers-de-demain-logoepau { + height: 110px; + } +} +.footer #footer-left .footer_left_container img { + width: auto; + height: 150px; +} +@media (max-width: 891px) { + .footer #footer-left .footer_left_container img { + height: 110px; + } +} +@media (max-width: 660px) { + .footer #footer-left .footer_left_container img { + height: 70px; + } +} +@media (max-width: 450px) { + .footer #footer-left .footer_left_container img { + height: 50px; + } +} +.footer #footer-middle { + grid-column: 6/span 7; + grid-row: 1; +} +.footer #footer-middle #block-quartiers-de-demain-pieddepage ul li { + padding-bottom: 0.2rem; +} +@media (max-width: 891px) { + .footer #footer-middle #block-quartiers-de-demain-pieddepage ul { + padding-left: 0.5rem; + } +} +.footer #footer-right { + grid-column: 10/12; + grid-row: 1; +} +.footer #footer-right #block-quartiers-de-demain-socialmedialinks { + flex-direction: column; +} +.footer #footer-right #block-quartiers-de-demain-socialmedialinks h2 { + display: flex; + flex-direction: column; + font-size: 0.8rem; + font-weight: 400; + padding-bottom: 0.6rem; +} +.footer #footer-right #block-quartiers-de-demain-socialmedialinks h2::before { + content: "Nous contacter"; + padding-bottom: 0.6rem; + font-weight: 600; +} +.footer #footer-right #block-quartiers-de-demain-socialmedialinks .fa-3x { + font-size: 2em; +} +@media (max-width: 891px) { + .footer div { + flex-wrap: wrap; + } +} +@media (max-width: 520px) { + .footer div { + flex-direction: column; + } +} .layout-sidebar-first { width: 25%; position: fixed; left: 3%; top: 200px; - z-index: 98; } - @media (max-width: 891px) { - .layout-sidebar-first { - margin-left: 5%; - margin-top: 9rem; } } - @media (max-width: 500px) { - .layout-sidebar-first { - width: 80%; - margin-top: 3rem; } } - .layout-sidebar-first #toTop-aside { - margin: auto; - background-color: #fff; - border-top-left-radius: 10%; - border-top-right-radius: 10%; - padding-bottom: 0.5rem; } - .layout-sidebar-first #toTop-aside .arrow-up { - font-size: 1.7rem; - line-height: 2.5rem; - text-align: center; - width: 3rem; - height: 2rem; - display: inline-block; - text-align: top; } - .layout-sidebar-first #toTop-aside .arrow-up::before { - content: url(../images/up-arrow.svg); - width: 50%; } + z-index: 98; +} +@media (max-width: 891px) { + .layout-sidebar-first { + margin-left: 5%; + margin-top: 9rem; + } +} +@media (max-width: 500px) { + .layout-sidebar-first { + width: 80%; + margin-top: 3rem; + } +} +.layout-sidebar-first #toTop-aside { + margin: auto; + background-color: #fff; + border-top-left-radius: 10%; + border-top-right-radius: 10%; + padding-bottom: 0.5rem; +} +.layout-sidebar-first #toTop-aside .arrow-up { + font-size: 1.7rem; + line-height: 2.5rem; + text-align: center; + width: 3rem; + height: 2rem; + display: inline-block; + text-align: top; +} +.layout-sidebar-first #toTop-aside .arrow-up::before { + content: url(../images/up-arrow.svg); + width: 50%; +} +.layout-sidebar-first .sidebar_first_container { + display: flex; + flex-direction: column; + width: 50%; + font-weight: 400; +} +.layout-sidebar-first .sidebar_first_container .field-content { + margin-bottom: 0.5rem; + font-size: 0.6rem; +} +@media (max-width: 810px) { .layout-sidebar-first .sidebar_first_container { - display: flex; - flex-direction: column; - width: 50%; - font-weight: 400; } - .layout-sidebar-first .sidebar_first_container .field-content { - margin-bottom: 0.5rem; - font-size: 0.6rem; } - @media (max-width: 810px) { - .layout-sidebar-first .sidebar_first_container { - display: none; } } - .layout-sidebar-first .sidebar_first_container #block-quartiers-de-demain-views-block-statics-block-1 { - order: 1; - text-transform: uppercase; } + display: none; + } +} +.layout-sidebar-first .sidebar_first_container #block-quartiers-de-demain-views-block-statics-block-1 { + order: 1; + text-transform: uppercase; +} /*pages*/ .home footer span.totop { display: inline-flex; width: 100vw; - background: #e8ebf4; } + background: rgb(232, 235, 244); +} .partenaires .layout-content .content_container #block-quartiers-de-demain-titredepage { - grid-column: 3 /span 9; + grid-column: 3/span 9; grid-row: 1; - margin-top: 3rem; } - .partenaires .layout-content .content_container #block-quartiers-de-demain-titredepage h1 { - text-transform: uppercase; - color: #f7002b; - font-size: 1.6rem; - font-weight: 300; } - + margin-top: 3rem; +} +.partenaires .layout-content .content_container #block-quartiers-de-demain-titredepage h1 { + text-transform: uppercase; + color: rgb(247, 0, 43); + font-size: 1.6rem; + font-weight: 300; +} .partenaires .layout-content .content_container .views-element-container { - grid-column: 3 /span 9; - grid-row: 2; } + grid-column: 3/span 9; + grid-row: 2; +} +.partenaires .layout-content .content_container .views-element-container .node-type-partenaire { + width: 100%; + padding-bottom: 3rem; + display: grid; + grid-template-columns: repeat(9, 1fr); + grid-template-rows: repeat(auto-fill); +} +@media (max-width: 810px) { .partenaires .layout-content .content_container .views-element-container .node-type-partenaire { - width: 100%; - padding-bottom: 3rem; - display: grid; - grid-template-columns: repeat(9, 1fr); - grid-template-rows: repeat(auto-fill); } - @media (max-width: 810px) { - .partenaires .layout-content .content_container .views-element-container .node-type-partenaire { - display: flex; - flex-direction: column; } } - .partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_logo { - grid-column: 1 / 3; - grid-row: 1 /span 3; - padding-right: 1rem; - margin: auto; } - .partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_logo img { - object-fit: contain; - max-width: 200px; - max-height: 200px; } - .partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_title { - grid-column: 3 /span 8; - grid-row: 1; - font-weight: 500; - font-size: 0.6rem; - margin-left: 1rem; } - @media (max-width: 810px) { - .partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_title { - margin-left: 0; } } - .partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_body { - grid-column: 3 /span 8; - grid-row: 2; - margin-left: 1rem; } - @media (max-width: 810px) { - .partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_body { - margin-left: 0; } } - .partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien { - grid-column: 3 /span 8; - grid-row: 3; - border-bottom: 2px solid #0732c2; - width: fit-content; - padding-bottom: 0.5rem; - margin-left: 1rem; } - @media (max-width: 810px) { - .partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien { - margin-left: 0; } } - .partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien a { - display: inline-flex; - align-items: center; } - .partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien a svg { - display: none; } - .partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien a::before { - display: inline-block; - content: url("../images/noun-arrow-to-right.svg"); - padding-right: 0.5rem; - padding-top: 0.2rem; } + display: flex; + flex-direction: column; + } +} +.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_logo { + grid-column: 1/3; + grid-row: 1/span 3; + padding-right: 1rem; + margin: auto; +} +.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_logo img { + object-fit: contain; + max-width: 200px; + max-height: 200px; +} +.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_title { + grid-column: 3/span 8; + grid-row: 1; + font-weight: 500; + font-size: 0.6rem; + margin-left: 1rem; +} +@media (max-width: 810px) { + .partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_title { + margin-left: 0; + } +} +.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_body { + grid-column: 3/span 8; + grid-row: 2; + margin-left: 1rem; +} +@media (max-width: 810px) { + .partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_body { + margin-left: 0; + } +} +.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien { + grid-column: 3/span 8; + grid-row: 3; + border-bottom: 2px solid rgb(7, 50, 194); + width: fit-content; + padding-bottom: 0.5rem; + margin-left: 1rem; +} +@media (max-width: 810px) { + .partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien { + margin-left: 0; + } +} +.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien a { + display: inline-flex; + align-items: center; +} +.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien a svg { + display: none; +} +.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien a::before { + display: inline-block; + content: url("../images/noun-arrow-to-right.svg"); + padding-right: 0.5rem; + padding-top: 0.2rem; +} #presentation, #home { width: 100%; display: grid; grid-template-columns: repeat(12, 1fr); - padding-top: 3rem; } - #presentation #block-quartiers-de-demain-views-block-statics-fields-block-1, #home #block-quartiers-de-demain-views-block-statics-fields-block-1 { - order: 2; - border-top: 2px solid #0732c2; - padding-top: 0.3rem; } - #presentation #block-quartiers-de-demain-views-block-statics-fields-block-1 .views-field-field-pieces-jointes, #home #block-quartiers-de-demain-views-block-statics-fields-block-1 .views-field-field-pieces-jointes { - display: flex; - flex-direction: row; } - #presentation #block-quartiers-de-demain-views-block-statics-fields-block-1 .views-field-field-pieces-jointes::before, #home #block-quartiers-de-demain-views-block-statics-fields-block-1 .views-field-field-pieces-jointes::before { - content: url(../images/noun-arrow-download.svg); - padding-right: 00.3rem; } - #presentation #block-quartiers-de-demain-views-block-statics-fields-block-1 .views-field-field-pieces-jointes .field-content, #home #block-quartiers-de-demain-views-block-statics-fields-block-1 .views-field-field-pieces-jointes .field-content { - display: flex; - flex-direction: column; - font-size: 0.5rem; - font-weight: 800; } - #presentation #block-quartiers-de-demain-views-block-statics-fields-block-1 .views-field-field-pieces-jointes .field-content span, #home #block-quartiers-de-demain-views-block-statics-fields-block-1 .views-field-field-pieces-jointes .field-content span { - font-weight: 600; } + padding-top: 3rem; +} +#presentation #block-quartiers-de-demain-views-block-statics-fields-block-1, #home #block-quartiers-de-demain-views-block-statics-fields-block-1 { + order: 2; + border-top: 2px solid rgb(7, 50, 194); + padding-top: 0.3rem; +} +#presentation #block-quartiers-de-demain-views-block-statics-fields-block-1 .views-field-field-pieces-jointes, #home #block-quartiers-de-demain-views-block-statics-fields-block-1 .views-field-field-pieces-jointes { + display: flex; + flex-direction: row; +} +#presentation #block-quartiers-de-demain-views-block-statics-fields-block-1 .views-field-field-pieces-jointes::before, #home #block-quartiers-de-demain-views-block-statics-fields-block-1 .views-field-field-pieces-jointes::before { + content: url(../images/noun-arrow-download.svg); + padding-right: 0.3rem; +} +#presentation #block-quartiers-de-demain-views-block-statics-fields-block-1 .views-field-field-pieces-jointes .field-content, #home #block-quartiers-de-demain-views-block-statics-fields-block-1 .views-field-field-pieces-jointes .field-content { + display: flex; + flex-direction: column; + font-size: 0.5rem; + font-weight: 800; +} +#presentation #block-quartiers-de-demain-views-block-statics-fields-block-1 .views-field-field-pieces-jointes .field-content span, #home #block-quartiers-de-demain-views-block-statics-fields-block-1 .views-field-field-pieces-jointes .field-content span { + font-weight: 600; +} +#presentation .layout-content, #home .layout-content { + grid-row: 1; + order: 2; +} +@media (max-width: 500px) { #presentation .layout-content, #home .layout-content { - grid-row: 1; - order: 2; } - @media (max-width: 500px) { - #presentation .layout-content, #home .layout-content { - padding-top: 0; } } - #presentation .layout-content .content_container, #home .layout-content .content_container { - display: flex; - margin-bottom: 0; } - #presentation .layout-content .content_container #block-quartiers-de-demain-titredepage, #home .layout-content .content_container #block-quartiers-de-demain-titredepage { - display: none; } - #presentation .layout-content .content_container article.node-type-static, #home .layout-content .content_container article.node-type-static { - width: 100%; } - #presentation .layout-content .content_container article.node-type-static .field_body, #home .layout-content .content_container article.node-type-static .field_body { - padding-left: 20%; - padding-right: 20%; } - @media (max-width: 810px) { - #presentation .layout-content .content_container article.node-type-static .field_body, #home .layout-content .content_container article.node-type-static .field_body { - padding-left: 13%; - padding-right: 13%; } } - @media (max-width: 640px) { - #presentation .layout-content .content_container article.node-type-static .field_body, #home .layout-content .content_container article.node-type-static .field_body { - padding-left: 10%; - padding-right: 10%; } } - #presentation .layout-content .content_container article.node-type-static .field_body h2, #home .layout-content .content_container article.node-type-static .field_body h2 { - font-size: 0.8rem; - font-weight: 600; - margin-bottom: 0; } - #presentation .layout-content .content_container article.node-type-static .field_body img, #home .layout-content .content_container article.node-type-static .field_body img { - width: 100%; - height: auto; } - #presentation .layout-content .content_container article.node-type-static .paragraph, #home .layout-content .content_container article.node-type-static .paragraph { - padding-top: 2rem; - padding-bottom: 2rem; - padding-left: 20%; - padding-right: 20%; } - @media (max-width: 810px) { - #presentation .layout-content .content_container article.node-type-static .paragraph, #home .layout-content .content_container article.node-type-static .paragraph { - padding-left: 13%; - padding-right: 13%; } } - @media (max-width: 640px) { - #presentation .layout-content .content_container article.node-type-static .paragraph, #home .layout-content .content_container article.node-type-static .paragraph { - padding-left: 10%; - padding-right: 10%; } } - #presentation .layout-content .content_container article.node-type-static .field_field_textes .field_field_title, #home .layout-content .content_container article.node-type-static .field_field_textes .field_field_title { - text-transform: uppercase; - font-size: 1rem; - font-weight: 400; } - #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--1 .field_field_title, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--2 .field_field_title, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--6 .field_field_title, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_title, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_title, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--1 .field_field_title, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--2 .field_field_title, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--6 .field_field_title, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_title, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_title { - color: #0732c2; } - #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--3 .field_field_title, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--4 .field_field_title, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--3 .field_field_title, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--4 .field_field_title { - color: #f7002b; } - #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--1, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--2, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--3, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--4, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--6, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--1, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--2, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--3, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--4, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--6, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 { - background-color: #e8ebf4; } - #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--1, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--2, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--3, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--4, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--1, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--2, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--3, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--4 { - padding-top: 1rem; } - #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--1, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--2, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--3, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--1, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--2, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--3 { - padding-bottom: 1rem; } - #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 { - text-align: center; } - #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 { - display: flex; - flex-direction: column; } - #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_title, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_title { - width: 60%; - margin: auto; - padding-bottom: 1rem; } - #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_texte div:nth-child(2), #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_texte div:nth-child(2) { - display: flex; - flex-direction: row; } - @media (max-width: 500px) { - #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_texte div:nth-child(2), #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_texte div:nth-child(2) { - flex-direction: column; } } - #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_texte div:nth-child(2) p, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_texte div:nth-child(2) p { - display: flex; - flex-direction: column; - padding-right: 30px; - text-align: left; - color: #0732c2; - width: calc(100vw / 3); } - @media (max-width: 500px) { - #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_texte div:nth-child(2) p, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_texte div:nth-child(2) p { - padding-right: 0px; - text-align: center; } } - #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_texte div:nth-child(2) p img, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_texte div:nth-child(2) p img { - width: 70%; - height: auto; - padding-bottom: 1rem; } - #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 { - padding-bottom: 4rem; } - #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_title, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_title { - padding-bottom: 1rem; } - #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_texte div:nth-child(2), #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_texte div:nth-child(2) { - display: flex; - flex-direction: row; } - @media (max-width: 500px) { - #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_texte div:nth-child(2), #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_texte div:nth-child(2) { - flex-direction: column; } } - #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_texte div:nth-child(2) p, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_texte div:nth-child(2) p { - width: calc(100vw / 3); - padding-right: 30px; - text-align: left; } - @media (max-width: 500px) { - #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_texte div:nth-child(2) p, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_texte div:nth-child(2) p { - padding-right: 0px; - text-align: center; } } - #presentation .layout-content .content_container article.node-type-static .field_field_textes p, #home .layout-content .content_container article.node-type-static .field_field_textes p { - margin-bottom: 0; } - #presentation .layout-content .content_container article.node-type-static .field_field_textes .field_field_picto, #home .layout-content .content_container article.node-type-static .field_field_textes .field_field_picto { - height: auto; - float: inline-start; - padding-right: 0.5rem; } - #presentation .layout-content .content_container article.node-type-static .field_field_textes .field_field_picto img, #home .layout-content .content_container article.node-type-static .field_field_textes .field_field_picto img { - width: 40px; - height: auto; - margin: auto; } - @media (max-width: 891px) { - #presentation .layout-content .content_container article.node-type-static .field_field_textes .field_field_picto img, #home .layout-content .content_container article.node-type-static .field_field_textes .field_field_picto img { - width: 30px; } } - #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img { - width: -moz-available; - width: 100%; - height: auto; - z-index: 100; } - #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img:hover, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img:hover { - filter: brightness(75%); - transition: 0.2s; - cursor: url(../images/noun-loop-3037049.svg), auto; - cursor: zoom-in; - cursor: -moz-zoom-in; - cursor: -webkit-zoom-in; - z-index: 100; } - @media (max-width: 500px) { - #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img:hover, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img:hover { - filter: brightness(100%); } } - #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 .zoom_in, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 .zoom_in { - -ms-transform: scale(1.7); - /* IE 9 */ - -webkit-transform: scale(1.7); - /* Safari 3-8 */ - transform: scale(1.7); - max-width: 100vw; - overflow-x: scroll; - z-index: 100; } - #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 .zoom_in:hover, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 .zoom_in:hover { - filter: brightness(100%); - transition: 0.2s; - overflow-x: scroll; } + padding-top: 50px; + } +} +#presentation .layout-content .content_container, #home .layout-content .content_container { + display: flex; + margin-bottom: 0; +} +#presentation .layout-content .content_container #block-quartiers-de-demain-titredepage, #home .layout-content .content_container #block-quartiers-de-demain-titredepage { + display: none; +} +#presentation .layout-content .content_container article.node-type-static, #home .layout-content .content_container article.node-type-static { + width: 100%; +} +#presentation .layout-content .content_container article.node-type-static .field_body, #home .layout-content .content_container article.node-type-static .field_body { + padding-left: 20%; + padding-right: 20%; +} +@media (max-width: 810px) { + #presentation .layout-content .content_container article.node-type-static .field_body, #home .layout-content .content_container article.node-type-static .field_body { + padding-left: 13%; + padding-right: 13%; + } +} +@media (max-width: 640px) { + #presentation .layout-content .content_container article.node-type-static .field_body, #home .layout-content .content_container article.node-type-static .field_body { + padding-left: 10%; + padding-right: 10%; + } +} +#presentation .layout-content .content_container article.node-type-static .field_body h2, #home .layout-content .content_container article.node-type-static .field_body h2 { + font-size: 0.8rem; + font-weight: 600; + margin-bottom: 0; +} +#presentation .layout-content .content_container article.node-type-static .field_body img, #home .layout-content .content_container article.node-type-static .field_body img { + width: 100%; + height: auto; +} +#presentation .layout-content .content_container article.node-type-static .paragraph, #home .layout-content .content_container article.node-type-static .paragraph { + padding-top: 2rem; + padding-bottom: 2rem; + padding-left: 20%; + padding-right: 20%; +} +@media (max-width: 810px) { + #presentation .layout-content .content_container article.node-type-static .paragraph, #home .layout-content .content_container article.node-type-static .paragraph { + padding-left: 13%; + padding-right: 13%; + } +} +@media (max-width: 640px) { + #presentation .layout-content .content_container article.node-type-static .paragraph, #home .layout-content .content_container article.node-type-static .paragraph { + padding-left: 10%; + padding-right: 10%; + } +} +#presentation .layout-content .content_container article.node-type-static .field_field_textes .field_field_title, #home .layout-content .content_container article.node-type-static .field_field_textes .field_field_title { + text-transform: uppercase; + font-size: 1rem; + font-weight: 400; +} +#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--1 .field_field_title, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--2 .field_field_title, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--6 .field_field_title, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_title, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_title, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--1 .field_field_title, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--2 .field_field_title, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--6 .field_field_title, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_title, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_title { + color: rgb(7, 50, 194); +} +#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--3 .field_field_title, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--4 .field_field_title, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--3 .field_field_title, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--4 .field_field_title { + color: rgb(247, 0, 43); +} +#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--1, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--2, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--3, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--4, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--6, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--1, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--2, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--3, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--4, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--6, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 { + background-color: rgb(232, 235, 244); +} +#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--1, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--2, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--3, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--4, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--1, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--2, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--3, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--4 { + padding-top: 1rem; +} +#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--1, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--2, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--3, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--1, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--2, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--3 { + padding-bottom: 1rem; +} +#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 { + text-align: center; +} +#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 { + display: flex; + flex-direction: column; +} +#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_title, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_title { + width: 60%; + margin: auto; + padding-bottom: 1rem; +} +#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_texte div:nth-child(2), #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_texte div:nth-child(2) { + display: flex; + flex-direction: row; +} +@media (max-width: 500px) { + #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_texte div:nth-child(2), #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_texte div:nth-child(2) { + flex-direction: column; + } +} +#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_texte div:nth-child(2) p, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_texte div:nth-child(2) p { + display: flex; + flex-direction: column; + padding-right: 30px; + text-align: left; + color: rgb(7, 50, 194); + width: 33.3333333333vw; +} +@media (max-width: 500px) { + #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_texte div:nth-child(2) p, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_texte div:nth-child(2) p { + padding-right: 0px; + text-align: center; + } +} +#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_texte div:nth-child(2) p img, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_texte div:nth-child(2) p img { + width: 70%; + height: auto; + padding-bottom: 1rem; +} +#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 { + padding-bottom: 4rem; +} +#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_title, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_title { + padding-bottom: 1rem; +} +#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_texte div:nth-child(2), #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_texte div:nth-child(2) { + display: flex; + flex-direction: row; +} +@media (max-width: 500px) { + #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_texte div:nth-child(2), #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_texte div:nth-child(2) { + flex-direction: column; + } +} +#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_texte div:nth-child(2) p, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_texte div:nth-child(2) p { + width: 33.3333333333vw; + padding-right: 30px; + text-align: left; +} +@media (max-width: 500px) { + #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_texte div:nth-child(2) p, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_texte div:nth-child(2) p { + padding-right: 0px; + text-align: center; + } +} +#presentation .layout-content .content_container article.node-type-static .field_field_textes p, #home .layout-content .content_container article.node-type-static .field_field_textes p { + margin-bottom: 0; +} +#presentation .layout-content .content_container article.node-type-static .field_field_textes .field_field_picto, #home .layout-content .content_container article.node-type-static .field_field_textes .field_field_picto { + height: auto; + float: inline-start; + padding-right: 0.5rem; +} +#presentation .layout-content .content_container article.node-type-static .field_field_textes .field_field_picto img, #home .layout-content .content_container article.node-type-static .field_field_textes .field_field_picto img { + width: 40px; + height: auto; + margin: auto; +} +@media (max-width: 891px) { + #presentation .layout-content .content_container article.node-type-static .field_field_textes .field_field_picto img, #home .layout-content .content_container article.node-type-static .field_field_textes .field_field_picto img { + width: 30px; + } +} +#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img { + width: -moz-available; + width: 100%; + height: auto; + z-index: 100; +} +#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img:hover, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img:hover { + filter: brightness(75%); + transition: 0.2s; + cursor: url(../images/noun-loop-3037049.svg), auto; + cursor: zoom-in; + cursor: -moz-zoom-in; + cursor: -webkit-zoom-in; + z-index: 100; +} +@media (max-width: 500px) { + #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img:hover, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img:hover { + filter: brightness(100%); + } +} +#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 .zoom_in, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 .zoom_in { + -ms-transform: scale(1.7); /* IE 9 */ + -webkit-transform: scale(1.7); /* Safari 3-8 */ + transform: scale(1.7); + max-width: 100vw; + overflow-x: scroll; + z-index: 100; +} +#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 .zoom_in:hover, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 .zoom_in:hover { + filter: brightness(100%); + transition: 0.2s; + overflow-x: scroll; +} .presentation footer span.totop { display: inline-flex; width: 100vw; - background: #e8ebf4; } + background: rgb(232, 235, 244); +} .node-type-static .layout-content { - grid-row: 1; } - .node-type-static .layout-content .content_container { - margin-bottom: 3rem; } - .node-type-static .layout-content .content_container #block-quartiers-de-demain-titredepage { - grid-column: 3 /span 9; - grid-row: 1; - margin-top: 3rem; } - .node-type-static .layout-content .content_container #block-quartiers-de-demain-titredepage h1 { - text-transform: uppercase; - color: #f7002b; - font-size: 1.6rem; - font-weight: 300; } - .node-type-static .layout-content .content_container article.node-type-static { - grid-column: 3 /span 9; - grid-row: 2; } - .node-type-static .layout-content .content_container article.node-type-static div.field_body h2 { - font-size: 0.8rem; - font-weight: 600; - margin-bottom: 0; } - .node-type-static .layout-content .content_container article.node-type-static div.field_body p { - margin-top: 0; } + grid-row: 1; +} +.node-type-static .layout-content .content_container { + margin-bottom: 3rem; +} +.node-type-static .layout-content .content_container #block-quartiers-de-demain-titredepage { + grid-column: 3/span 9; + grid-row: 1; + margin-top: 3rem; +} +.node-type-static .layout-content .content_container #block-quartiers-de-demain-titredepage h1 { + text-transform: uppercase; + color: rgb(247, 0, 43); + font-size: 1.6rem; + font-weight: 300; +} +.node-type-static .layout-content .content_container article.node-type-static { + grid-column: 3/span 9; + grid-row: 2; +} +.node-type-static .layout-content .content_container article.node-type-static div.field_body h2 { + font-size: 0.8rem; + font-weight: 600; + margin-bottom: 0; +} +.node-type-static .layout-content .content_container article.node-type-static div.field_body p { + margin-top: 0; +} + +/*# sourceMappingURL=quartiers_de_demain.css.map */ diff --git a/web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css.map b/web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css.map new file mode 100644 index 0000000..fe4c24e --- /dev/null +++ b/web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../scss/quartiers_de_demain.scss","../scss/global/variables/_colors.scss","../scss/global/variables/_core.scss","../scss/global/_fonts.scss","../scss/global/_layout.scss","../scss/global/variables/_typography.scss","../scss/global/_reset.scss","../scss/partials/_header.scss","../scss/partials/_footer.scss","../scss/partials/_aside.scss","../scss/pages/_home.scss","../scss/pages/_partenaires.scss","../scss/pages/_presentation.scss","../scss/pages/_static.scss"],"names":[],"mappings":"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","file":"quartiers_de_demain.css"} \ No newline at end of file diff --git a/web/themes/custom/quartiers_de_demain/js/animated_logo.js b/web/themes/custom/quartiers_de_demain/js/animated_logo.js index f31768a..9f08b13 100644 --- a/web/themes/custom/quartiers_de_demain/js/animated_logo.js +++ b/web/themes/custom/quartiers_de_demain/js/animated_logo.js @@ -1,14 +1,14 @@ function setLogoContainerSize() { let svgContainer = document.querySelector('#logo-animated'); - let svgElement = document.querySelector('svg'); + let svgElement = document.querySelector('#logo-animated svg'); svgContainer.style.height = `${svgElement.clientHeight}px`; } setLogoContainerSize(); window.addEventListener('resize', setLogoContainerSize); - let chemins = document.querySelectorAll('path'); + let chemins = document.querySelectorAll('#logo-animated svg path'); for (let chemin of chemins) { let length = chemin.getTotalLength(); chemin.style.strokeDasharray = length; diff --git a/web/themes/custom/quartiers_de_demain/scss/pages/_presentation.scss b/web/themes/custom/quartiers_de_demain/scss/pages/_presentation.scss index 48525f0..44e54f1 100644 --- a/web/themes/custom/quartiers_de_demain/scss/pages/_presentation.scss +++ b/web/themes/custom/quartiers_de_demain/scss/pages/_presentation.scss @@ -31,7 +31,7 @@ grid-row: 1; order: 2; @media (max-width:500px) { - padding-top: 0; + padding-top: 50px; } .content_container{ display: flex; diff --git a/web/themes/custom/quartiers_de_demain/scss/partials/_header.scss b/web/themes/custom/quartiers_de_demain/scss/partials/_header.scss index 5580072..d38f0fc 100644 --- a/web/themes/custom/quartiers_de_demain/scss/partials/_header.scss +++ b/web/themes/custom/quartiers_de_demain/scss/partials/_header.scss @@ -29,8 +29,11 @@ header{ .header_left_container{ grid-column: 1 /span 11; grid-row: 1 /span 3; - display: flex; - flex-direction: row; +// display: flex; +// flex-direction: row; + display: grid; + + grid-template-columns: repeat(10, 1fr); border-right: 1px solid #808080; padding-left: 2%; padding-right: 2%; @@ -39,19 +42,60 @@ header{ } #block-quartiers-de-demain-logorepu-2{ - @media(max-width: 891px){ - height: $header-height-pad; - } + height: 100%; + grid-column: 1 / span 1; +// @media(max-width: 891px){ +// height: $header-height-pad; +// } } #block-quartiers-de-demain-logoepau-2{ - height: $header-height; + height: 100%; + grid-column: 2 / span 3; +// height: $header-height; + padding-left: 2rem; @media(max-width: 891px){ - height: $header-height-pad; +// height: $header-height-pad; + grid-column: 2 / span 5; + } + > div { + width: 100%; + height: 100%; + > a { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + > img { + width: 100%; + height: auto; + } + } } } #block-quartiers-de-demain-logoquartiersdedemain{ + grid-column: 8 / span 3; margin-left: auto; // padding-right: 5%; + > div { + width: 100%; + height: 100%; + > a { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + > img { + padding-left: 4rem; + width: 100%; + height: auto; + @media(max-width: 891px){ + padding: 0; + } + } + } + } } img{ width: auto; @@ -71,6 +115,7 @@ header{ // padding-right: 30%; padding-left: calc(100% /4); @media(max-width: 660px){ + padding-left: 0; padding-right: 0; } .language-switcher-language-url{ From f8df887441ad700c2bf27d1b89b67b3d660adee7 Mon Sep 17 00:00:00 2001 From: Valentin Date: Mon, 18 Mar 2024 15:38:15 +0100 Subject: [PATCH 2/2] corrections footer --- .../css/quartiers_de_demain.css | 48 ++++++++++++++----- .../css/quartiers_de_demain.css.map | 2 +- .../scss/partials/_footer.scss | 28 +++++++++-- 3 files changed, 61 insertions(+), 17 deletions(-) diff --git a/web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css b/web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css index 60eac57..4b90057 100644 --- a/web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css +++ b/web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css @@ -423,6 +423,14 @@ footer span.totop #toTop .arrow-up::before { padding-top: 1rem; padding-bottom: 1rem; border-top: 1px solid #808080; + /* @media(max-width: 891px){ + display: flex; + flex-wrap: wrap; + justify-content: space-between; + } + @media(max-width: 600px){ + flex-wrap: nowrap; + } */ } .footer section { width: fit-content; @@ -430,27 +438,20 @@ footer span.totop #toTop .arrow-up::before { .footer h2, .footer ul { margin: 0; } -@media (max-width: 891px) { - .footer { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - } -} -@media (max-width: 600px) { - .footer { - flex-wrap: nowrap; - } -} .footer #footer-left { grid-column: 1/span 5; grid-row: 1; - padding-left: 5%; } .footer #footer-left .footer_left_container { + padding-left: 5%; display: flex; flex-direction: row; } +@media (max-width: 891px) { + .footer #footer-left .footer_left_container { + max-width: 50vw; + } +} .footer #footer-left .footer_left_container #block-quartiers-de-demain-logoepau { height: 150px; } @@ -459,6 +460,27 @@ footer span.totop #toTop .arrow-up::before { height: 110px; } } +.footer #footer-left .footer_left_container #block-quartiers-de-demain-logoepau > div { + width: 100%; + height: 100%; +} +.footer #footer-left .footer_left_container #block-quartiers-de-demain-logoepau > div > a { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; +} +.footer #footer-left .footer_left_container #block-quartiers-de-demain-logoepau > div > a > img { + padding: 0 2rem; + width: 100%; + height: auto; +} +@media (max-width: 891px) { + .footer #footer-left .footer_left_container #block-quartiers-de-demain-logoepau > div > a > img { + padding: 0; + } +} .footer #footer-left .footer_left_container img { width: auto; height: 150px; diff --git a/web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css.map b/web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css.map index fe4c24e..0196fa5 100644 --- a/web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css.map +++ b/web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/quartiers_de_demain.scss","../scss/global/variables/_colors.scss","../scss/global/variables/_core.scss","../scss/global/_fonts.scss","../scss/global/_layout.scss","../scss/global/variables/_typography.scss","../scss/global/_reset.scss","../scss/partials/_header.scss","../scss/partials/_footer.scss","../scss/partials/_aside.scss","../scss/pages/_home.scss","../scss/pages/_partenaires.scss","../scss/pages/_presentation.scss","../scss/pages/_static.scss"],"names":[],"mappings":"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","file":"quartiers_de_demain.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/quartiers_de_demain.scss","../scss/global/variables/_colors.scss","../scss/global/variables/_core.scss","../scss/global/_fonts.scss","../scss/global/_layout.scss","../scss/global/variables/_typography.scss","../scss/global/_reset.scss","../scss/partials/_header.scss","../scss/partials/_footer.scss","../scss/partials/_aside.scss","../scss/pages/_home.scss","../scss/pages/_partenaires.scss","../scss/pages/_presentation.scss","../scss/pages/_static.scss"],"names":[],"mappings":"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","file":"quartiers_de_demain.css"} \ No newline at end of file diff --git a/web/themes/custom/quartiers_de_demain/scss/partials/_footer.scss b/web/themes/custom/quartiers_de_demain/scss/partials/_footer.scss index 2557470..1546d65 100644 --- a/web/themes/custom/quartiers_de_demain/scss/partials/_footer.scss +++ b/web/themes/custom/quartiers_de_demain/scss/partials/_footer.scss @@ -43,20 +43,23 @@ footer{ section{width: fit-content;} h2, ul{margin: 0;} border-top: 1px solid #808080; - @media(max-width: 891px){ +/* @media(max-width: 891px){ display: flex; flex-wrap: wrap; justify-content: space-between; } @media(max-width: 600px){ flex-wrap: nowrap; - } + } */ #footer-left{ grid-column: 1 /span 5; grid-row: 1; - padding-left: 5%; .footer_left_container{ + padding-left: 5%; + @media(max-width: 891px){ + max-width: 50vw; + } display: flex; flex-direction: row; @@ -65,6 +68,25 @@ footer{ @media(max-width: 891px){ height: $header-height-pad; } + > div { + width: 100%; + height: 100%; + > a { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + > img { + padding: 0 2rem; + width: 100%; + height: auto; + @media(max-width: 891px){ + padding: 0; + } + } + } + } } img{ width: auto;