debut css accueil

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;

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{
+.layout-content{
-//     order: 2;
+    grid-column: 3 /span 10;
-//     padding-top: 3rem;
+    order: 2;
-//     padding-bottom: 6rem;
+    padding-top: 3rem;
-//     width: 70%;
+    padding-bottom: 6rem;
-//     margin: auto;
+    // width: 70%;
-//     @media(max-width: 891px){
+    margin: auto;
-//         width: 90%;
+    @media(max-width: 891px){
-//     }
+        width: 90%;
-//     @media (max-width:500px) {
+    }
-//        padding-top: 0;
+    @media (max-width:500px) {
-//     }
+       padding-top: 0;
+    }
 
         
-// }
+}
 
-// aside{
+aside{
-//     width: 20%;
+    grid-column: 1 /span 2;
-//     order: 1;
+    // width: 80%;
-//     margin-top: 5rem;
+    order: 1;
-//     margin-left: 10%;
+    margin-top: 5rem;
-//     margin-right: 1rem;
+    // margin-left: 10%;
-//     @media(max-width:891px){
+    // margin-right: 1rem;
-//         margin-left: 5%;
+    @media(max-width:891px){
-//         margin-top: 9rem;
+        margin-left: 5%;
-//     }
+        margin-top: 9rem;
-//     @media (max-width:500px) {
+    }
-//         width: 80%;
+    @media (max-width:500px) {
-//         margin-top: 3rem;
+        width: 80%;
-//     }
+        margin-top: 3rem;
-// }
+    }
+}
 // main{
 //     width: 100%;
 //     display: flex;

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;
+                }
+            }
+        }
+    }
+}

web/themes/custom/quartiers_de_demain/scss/partials/_aside.scss

@@ -1,34 +1,13 @@
-// .layout-sidebar-first{
+.layout-sidebar-first{
-
+    display: flex;
-//     #block-reha-phase1{
+    justify-content: end;
-//         border: solid $yellow-puca 1px;
+    .sidebar_first_container{
-//         font-weight: 800;
+        width: 80%;
-//         padding: 1rem;
+        
-//         width: 80%;
+        #block-quartiers-de-demain-views-block-statics-block-1{
-//         @media(max-width:891px){
+            text-transform: uppercase;
-//             width: 100%;
+        }
-//         }
-//         h2{
-//             margin-top: 0;
-//             margin-bottom: 0;
-//             text-transform: lowercase;
-//             font-weight: 1000;
-//             line-height: 1rem;
-//             font-size:1.5rem ;
     
-//         }
+    
-
+    }   
-//         p{
+}
-//             font-size: 1.5rem;
-//             line-height: 1.8rem;
-//             margin-top: 0.8rem;
-//         }
-
-//         footer{
-//             @extend %buttonwithborder;
-//             width: fit-content;
-//         }
-//     }
-
-   
-// }

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";
+

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 %}
+  {# <div{{ attributes.addClass(classes) }}> #}
+    <div{{ attributes.addClass(classes) }}>
+      <a href="{{ ancre_href }}">
+        {% block content %}
+          {{ content }}
+        {% endblock %}
+      </a>
+  </div>
+{% endblock paragraph %}

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 %}
+  {# <div{{ attributes.addClass(classes) }}> #}
+    <div{{ attributes.addClass(classes).setAttribute('id', 'paragraph-id--' ~ paragraph.id()) }}>
+    {% block content %}
+      {{ content }}
+    {% endblock %}
+  </div>
+{% endblock paragraph %}