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 28833c3..bf0e68c 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 @@ -111,39 +111,13 @@ .layout-container main { width: 100%; display: grid; - grid-template-columns: repeat(12, 1fr); - grid-gap: 10px; - padding-left: 10px; - padding-right: 10px; } + grid-template-columns: repeat(12, 1fr); } .layout-container .content_container { display: grid; grid-template-columns: repeat(12, 1fr); } .layout-content { - grid-column: 3 /span 10; - order: 2; - padding-top: 3rem; - padding-bottom: 6rem; - margin: auto; } - @media (max-width: 891px) { - .layout-content { - width: 90%; } } - @media (max-width: 500px) { - .layout-content { - padding-top: 0; } } - -aside { - grid-column: 1 /span 2; - order: 1; - margin-top: 5rem; } - @media (max-width: 891px) { - aside { - margin-left: 5%; - margin-top: 9rem; } } - @media (max-width: 500px) { - aside { - width: 80%; - margin-top: 3rem; } } + grid-column: 1 / span 12; } /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */ ul { @@ -324,96 +298,123 @@ header { text-transform: uppercase; } /*pages*/ -.node-id-6 .content_container { - display: flex; } - .node-id-6 .content_container #block-quartiers-de-demain-titredepage { - display: none; } - .node-id-6 .content_container article.node-type-static { - grid-column: 1 /span 9; - grid-row: 2; } - .node-id-6 .content_container article.node-type-static div.field_body h2 { - font-size: 0.8rem; - font-weight: 600; - margin-bottom: 0; } - .node-id-6 .content_container article.node-type-static div.field_body p { - margin-top: 0; } +#presentation { + width: 100%; + display: grid; + grid-template-columns: repeat(12, 1fr); + grid-gap: 10px; } + #presentation .layout-content { + grid-column: 3 / 11; + order: 2; + padding-top: 3rem; + padding-bottom: 6rem; } + @media (max-width: 891px) { + #presentation .layout-content { + width: 90%; } } + @media (max-width: 500px) { + #presentation .layout-content { + padding-top: 0; } } + #presentation .layout-content .content_container { + display: flex; } + #presentation .layout-content .content_container #block-quartiers-de-demain-titredepage { + display: none; } + #presentation .layout-content .content_container article.node-type-static { + width: 100%; } + #presentation .layout-content .content_container article.node-type-static div.field_body h2 { + font-size: 0.8rem; + font-weight: 600; + margin-bottom: 0; } + #presentation .layout-content .content_container article.node-type-static div.field_body p { + margin-top: 0; } + #presentation aside { + grid-column: 1 /span 2; + order: 1; + margin-top: 5rem; } + @media (max-width: 891px) { + #presentation aside { + margin-left: 5%; + margin-top: 9rem; } } + @media (max-width: 500px) { + #presentation aside { + width: 80%; + margin-top: 3rem; } } -.partenaires .content_container #block-quartiers-de-demain-titredepage { +.partenaires .layout-content .content_container #block-quartiers-de-demain-titredepage { grid-column: 3 /span 9; grid-row: 1; margin-top: 3rem; } - .partenaires .content_container #block-quartiers-de-demain-titredepage h1 { + .partenaires .layout-content .content_container #block-quartiers-de-demain-titredepage h1 { text-transform: uppercase; color: #f7002b; font-size: 1.6rem; font-weight: 300; } -.partenaires .content_container .views-element-container { +.partenaires .layout-content .content_container .views-element-container { grid-column: 3 /span 9; grid-row: 2; } - .partenaires .content_container .views-element-container .node-type-partenaire { + .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 .content_container .views-element-container .node-type-partenaire { + .partenaires .layout-content .content_container .views-element-container .node-type-partenaire { display: flex; flex-direction: column; } } - .partenaires .content_container .views-element-container .node-type-partenaire .field_field_logo { + .partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_logo { grid-column: 1 /span 2; grid-row: 1 /span 3; padding-right: 1rem; margin: auto; } - .partenaires .content_container .views-element-container .node-type-partenaire .field_field_logo img { + .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 .content_container .views-element-container .node-type-partenaire .field_title { + .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; } - .partenaires .content_container .views-element-container .node-type-partenaire .field_body { + .partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_body { grid-column: 3 /span 8; grid-row: 2; margin-left: 1rem; } - .partenaires .content_container .views-element-container .node-type-partenaire .field_field_lien { + .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; } - .partenaires .content_container .views-element-container .node-type-partenaire .field_field_lien a { + .partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien a { display: inline-flex; align-items: center; } - .partenaires .content_container .views-element-container .node-type-partenaire .field_field_lien a svg { + .partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien a svg { display: none; } - .partenaires .content_container .views-element-container .node-type-partenaire .field_field_lien a::before { + .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; } -.node-type-static .content_container #block-quartiers-de-demain-titredepage { +.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 .content_container #block-quartiers-de-demain-titredepage h1 { + .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 .content_container article.node-type-static { +.node-type-static .layout-content .content_container article.node-type-static { grid-column: 3 /span 9; grid-row: 2; } - .node-type-static .content_container article.node-type-static div.field_body h2 { + .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 .content_container article.node-type-static div.field_body p { + .node-type-static .layout-content .content_container article.node-type-static div.field_body p { margin-top: 0; } diff --git a/web/themes/custom/quartiers_de_demain/scss/global/_layout.scss b/web/themes/custom/quartiers_de_demain/scss/global/_layout.scss index 14ba4ba..b24f8b5 100644 --- a/web/themes/custom/quartiers_de_demain/scss/global/_layout.scss +++ b/web/themes/custom/quartiers_de_demain/scss/global/_layout.scss @@ -12,7 +12,6 @@ $width-menu-slidedown : 550px; font-size: $font-medium; top: 0%; left: 0%; - // width: 100%; overflow: hidden; display: flex; flex-flow: row wrap; @@ -20,10 +19,7 @@ $width-menu-slidedown : 550px; header{ flex: 0 0 100%; } - // main{ - // // position: relative; - // // top: -7rem; - // } + footer{ flex: 0 0 100%; } @@ -31,63 +27,16 @@ $width-menu-slidedown : 550px; width: 100%; display: grid; grid-template-columns: repeat(12, 1fr); - grid-gap: 10px; - padding-left: 10px; - padding-right: 10px; } .content_container{ - display: grid; grid-template-columns: repeat(12, 1fr); } } .layout-content{ - grid-column: 3 /span 10; - order: 2; - padding-top: 3rem; - padding-bottom: 6rem; - // width: 70%; - margin: auto; - @media(max-width: 891px){ - width: 90%; - } - @media (max-width:500px) { - padding-top: 0; - } + grid-column: 1 / span 12; } -aside{ - grid-column: 1 /span 2; - // width: 80%; - order: 1; - margin-top: 5rem; - // margin-left: 10%; - // margin-right: 1rem; - @media(max-width:891px){ - margin-left: 5%; - margin-top: 9rem; - } - @media (max-width:500px) { - width: 80%; - margin-top: 3rem; - } -} -// main{ -// width: 100%; -// display: flex; -// flex-direction: row; -// position: relative; -// @media (max-width:500px) { -// flex-direction: column; -// } - - -// } - -// .main-content{ -// margin-top: 7rem; -// } - diff --git a/web/themes/custom/quartiers_de_demain/scss/pages/_partenaires.scss b/web/themes/custom/quartiers_de_demain/scss/pages/_partenaires.scss index 4cd9251..365ac18 100644 --- a/web/themes/custom/quartiers_de_demain/scss/pages/_partenaires.scss +++ b/web/themes/custom/quartiers_de_demain/scss/pages/_partenaires.scss @@ -1,85 +1,90 @@ .partenaires{ // font-family: $font-family-default; - .content_container{ - // display: grid; - // grid-template-columns: repeat(12, 1fr); - #block-quartiers-de-demain-titredepage{ - grid-column: 3 /span 9; - grid-row: 1; - margin-top: 3rem; + .layout-content{ + // grid-column: 1 / span 12; - h1{ - text-transform: uppercase; - color: $red_QDD ; - font-size: $font-large; - font-weight: 300; + .content_container{ + // display: grid; + // grid-template-columns: repeat(12, 1fr); + #block-quartiers-de-demain-titredepage{ + grid-column: 3 /span 9; + grid-row: 1; + margin-top: 3rem; + + h1{ + text-transform: uppercase; + color: $red_QDD ; + font-size: $font-large; + font-weight: 300; + } } + .views-element-container{ + grid-column: 3 /span 9; + grid-row: 2; + + .node-type-partenaire{ + width: 100%; + padding-bottom: 3rem; + display: grid; + grid-template-columns: repeat(9, 1fr); + grid-template-rows: repeat(auto-fill); + // grid-gap: 10px; + @media (max-width: 810px){ + display: flex; + flex-direction: column; + } + .field_field_logo{ + grid-column: 1 /span 2; + grid-row: 1 /span 3; + padding-right: 1rem; + margin: auto; + img{ + object-fit: contain; + max-width: 200px; + max-height: 200px; + } + } + .field_title{ + grid-column: 3 /span 8; + grid-row: 1; + font-weight: 500; + font-size: $font-normal; + margin-left: 1rem; + } + .field_body{ + grid-column: 3 /span 8; + grid-row: 2; + margin-left: 1rem; + + } + .field_field_lien{ + grid-column: 3 /span 8; + grid-row: 3; + border-bottom: 2px solid $blue_QDD; + width: fit-content; + padding-bottom: 0.5rem; + margin-left: 1rem; + + a{ + display: inline-flex; + align-items: center; + svg{ + display: none; + } + &::before{ + display: inline-block; + content: url("../images/noun-arrow-to-right.svg"); + padding-right: 0.5rem; + padding-top: 0.2rem; + } + } + } + } + + + } } - .views-element-container{ - grid-column: 3 /span 9; - grid-row: 2; - - .node-type-partenaire{ - width: 100%; - padding-bottom: 3rem; - display: grid; - grid-template-columns: repeat(9, 1fr); - grid-template-rows: repeat(auto-fill); - // grid-gap: 10px; - @media (max-width: 810px){ - display: flex; - flex-direction: column; - } - .field_field_logo{ - grid-column: 1 /span 2; - grid-row: 1 /span 3; - padding-right: 1rem; - margin: auto; - img{ - object-fit: contain; - max-width: 200px; - max-height: 200px; - } - } - .field_title{ - grid-column: 3 /span 8; - grid-row: 1; - font-weight: 500; - font-size: $font-normal; - margin-left: 1rem; - } - .field_body{ - grid-column: 3 /span 8; - grid-row: 2; - margin-left: 1rem; - - } - .field_field_lien{ - grid-column: 3 /span 8; - grid-row: 3; - border-bottom: 2px solid $blue_QDD; - width: fit-content; - padding-bottom: 0.5rem; - margin-left: 1rem; - - a{ - display: inline-flex; - align-items: center; - svg{ - display: none; - } - &::before{ - display: inline-block; - content: url("../images/noun-arrow-to-right.svg"); - padding-right: 0.5rem; - padding-top: 0.2rem; - } - } - } - } - - - } } + } 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 29d6883..e44c86c 100644 --- a/web/themes/custom/quartiers_de_demain/scss/pages/_presentation.scss +++ b/web/themes/custom/quartiers_de_demain/scss/pages/_presentation.scss @@ -1,23 +1,64 @@ -.node-id-6{ - .content_container{ - display: flex; - #block-quartiers-de-demain-titredepage{ - display: none; +#presentation{ + width: 100%; + display: grid; + grid-template-columns: repeat(12, 1fr); + grid-gap: 10px; + .layout-content{ + grid-column: 3 / 11; + order: 2; + padding-top: 3rem; + padding-bottom: 6rem; + // width: 70%; + // margin: auto; + @media(max-width: 891px){ + width: 90%; } - article.node-type-static{ - width: 100%; + @media (max-width:500px) { + padding-top: 0; + } + .content_container{ + display: flex; + #block-quartiers-de-demain-titredepage{ + display: none; + } - div.field_body{ - h2{ - font-size: $font-medium; - font-weight: 600; - margin-bottom: 0; - } - p{ - margin-top: 0; + article.node-type-static{ + width: 100%; + + div.field_body{ + h2{ + font-size: $font-medium; + font-weight: 600; + margin-bottom: 0; + } + p{ + margin-top: 0; + } } } } + } + aside{ + grid-column: 1 /span 2; + // width: 80%; + order: 1; + margin-top: 5rem; + // margin-left: 10%; + // margin-right: 1rem; + @media(max-width:891px){ + margin-left: 5%; + margin-top: 9rem; + } + @media (max-width:500px) { + width: 80%; + margin-top: 3rem; + } } -} \ No newline at end of file +} + + + + + + diff --git a/web/themes/custom/quartiers_de_demain/scss/pages/_static.scss b/web/themes/custom/quartiers_de_demain/scss/pages/_static.scss index 373dea0..39feba4 100644 --- a/web/themes/custom/quartiers_de_demain/scss/pages/_static.scss +++ b/web/themes/custom/quartiers_de_demain/scss/pages/_static.scss @@ -1,34 +1,36 @@ .node-type-static{ - .content_container{ + .layout-content{ + // grid-column: 1 / span 12; + .content_container{ - #block-quartiers-de-demain-titredepage{ - grid-column: 3 /span 9; - grid-row: 1; - margin-top: 3rem; - - h1{ - text-transform: uppercase; - color: $red_QDD ; - font-size: $font-large; - font-weight: 300; - } - } - article.node-type-static{ - grid-column: 3 /span 9; - grid-row: 2; - - div.field_body{ - h2{ - font-size: $font-medium; - font-weight: 600; - margin-bottom: 0; + #block-quartiers-de-demain-titredepage{ + grid-column: 3 /span 9; + grid-row: 1; + margin-top: 3rem; + + h1{ + text-transform: uppercase; + color: $red_QDD ; + font-size: $font-large; + font-weight: 300; } - p{ - margin-top: 0; + } + article.node-type-static{ + grid-column: 3 /span 9; + grid-row: 2; + + div.field_body{ + h2{ + font-size: $font-medium; + font-weight: 600; + margin-bottom: 0; + } + p{ + margin-top: 0; + } } } } } + } -// html.js body.node-type-static.node-id-2 div.dialog-off-canvas-main-canvas div.layout-container main div.layout-content div.content_container article.node-type-static -// html.no-touchevents.js body.node-type-static.node-id-1.toolbar-horizontal.toolbar-fixed.toolbar-tray-open div.dialog-off-canvas-main-canvas div.layout-container main div.layout-content div.content_container article.contextual-region.node-type-static \ No newline at end of file diff --git a/web/themes/custom/quartiers_de_demain/scss/quartiers_de_demain.scss b/web/themes/custom/quartiers_de_demain/scss/quartiers_de_demain.scss index 0938372..dffe3cf 100644 --- a/web/themes/custom/quartiers_de_demain/scss/quartiers_de_demain.scss +++ b/web/themes/custom/quartiers_de_demain/scss/quartiers_de_demain.scss @@ -26,7 +26,7 @@ /*pages*/ -@import "pages/_presentation"; +@import "pages/presentation"; @import "pages/partenaires"; @import "pages/static"; diff --git a/web/themes/custom/quartiers_de_demain/templates/page--node--6.html.twig b/web/themes/custom/quartiers_de_demain/templates/page--node--6.html.twig new file mode 100644 index 0000000..584f5da --- /dev/null +++ b/web/themes/custom/quartiers_de_demain/templates/page--node--6.html.twig @@ -0,0 +1,92 @@ +{# +/** + * @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 + */ +#} +