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 60ae10d..6105f96 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 @@ -133,6 +133,11 @@ h3 { overflow: hidden; display: flex; flex-flow: row wrap; + -webkit-user-select: none; + -webkit-touch-callout: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } .layout-container header { flex: 0 0 100%; @@ -886,4 +891,293 @@ footer span.totop #toTop .arrow-up::before { } #home .paragraph--type--static-parts:not(#paragraph-id--7) #svg1 { display: none; +} + +#consultation { + background-color: #f6f7f3; +} +#consultation .layout-content { + padding-top: 1rem; +} +#consultation .layout-content .content_container { + display: flex; + flex-direction: column; + align-items: center; +} +#consultation .layout-content .content_container #block-quartiers-de-demain-titredepage { + margin-top: 1rem; + width: fit-content; +} +#consultation .layout-content .content_container #block-quartiers-de-demain-titredepage h1 { + text-transform: none; + color: black; + font-size: 2rem; + font-weight: 500; +} +#consultation .layout-content .content_container .node-type-static { + width: 80%; +} +#consultation .layout-content .content_container .node-type-static::before { + content: ""; + display: block; + border-bottom: solid 1px rgb(7, 50, 194); + width: 60%; + margin: auto; +} +#consultation .layout-content .content_container .node-type-static .paragraph--type--static-parts:not(#paragraph-id--7) #svg1 { + display: none; +} +#consultation .layout-content .content_container .node-type-static #paragraph-id--10 { + display: flex; + flex-direction: column; + align-items: center; +} +#consultation .layout-content .content_container .node-type-static #paragraph-id--10 .field_field_title { + padding: 1rem; + color: rgb(7, 50, 194); + font-size: 2.5rem; + font-weight: 500; +} +#consultation .layout-content .content_container .node-type-static #paragraph-id--10 .colone-picto { + display: flex; + flex-direction: row; + flex-wrap: wrap; + padding: 1rem; +} +#consultation .layout-content .content_container .node-type-static #paragraph-id--10 .colone-picto p:not(:last-of-type) { + flex: 1 15%; + color: rgb(7, 50, 194); + padding: 0.5rem; +} +#consultation .layout-content .content_container .node-type-static #paragraph-id--10 .colone-picto p:not(:last-of-type)::before { + content: ""; + display: block; + border-left: solid 1px rgb(7, 50, 194); + height: 30%; + margin-bottom: 0.5rem; +} +#consultation .layout-content .content_container .node-type-static #paragraph-id--10 .colone-picto p:last-of-type { + color: black; + width: 55%; + padding-top: 3rem; + margin: auto; +} +#consultation .layout-content .content_container .node-type-static #paragraph-id--11 { + width: 65%; + background-color: white; + margin: auto; + display: flex; + flex-direction: column; + align-items: center; + padding: 1rem; +} +#consultation .layout-content .content_container .node-type-static #paragraph-id--11 .field_field_title { + color: rgb(7, 50, 194); + font-size: 1.2rem; + font-weight: 500; +} +#consultation .layout-content .content_container .node-type-static #paragraph-id--11 .colone-picto { + display: grid; + grid-template-columns: auto auto; + grid-template-rows: auto auto; + padding: 1rem; +} +#consultation .layout-content .content_container .node-type-static #paragraph-id--11 .colone-picto p { + flex: 1 15%; + padding: 0rem; + margin: 0; +} +#consultation .layout-content .content_container .node-type-static #paragraph-id--11 .colone-picto p:nth-of-type(1) { + grid-column: 1; + grid-row: 2; +} +#consultation .layout-content .content_container .node-type-static #paragraph-id--11 .colone-picto p:nth-of-type(2) { + grid-column: 2; + grid-row: 2; +} +#consultation .layout-content .content_container .node-type-static #paragraph-id--11 .colone-picto h5 { + font-size: 3rem; + font-weight: 500; + color: rgb(7, 50, 194); + margin: 0; + height: fit-content; +} +#consultation .layout-content .content_container .node-type-static #paragraph-id--11 .colone-picto h5:nth-of-type(1) { + grid-column: 1; + grid-row: 1; +} +#consultation .layout-content .content_container .node-type-static #paragraph-id--11 .colone-picto h5:nth-of-type(2) { + grid-column: 2; + grid-row: 1; +} +#consultation .layout-content .content_container .node-type-static #paragraph-id--12, +#consultation .layout-content .content_container .node-type-static #paragraph-id--13 { + width: 65%; + margin: auto; + display: flex; + flex-direction: column; + align-items: center; + padding: 1rem; +} +#consultation .layout-content .content_container .node-type-static #paragraph-id--12 .field_field_title, +#consultation .layout-content .content_container .node-type-static #paragraph-id--13 .field_field_title { + color: rgb(7, 50, 194); + font-size: 1.2rem; + font-weight: 500; + padding-bottom: 1.5rem; +} +#consultation .layout-content .content_container .node-type-static #paragraph-id--12::after { + content: ""; + display: block; + border-bottom: solid 1px rgb(7, 50, 194); + width: 100%; + padding-bottom: 2rem; +} +#consultation .layout-content .content_container .node-type-static #paragraph-id--13 .field_field_texte .colone-picto { + display: flex; + flex-direction: row; + justify-content: space-between; +} +#consultation .layout-content .content_container .node-type-static #paragraph-id--13 .field_field_texte .colone-picto p { + width: 30%; +} + +.partenaires .layout-content .content_container #block-quartiers-de-demain-titredepage { + grid-column: 3/span 9; + grid-row: 1; + margin-top: 3rem; +} +@media (max-width: 500px) { + .partenaires .layout-content .content_container #block-quartiers-de-demain-titredepage { + margin-top: 1rem; + grid-column: 2/span 9; + } +} +.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; +} +@media (max-width: 500px) { + .partenaires .layout-content .content_container .views-element-container { + grid-column: 2/span 9; + } +} +.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 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("../img/noun-arrow-to-right.svg"); + padding-right: 0.5rem; + padding-top: 0.2rem; +} + +.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; +} +@media (max-width: 500px) { + .node-type-static .layout-content .content_container #block-quartiers-de-demain-titredepage { + margin-top: 1rem; + grid-column: 2/span 9; + } +} +.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; +} +@media (max-width: 500px) { + .node-type-static .layout-content .content_container article.node-type-static { + grid-column: 2/span 9; + } +} +.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; } \ No newline at end of file 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 154acf7..7b9a3f5 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 @@ -6,6 +6,7 @@ $header-height-ultrasmall : 50px; $width-menu-slidedown : 550px; .layout-container { + position: relative; width: 100vw; background-color: $background-home; @@ -19,6 +20,13 @@ $width-menu-slidedown : 550px; display: flex; flex-flow: row wrap; + + -webkit-user-select: none; + -webkit-touch-callout: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + header{ flex: 0 0 100%; } diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/_partenaires_.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/_partenaires.scss similarity index 100% rename from web/themes/custom/quartiers_de_demain/src/assets/scss/pages/_partenaires_.scss rename to web/themes/custom/quartiers_de_demain/src/assets/scss/pages/_partenaires.scss diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/_static_.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/_static.scss similarity index 100% rename from web/themes/custom/quartiers_de_demain/src/assets/scss/pages/_static_.scss rename to web/themes/custom/quartiers_de_demain/src/assets/scss/pages/_static.scss diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/consultation.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/consultation.scss new file mode 100644 index 0000000..c433c03 --- /dev/null +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/consultation.scss @@ -0,0 +1,167 @@ +#consultation{ + background-color: #f6f7f3; + + + .layout-content{ + padding-top: 1rem; + .content_container{ + display: flex; + flex-direction: column; + align-items: center; + #block-quartiers-de-demain-titredepage{ + margin-top: 1rem; + width: fit-content; + h1{ + text-transform: none; + color: black; + font-size: 2rem; + font-weight: 500; + } + + + + } + .node-type-static{ + &::before{ + content:""; + display: block; + border-bottom: solid 1px $blue_QDD; + width: 60% ; + margin: auto; + } + + width: 80%; + .paragraph--type--static-parts:not(#paragraph-id--7){ + #svg1{ + display: none; + } + } + #paragraph-id--10{ + display: flex; + flex-direction: column; + align-items: center; + .field_field_title{ + padding: 1rem; + color: $blue_QDD; + font-size: 2.5rem; + font-weight: 500; + } + .colone-picto{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + padding: 1rem; + p:not(:last-of-type){ + flex: 1 15%; + color: $blue_QDD; + padding: 0.5rem; + &::before{ + content:""; + display: block; + border-left: solid 1px $blue_QDD; + height: 30%; + margin-bottom: 0.5rem; + } + } + + p:last-of-type{ + color: black; + // flex: 1 80%; + width: 55%; + padding-top: 3rem; + margin: auto; + } + + } + } + #paragraph-id--11{ + width: 65%; + background-color: white; + margin: auto; + display: flex; + flex-direction: column; + align-items: center; + padding: 1rem; + .field_field_title{ + color: $blue_QDD; + font-size: 1.2rem; + font-weight: 500; + } + .colone-picto{ + display: grid; + grid-template-columns: auto auto; + grid-template-rows: auto auto; + padding: 1rem; + p{ + flex: 1 15%; + padding: 0rem; + margin: 0; + + &:nth-of-type(1){ + grid-column: 1; + grid-row: 2; + } + &:nth-of-type(2){ + grid-column: 2; + grid-row: 2; + } + } + h5{ + + font-size: 3rem; + font-weight: 500; + color: $blue_QDD; + margin: 0; + height: fit-content; + &:nth-of-type(1){ + grid-column: 1; + grid-row: 1; + } + &:nth-of-type(2){ + grid-column: 2; + grid-row: 1; + } + + } + } + } + #paragraph-id--12, + #paragraph-id--13{ + width: 65%; + margin: auto; + display: flex; + flex-direction: column; + align-items: center; + padding: 1rem; + .field_field_title{ + color: $blue_QDD; + font-size: 1.2rem; + font-weight: 500; + padding-bottom: 1.5rem; + + } + } + + #paragraph-id--12::after{ + content:""; + display: block; + border-bottom: solid 1px $blue_QDD; + width: 100% ; + padding-bottom: 2rem; + } + #paragraph-id--13{ + .field_field_texte{ + .colone-picto{ + display: flex; + flex-direction: row; + justify-content: space-between ; + p{ + width: 30%; + } + } + } + } + } + } + } +} \ No newline at end of file diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss index 51ff282..7614737 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss @@ -165,9 +165,6 @@ .field_field_texte{ width: 80%; .colone-picto{ - // display: flex; - // flex-direction:row ; - // justify-content: center; margin-top: 2rem; display: grid; grid-template-columns: repeat(6 auto); @@ -177,7 +174,6 @@ font-weight: 800; margin-bottom: 0; margin: 0; - } h5:nth-of-type(1){ grid-row: 2; @@ -222,7 +218,6 @@ grid-row: 3; grid-column: 5; } - } } } diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/quartiers_de_demain.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/quartiers_de_demain.scss index c4d0cc9..a573d12 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/quartiers_de_demain.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/quartiers_de_demain.scss @@ -28,7 +28,8 @@ /*pages*/ @import "pages/home"; -// @import "pages/partenaires"; +@import "pages/consultation"; +@import "pages/partenaires"; // @import "pages/presentation"; -// @import "pages/static"; +@import "pages/static"; diff --git a/web/themes/custom/quartiers_de_demain/templates/page--node--7.html.twig b/web/themes/custom/quartiers_de_demain/templates/page--node--7.html.twig new file mode 100644 index 0000000..591eb11 --- /dev/null +++ b/web/themes/custom/quartiers_de_demain/templates/page--node--7.html.twig @@ -0,0 +1,94 @@ +{# +/** + * @file + * Claro's theme implementation to display a single Drupal page. + * + * The doctype, html, head, and body tags are not in this template. Instead + * they can be found in the html.html.twig template normally located in the + * core/modules/system directory. + * + * Available variables: + * + * General utility variables: + * - base_path: The base URL path of the Drupal installation. Will usually be + * "/" unless you have installed Drupal in a sub-directory. + * - is_front: A flag indicating if the current page is the front page. + * - logged_in: A flag indicating if the user is registered and signed in. + * - is_admin: A flag indicating if the user has permission to access + * administration pages. + * + * Site identity: + * - front_page: The URL of the front page. Use this instead of base_path when + * linking to the front page. This includes the language domain or prefix. + * + * Page content (in order of occurrence in the default page.html.twig): + * - node: Fully loaded node, if there is an automatically-loaded node + * associated with the page and the node ID is the second argument in the + * page's path (e.g. node/12345 and node/12345/revisions, but not + * comment/reply/12345). + * + * Regions: + * - page.header: Items for the header region. + * - page.pre_content: Items for the pre-content region. + * - page.breadcrumb: Items for the breadcrumb region. + * - page.highlighted: Items for the highlighted region. + * - page.help: Dynamic help text, mostly for admin pages. + * - page.content: The main content of the current page. + * + * @see template_preprocess_page() + * @see html.html.twig + */ +#} +