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 c72b2a3..28833c3 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 @@ -109,11 +109,42 @@ .layout-container footer { flex: 0 0 100%; } .layout-container main { - width: 100%; } + width: 100%; + display: grid; + grid-template-columns: repeat(12, 1fr); + grid-gap: 10px; + padding-left: 10px; + padding-right: 10px; } .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; } } + /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */ ul { list-style-type: none; } @@ -284,7 +315,29 @@ header { .footer div { flex-direction: column; } } +.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; } + /*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; } + .partenaires .content_container #block-quartiers-de-demain-titredepage { grid-column: 3 /span 9; grid-row: 1; 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 6848829..14ba4ba 100644 --- a/web/themes/custom/quartiers_de_demain/scss/global/_layout.scss +++ b/web/themes/custom/quartiers_de_demain/scss/global/_layout.scss @@ -29,6 +29,11 @@ $width-menu-slidedown : 550px; } main{ width: 100%; + display: grid; + grid-template-columns: repeat(12, 1fr); + grid-gap: 10px; + padding-left: 10px; + padding-right: 10px; } .content_container{ @@ -37,37 +42,39 @@ $width-menu-slidedown : 550px; } } -// .layout-content{ -// 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; -// } +.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; + } -// } +} -// aside{ -// width: 20%; -// 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; -// } -// } +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; diff --git a/web/themes/custom/quartiers_de_demain/scss/pages/_presentation.scss b/web/themes/custom/quartiers_de_demain/scss/pages/_presentation.scss new file mode 100644 index 0000000..29d6883 --- /dev/null +++ b/web/themes/custom/quartiers_de_demain/scss/pages/_presentation.scss @@ -0,0 +1,23 @@ +.node-id-6{ + + .content_container{ + display: flex; + #block-quartiers-de-demain-titredepage{ + display: none; + } + article.node-type-static{ + width: 100%; + + div.field_body{ + h2{ + font-size: $font-medium; + font-weight: 600; + margin-bottom: 0; + } + p{ + margin-top: 0; + } + } + } + } +} \ No newline at end of file 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 ab0b7ed..07ae03b 100644 --- a/web/themes/custom/quartiers_de_demain/scss/partials/_aside.scss +++ b/web/themes/custom/quartiers_de_demain/scss/partials/_aside.scss @@ -1,34 +1,13 @@ -// .layout-sidebar-first{ - -// #block-reha-phase1{ -// border: solid $yellow-puca 1px; -// font-weight: 800; -// padding: 1rem; -// width: 80%; -// @media(max-width:891px){ -// width: 100%; -// } -// h2{ -// margin-top: 0; -// margin-bottom: 0; -// text-transform: lowercase; -// font-weight: 1000; -// line-height: 1rem; -// font-size:1.5rem ; +.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; + } -// } - -// p{ -// font-size: 1.5rem; -// line-height: 1.8rem; -// margin-top: 0.8rem; -// } - -// footer{ -// @extend %buttonwithborder; -// width: fit-content; -// } -// } - - -// } \ No newline at end of file + + } +} \ 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 acd3d41..0938372 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,5 +26,7 @@ /*pages*/ -@import "pages/partenaires.scss"; +@import "pages/_presentation"; +@import "pages/partenaires"; @import "pages/static"; + diff --git a/web/themes/custom/quartiers_de_demain/templates/paragraph--texte--textes-toc.html.twig b/web/themes/custom/quartiers_de_demain/templates/paragraph--texte--textes-toc.html.twig new file mode 100644 index 0000000..3f6182d --- /dev/null +++ b/web/themes/custom/quartiers_de_demain/templates/paragraph--texte--textes-toc.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 %} + {# #} + + + {% block content %} + {{ content }} + {% endblock %} + + +{% endblock paragraph %} diff --git a/web/themes/custom/quartiers_de_demain/templates/paragraph.html.twig b/web/themes/custom/quartiers_de_demain/templates/paragraph.html.twig new file mode 100644 index 0000000..3becf0f --- /dev/null +++ b/web/themes/custom/quartiers_de_demain/templates/paragraph.html.twig @@ -0,0 +1,56 @@ +{# +/** + * @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' + ] +%} +{% block paragraph %} + {# #} + + {% block content %} + {{ content }} + {% endblock %} + +{% endblock paragraph %}