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 95d7c49..f7065d1 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 @@ -324,6 +324,142 @@ header { text-transform: uppercase; } /*pages*/ +#home { + width: 100%; + display: grid; + grid-template-columns: repeat(12, 1fr); + grid-gap: 10px; } + #home .layout-content { + grid-row: 1; + order: 2; + padding-top: 3rem; + padding-bottom: 6rem; } + @media (max-width: 500px) { + #home .layout-content { + padding-top: 0; } } + #home .layout-content .content_container { + display: flex; } + #home .layout-content .content_container #block-quartiers-de-demain-titredepage { + display: none; } + #home .layout-content .content_container article.node-type-static { + width: 100%; } + #home .layout-content .content_container article.node-type-static .field_body { + padding-left: 20%; + padding-right: 20%; } + @media (max-width: 640px) { + #home .layout-content .content_container article.node-type-static .field_body { + padding-left: 10%; + padding-right: 10%; } } + #home .layout-content .content_container article.node-type-static .field_body h2 { + font-size: 0.8rem; + font-weight: 600; + margin-bottom: 0; } + #home .layout-content .content_container article.node-type-static .field_body img { + width: 100%; + height: auto; } + #home .layout-content .content_container article.node-type-static .field_body p { + margin-top: 0; } + #home .layout-content .content_container article.node-type-static .paragraph { + padding-top: 1rem; + padding-bottom: 1rem; + padding-left: 20%; + padding-right: 20%; } + @media (max-width: 640px) { + #home .layout-content .content_container article.node-type-static .paragraph { + padding-left: 10%; + padding-right: 10%; } } + #home .layout-content .content_container article.node-type-static .field_field_textes .field_field_title { + text-transform: uppercase; + font-size: 1rem; + font-weight: 400; } + #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; } + #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; } + #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; } + #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; } + #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 { + display: flex; + flex-direction: column; } + #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_title { + width: 60%; + margin: auto; } + #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; } + #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: 30px; + text-align: left; + color: #0732c2; } + #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; } + #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: 30px; + text-align: left; } + #home .layout-content .content_container article.node-type-static .field_field_textes p { + margin-bottom: 0; } + #home .layout-content .content_container article.node-type-static .field_field_textes .field_field_picto { + height: auto; + float: inline-start; + padding-right: 0.5rem; } + #home .layout-content .content_container article.node-type-static .field_field_textes .field_field_picto img { + width: 40px; + height: auto; } + @media (max-width: 891px) { + #home .layout-content .content_container article.node-type-static .field_field_textes .field_field_picto img { + width: 30px; } } + #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img { + width: -moz-available; + height: auto; + cursor: url(/img/layout/backgrounds/zoom.cur), -moz-zoom-in; } + #home aside { + position: relative; + grid-column: 1 /span 2; + grid-row: 1; + z-index: 100; + order: 1; + margin-top: 5rem; } + @media (max-width: 891px) { + #home aside { + margin-left: 5%; + margin-top: 9rem; } } + @media (max-width: 500px) { + #home aside { + width: 80%; + margin-top: 3rem; } } + #home aside .sidebar_first_container { + position: -webkit-sticky; + position: sticky; + top: 10rem; + font-weight: 400; } + #home aside .sidebar_first_container .field-content { + margin-bottom: 0.7rem; } + @media (max-width: 810px) { + #home aside .sidebar_first_container { + display: none; } } + #home aside .views-field-field-pieces-jointes .field-content { + display: flex; + flex-direction: column; } + #home aside .views-field-field-pieces-jointes .field-content .file--application-pdf { + display: inline-flex; } + #home aside .views-field-field-pieces-jointes .field-content .file--application-pdf a { + display: block; + font-size: small; + font-weight: 800; } + #home 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; } + #home aside .views-field-field-pieces-jointes .field-content span { + font-size: small; + font-weight: 800; } + #home aside .views-field-field-pieces-jointes .field-content span:nth-child(2) { + margin-left: 50px; + align-self: center; } + .partenaires .layout-content .content_container #block-quartiers-de-demain-titredepage { grid-column: 3 /span 9; grid-row: 1; diff --git a/web/themes/custom/quartiers_de_demain/js/quartiers_de_demain.js b/web/themes/custom/quartiers_de_demain/js/quartiers_de_demain.js index 13cabde..d7c4a27 100644 --- a/web/themes/custom/quartiers_de_demain/js/quartiers_de_demain.js +++ b/web/themes/custom/quartiers_de_demain/js/quartiers_de_demain.js @@ -40,22 +40,22 @@ }); -// ///////////////// -//// ancre dans texte au click parragraphe correspondant arrive en dessous du header +// // ///////////////// +// //// ancre dans texte au click parragraphe correspondant arrive en dessous du header -(function($, window) { - var adjustAnchor = function() { - var $anchor = $('#block-quartiers-de-demain-views-block-statics-block-1'), - fixedElementHeight = 350; - if ($anchor.length > 0) { - $('html, body').stop().animate({scrollTop: $anchor.offset().top - fixedElementHeight }, 0); - } - }; +// (function($, window) { +// var adjustAnchor = function() { +// var $anchor = $('#block-quartiers-de-demain-views-block-statics-block-1'), +// 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); \ No newline at end of file diff --git a/web/themes/custom/quartiers_de_demain/scss/pages/_home.scss b/web/themes/custom/quartiers_de_demain/scss/pages/_home.scss new file mode 100644 index 0000000..4609eec --- /dev/null +++ b/web/themes/custom/quartiers_de_demain/scss/pages/_home.scss @@ -0,0 +1,200 @@ + +#home{ + width: 100%; + display: grid; + grid-template-columns: repeat(12, 1fr); + grid-gap: 10px; + .layout-content{ + // grid-column: 3 / 11; + grid-row: 1; + 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; + } + .content_container{ + display: flex; + #block-quartiers-de-demain-titredepage{ + display: none; + } + + article.node-type-static{ + width: 100%; + + .field_body{ + padding-left: 20%; + padding-right: 20%; + @media (max-width:640px) { + padding-left: 10%; + padding-right: 10%; + } + + // width: 80%; + h2{ + font-size: $font-medium; + font-weight: 600; + margin-bottom: 0; + } + img{ + width: 100%; + height: auto; + } + p{ + margin-top: 0; + } + } + .paragraph{ + padding-top: 1rem; + padding-bottom: 1rem; + padding-left: 20%; + padding-right: 20%; + @media (max-width:640px) { + padding-left: 10%; + padding-right: 10%; + } + + } + .field_field_textes{ + .field_field_title{ + text-transform: uppercase; + font-size: $font-big; + font-weight: 400; + } + #paragraph-id--1, #paragraph-id--2, #paragraph-id--6, #paragraph-id--7, #paragraph-id--8{ + .field_field_title{ + color: $blue_QDD; + } + } + #paragraph-id--3, #paragraph-id--4{ + .field_field_title{ + color: $red_QDD; + } + } + #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--7, #paragraph-id--8{ + text-align: center; + } + + #paragraph-id--7{ + display: flex; + flex-direction: column; + .field_field_title{ + width: 60%; + margin: auto; + } + .field_field_texte div:nth-child(2){ + display: flex; + flex-direction: row; + p{ + padding-right: 30px; + text-align: left; + color: $blue_QDD; + } + } + } + + #paragraph-id--8{ + .field_field_texte div:nth-child(2){ + display: flex; + flex-direction: row; + p{ + padding-right: 30px; + text-align: left; + } + } + } + p{ + margin-bottom: 0; + // padding-bottom: 1.5rem; + } + .field_field_picto{ + height: auto; + float: inline-start; + padding-right: 0.5rem; + img{ + width: 40px; + height: auto; + @media(max-width: 891px){ + width: 30px; + } + } + } + #paragraph-id--9{ + img{ + width: -moz-available; + height: auto; + cursor: url(/img/layout/backgrounds/zoom.cur), -moz-zoom-in; + } + } + } + } + } + } + + aside{ + position: relative; + grid-column: 1 /span 2; + grid-row: 1; + z-index: 100; + order: 1; + margin-top: 5rem; + @media(max-width:891px){ + margin-left: 5%; + margin-top: 9rem; + } + @media (max-width:500px) { + width: 80%; + margin-top: 3rem; + } + .sidebar_first_container{ + position: -webkit-sticky; + position: sticky; + top: 10rem; + font-weight: 400; + .field-content{ + margin-bottom: 0.7rem; + } + @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; + } + &::before{ + content: url(../images/noun-arrow-download.svg); + margin: auto; + padding-right: 00.5rem; + } + } + 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/quartiers_de_demain.scss b/web/themes/custom/quartiers_de_demain/scss/quartiers_de_demain.scss index 227327c..1a1e707 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/_home"; @import "pages/partenaires"; @import "pages/presentation"; @import "pages/static"; diff --git a/web/themes/custom/quartiers_de_demain/templates/--paragraph--static-parts.html.twig b/web/themes/custom/quartiers_de_demain/templates/--paragraph--static-parts.html.twig new file mode 100644 index 0000000..ec0722e --- /dev/null +++ b/web/themes/custom/quartiers_de_demain/templates/--paragraph--static-parts.html.twig @@ -0,0 +1,61 @@ +{# +/** + * @file + * Default theme implementation to display a paragraph. + * + * Available variables: + * - paragraph: Full paragraph entity. + * Only method names starting with "get", "has", or "is" and a few common + * methods such as "id", "label", and "bundle" are available. For example: + * - paragraph.getCreatedTime() will return the paragraph creation timestamp. + * - paragraph.id(): The paragraph ID. + * - paragraph.bundle(): The type of the paragraph, for example, "image" or "text". + * - paragraph.getOwnerId(): The user ID of the paragraph author. + * See Drupal\paragraphs\Entity\Paragraph for a full list of public properties + * and methods for the paragraph object. + * - content: All paragraph items. Use {{ content }} to print them all, + * or print a subset such as {{ content.field_example }}. Use + * {{ content|without('field_example') }} to temporarily suppress the printing + * of a given child element. + * - attributes: HTML attributes for the containing element. + * The attributes.class element may contain one or more of the following + * classes: + * - paragraphs: The current template type (also known as a "theming hook"). + * - paragraphs--type-[type]: The current paragraphs type. For example, if the paragraph is an + * "Image" it would result in "paragraphs--type--image". Note that the machine + * name will often be in a short form of the human readable label. + * - paragraphs--view-mode--[view_mode]: The View Mode of the paragraph; for example, a + * preview would result in: "paragraphs--view-mode--preview", and + * default: "paragraphs--view-mode--default". + * - view_mode: View mode; for example, "preview" or "full". + * - logged_in: Flag for authenticated user status. Will be true when the + * current user is a logged-in member. + * - is_admin: Flag for admin user status. Will be true when the current user + * is an administrator. + * + * @see template_preprocess_paragraph() + * + * @ingroup themeable + */ +#} +{% + set classes = [ + 'paragraph', + 'paragraph--type--' ~ paragraph.bundle|clean_class, + view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class, + not paragraph.isPublished() ? 'paragraph--unpublished', + ] +%} +{% + set ancre_href = '#paragraph-id--' ~ paragraph.id() +%} +{% block paragraph %} + {#