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 df8f962..540048e 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 @@ -233,7 +233,8 @@ header { background: #e8ebf4; border-bottom: 1px solid #808080; border-top: 1px solid #808080; - font-size: 1rem; } + font-size: 1rem; + text-align: center; } header .header_nav_container #block-quartiers-de-demain-entete { grid-column: 1 /span 11; order: 2; @@ -361,13 +362,7 @@ header { .layout-sidebar-first { display: flex; - justify-content: end; } - .layout-sidebar-first .sidebar_first_container { - width: 80%; } - .layout-sidebar-first .sidebar_first_container #block-quartiers-de-demain-views-block-statics-block-1 { - text-transform: uppercase; } - -aside { + justify-content: end; position: relative; grid-column: 1 /span 2; grid-row: 1; @@ -375,42 +370,42 @@ aside { order: 1; margin-top: 5rem; } @media (max-width: 891px) { - aside { + .layout-sidebar-first { margin-left: 5%; margin-top: 9rem; } } @media (max-width: 500px) { - aside { + .layout-sidebar-first { width: 80%; margin-top: 3rem; } } - aside .sidebar_first_container { - position: -webkit-sticky; + .layout-sidebar-first .sidebar_first_container { + width: 80%; position: sticky; + position: -webkit-sticky; top: 10rem; font-weight: 400; } - aside .sidebar_first_container .field-content { + .layout-sidebar-first .sidebar_first_container .field-content { margin-bottom: 0.7rem; } @media (max-width: 810px) { - aside .sidebar_first_container { + .layout-sidebar-first .sidebar_first_container { display: none; } } - aside .views-field-field-pieces-jointes .field-content { - display: flex; - flex-direction: column; } - aside .views-field-field-pieces-jointes .field-content .file--application-pdf { - display: inline-flex; } - aside .views-field-field-pieces-jointes .field-content .file--application-pdf a { - display: block; - font-size: small; - font-weight: 800; } - aside .views-field-field-pieces-jointes .field-content .file--application-pdf::before { - content: url(../images/noun-arrow-download.svg); - margin: auto; - padding-right: 00.5rem; } - aside .views-field-field-pieces-jointes .field-content span { - font-size: small; - font-weight: 800; } - aside .views-field-field-pieces-jointes .field-content span:nth-child(2) { - margin-left: 50px; - align-self: center; } + .layout-sidebar-first .sidebar_first_container #block-quartiers-de-demain-views-block-statics-block-1 { + text-transform: uppercase; } + .layout-sidebar-first .sidebar_first_container #block-quartiers-de-demain-views-block-statics-fields-block-1 { + border-top: 2px solid #0732c2; + padding-top: 0.3rem; } + .layout-sidebar-first .sidebar_first_container #block-quartiers-de-demain-views-block-statics-fields-block-1 .views-field-field-pieces-jointes { + display: flex; + flex-direction: row; } + .layout-sidebar-first .sidebar_first_container #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; } + .layout-sidebar-first .sidebar_first_container #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.6rem; + font-weight: 800; } + .layout-sidebar-first .sidebar_first_container #block-quartiers-de-demain-views-block-statics-fields-block-1 .views-field-field-pieces-jointes .field-content span { + font-weight: 400; } /*pages*/ #home { @@ -573,7 +568,7 @@ aside { display: flex; flex-direction: column; } } .partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_logo { - grid-column: 1 /span 2; + grid-column: 1 / 3; grid-row: 1 /span 3; padding-right: 1rem; margin: auto; } @@ -621,13 +616,11 @@ aside { #presentation { width: 100%; display: grid; - grid-template-columns: repeat(12, 1fr); - grid-gap: 10px; } + grid-template-columns: repeat(12, 1fr); } #presentation .layout-content { grid-row: 1; order: 2; - padding-top: 3rem; - padding-bottom: 6rem; } + padding-top: 3rem; } @media (max-width: 500px) { #presentation .layout-content { padding-top: 0; } } @@ -655,11 +648,9 @@ aside { #presentation .layout-content .content_container article.node-type-static .field_body img { width: 100%; height: auto; } - #presentation .layout-content .content_container article.node-type-static .field_body p { - margin-top: 0; } #presentation .layout-content .content_container article.node-type-static .paragraph { - padding-top: 1rem; - padding-bottom: 1rem; + padding-top: 2rem; + padding-bottom: 2rem; padding-left: 20%; padding-right: 20%; } @media (max-width: 810px) { @@ -680,6 +671,10 @@ aside { 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 { 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 { + 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 { + 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 { text-align: center; } #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 { @@ -687,7 +682,8 @@ aside { flex-direction: column; } #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_title { width: 60%; - margin: auto; } + 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) { display: flex; flex-direction: row; } @@ -695,26 +691,38 @@ aside { #presentation .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 { + display: flex; + flex-direction: column; padding-right: 30px; text-align: left; - color: #0732c2; } + 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 { padding-right: 0px; text-align: center; } } - #presentation .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) { - 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 { - padding-right: 30px; - text-align: left; } + #presentation .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 { + padding-bottom: 4rem; } + #presentation .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) { + 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) p { - padding-right: 0px; - text-align: center; } } + #presentation .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 { + 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 { + padding-right: 0px; + text-align: center; } } #presentation .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 { @@ -751,21 +759,23 @@ aside { .node-type-static .layout-content { grid-row: 1; } - .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; } + .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; } diff --git a/web/themes/custom/quartiers_de_demain/images/noun-arrow-download.svg b/web/themes/custom/quartiers_de_demain/images/noun-arrow-download.svg index 895e351..84c132c 100644 --- a/web/themes/custom/quartiers_de_demain/images/noun-arrow-download.svg +++ b/web/themes/custom/quartiers_de_demain/images/noun-arrow-download.svg @@ -2,8 +2,8 @@ 0) { -// $('html, body').stop().animate({scrollTop: $anchor.offset().top - fixedElementHeight }, 0); -// } -// }; +(function($, window) { + var adjustAnchor = function() { + var $anchor = $('.sidebar_first_container'), + fixedElementHeight = 350; + if ($anchor.length > 0) { + $('html, body').stop().animate({scrollTop: $anchor.offset().top - fixedElementHeight }, 0); + } + }; -// $(window).on('hashchange', function() { -// adjustAnchor(); -// }); + $(window).on('hashchange', function() { + adjustAnchor(); + }); -// })(jQuery, window); +})(jQuery, window); 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 7a5dc8b..6482f37 100644 --- a/web/themes/custom/quartiers_de_demain/scss/pages/_partenaires.scss +++ b/web/themes/custom/quartiers_de_demain/scss/pages/_partenaires.scss @@ -34,7 +34,7 @@ flex-direction: column; } .field_field_logo{ - grid-column: 1 /span 2; + grid-column: 1 / 3; grid-row: 1 /span 3; padding-right: 1rem; margin: auto; 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 690a99c..8591cf8 100644 --- a/web/themes/custom/quartiers_de_demain/scss/pages/_presentation.scss +++ b/web/themes/custom/quartiers_de_demain/scss/pages/_presentation.scss @@ -3,13 +3,13 @@ width: 100%; display: grid; grid-template-columns: repeat(12, 1fr); - grid-gap: 10px; + // grid-gap: 10px; .layout-content{ // grid-column: 3 / 11; grid-row: 1; order: 2; padding-top: 3rem; - padding-bottom: 6rem; + // padding-bottom: 6rem; @media (max-width:500px) { padding-top: 0; } @@ -45,12 +45,12 @@ height: auto; } p{ - margin-top: 0; + // margin-top: 0; } } .paragraph{ - padding-top: 1rem; - padding-bottom: 1rem; + padding-top: 2rem; + padding-bottom: 2rem; padding-left: 20%; padding-right: 20%; @media (max-width:810px) { @@ -61,7 +61,6 @@ padding-left: 10%; padding-right: 10%; } - } .field_field_textes{ .field_field_title{ @@ -82,6 +81,13 @@ #paragraph-id--1, #paragraph-id--2, #paragraph-id--3, #paragraph-id--4, #paragraph-id--6, #paragraph-id--8{ background-color: $bleu_fond_header; } + #paragraph-id--1, #paragraph-id--2, #paragraph-id--3, #paragraph-id--4{ + padding-top: 1rem; + } + #paragraph-id--1, #paragraph-id--2, #paragraph-id--3{ + padding-bottom: 1rem; + } + #paragraph-id--7, #paragraph-id--8{ text-align: center; } @@ -92,6 +98,7 @@ .field_field_title{ width: 60%; margin: auto; + padding-bottom: 1rem; } .field_field_texte div:nth-child(2){ display: flex; @@ -100,19 +107,32 @@ flex-direction: column; } p{ + display: flex; + flex-direction: column; padding-right: 30px; text-align: left; color: $blue_QDD; + width: calc(100vw / 3); @media(max-width: 500px){ padding-right: 0px; text-align: center; } + img{ + width: 70%; + height: auto; + padding-bottom: 1rem; + } } } } #paragraph-id--8{ + padding-bottom: 4rem; + .field_field_title{ + padding-bottom: 1rem; + } + .field_field_texte div:nth-child(2){ display: flex; flex-direction: row; @@ -120,6 +140,7 @@ flex-direction: column; } p{ + width: calc(100vw / 3); padding-right: 30px; text-align: left; @media(max-width: 500px){ 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 1e65d1d..66f8a54 100644 --- a/web/themes/custom/quartiers_de_demain/scss/pages/_static.scss +++ b/web/themes/custom/quartiers_de_demain/scss/pages/_static.scss @@ -3,7 +3,7 @@ // grid-column: 1 / span 12; grid-row: 1; .content_container{ - + margin-bottom: 3rem; #block-quartiers-de-demain-titredepage{ grid-column: 3 /span 9; grid-row: 1; diff --git a/web/themes/custom/quartiers_de_demain/scss/partials/_aside.scss b/web/themes/custom/quartiers_de_demain/scss/partials/_aside.scss index b687210..d4e625a 100644 --- a/web/themes/custom/quartiers_de_demain/scss/partials/_aside.scss +++ b/web/themes/custom/quartiers_de_demain/scss/partials/_aside.scss @@ -1,18 +1,6 @@ .layout-sidebar-first{ display: flex; justify-content: end; - .sidebar_first_container{ - width: 80%; - - #block-quartiers-de-demain-views-block-statics-block-1{ - text-transform: uppercase; - } - - - } -} - -aside{ position: relative; grid-column: 1 /span 2; grid-row: 1; @@ -28,8 +16,9 @@ aside{ margin-top: 3rem; } .sidebar_first_container{ - position: -webkit-sticky; + width: 80%; position: sticky; + position: -webkit-sticky; top: 10rem; font-weight: 400; .field-content{ @@ -38,33 +27,34 @@ aside{ @media (max-width: 810px){ display: none; } - } - .views-field-field-pieces-jointes{ - .field-content{ - display: flex; - flex-direction: column; - .file--application-pdf{ - display: inline-flex; - a{ - display: block; - font-size: small; - font-weight: 800; - } + + #block-quartiers-de-demain-views-block-statics-block-1{ + text-transform: uppercase; + } + #block-quartiers-de-demain-views-block-statics-fields-block-1{ + border-top: 2px solid $blue_QDD; + padding-top: 0.3rem; + .views-field-field-pieces-jointes{ + display: flex; + flex-direction: row; &::before{ content: url(../images/noun-arrow-download.svg); - margin: auto; - padding-right: 00.5rem; + padding-right: 00.3rem; + } + .field-content{ + display: flex; + flex-direction: column; + font-size: 0.6rem; + font-weight: 800; + span{ + font-weight: 400; + } + } } - span{ - font-size: small; - font-weight: 800; - &:nth-child(2){ - margin-left: 50px; - align-self: center; - } - } } - } -} \ No newline at end of file + + + } +} 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 ccc953b..3bb2b56 100644 --- a/web/themes/custom/quartiers_de_demain/scss/partials/_header.scss +++ b/web/themes/custom/quartiers_de_demain/scss/partials/_header.scss @@ -108,7 +108,7 @@ header{ border-bottom: 1px solid #808080; border-top: 1px solid #808080; font-size: $font-big; - + text-align: center; #block-quartiers-de-demain-entete{ grid-column: 1 /span 11; order: 2;