css page consultation

web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css

@@ -133,6 +133,11 @@ h3 {
   overflow: hidden;
   display: flex;
   flex-flow: row wrap;
+  -webkit-user-select: none;
+  -webkit-touch-callout: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 .layout-container header {
   flex: 0 0 100%;
@@ -886,4 +891,293 @@ footer span.totop #toTop .arrow-up::before {
 }
 #home .paragraph--type--static-parts:not(#paragraph-id--7) #svg1 {
   display: none;
+}
+
+#consultation {
+  background-color: #f6f7f3;
+}
+#consultation .layout-content {
+  padding-top: 1rem;
+}
+#consultation .layout-content .content_container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+#consultation .layout-content .content_container #block-quartiers-de-demain-titredepage {
+  margin-top: 1rem;
+  width: fit-content;
+}
+#consultation .layout-content .content_container #block-quartiers-de-demain-titredepage h1 {
+  text-transform: none;
+  color: black;
+  font-size: 2rem;
+  font-weight: 500;
+}
+#consultation .layout-content .content_container .node-type-static {
+  width: 80%;
+}
+#consultation .layout-content .content_container .node-type-static::before {
+  content: "";
+  display: block;
+  border-bottom: solid 1px rgb(7, 50, 194);
+  width: 60%;
+  margin: auto;
+}
+#consultation .layout-content .content_container .node-type-static .paragraph--type--static-parts:not(#paragraph-id--7) #svg1 {
+  display: none;
+}
+#consultation .layout-content .content_container .node-type-static #paragraph-id--10 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+#consultation .layout-content .content_container .node-type-static #paragraph-id--10 .field_field_title {
+  padding: 1rem;
+  color: rgb(7, 50, 194);
+  font-size: 2.5rem;
+  font-weight: 500;
+}
+#consultation .layout-content .content_container .node-type-static #paragraph-id--10 .colone-picto {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  padding: 1rem;
+}
+#consultation .layout-content .content_container .node-type-static #paragraph-id--10 .colone-picto p:not(:last-of-type) {
+  flex: 1 15%;
+  color: rgb(7, 50, 194);
+  padding: 0.5rem;
+}
+#consultation .layout-content .content_container .node-type-static #paragraph-id--10 .colone-picto p:not(:last-of-type)::before {
+  content: "";
+  display: block;
+  border-left: solid 1px rgb(7, 50, 194);
+  height: 30%;
+  margin-bottom: 0.5rem;
+}
+#consultation .layout-content .content_container .node-type-static #paragraph-id--10 .colone-picto p:last-of-type {
+  color: black;
+  width: 55%;
+  padding-top: 3rem;
+  margin: auto;
+}
+#consultation .layout-content .content_container .node-type-static #paragraph-id--11 {
+  width: 65%;
+  background-color: white;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 1rem;
+}
+#consultation .layout-content .content_container .node-type-static #paragraph-id--11 .field_field_title {
+  color: rgb(7, 50, 194);
+  font-size: 1.2rem;
+  font-weight: 500;
+}
+#consultation .layout-content .content_container .node-type-static #paragraph-id--11 .colone-picto {
+  display: grid;
+  grid-template-columns: auto auto;
+  grid-template-rows: auto auto;
+  padding: 1rem;
+}
+#consultation .layout-content .content_container .node-type-static #paragraph-id--11 .colone-picto p {
+  flex: 1 15%;
+  padding: 0rem;
+  margin: 0;
+}
+#consultation .layout-content .content_container .node-type-static #paragraph-id--11 .colone-picto p:nth-of-type(1) {
+  grid-column: 1;
+  grid-row: 2;
+}
+#consultation .layout-content .content_container .node-type-static #paragraph-id--11 .colone-picto p:nth-of-type(2) {
+  grid-column: 2;
+  grid-row: 2;
+}
+#consultation .layout-content .content_container .node-type-static #paragraph-id--11 .colone-picto h5 {
+  font-size: 3rem;
+  font-weight: 500;
+  color: rgb(7, 50, 194);
+  margin: 0;
+  height: fit-content;
+}
+#consultation .layout-content .content_container .node-type-static #paragraph-id--11 .colone-picto h5:nth-of-type(1) {
+  grid-column: 1;
+  grid-row: 1;
+}
+#consultation .layout-content .content_container .node-type-static #paragraph-id--11 .colone-picto h5:nth-of-type(2) {
+  grid-column: 2;
+  grid-row: 1;
+}
+#consultation .layout-content .content_container .node-type-static #paragraph-id--12,
+#consultation .layout-content .content_container .node-type-static #paragraph-id--13 {
+  width: 65%;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 1rem;
+}
+#consultation .layout-content .content_container .node-type-static #paragraph-id--12 .field_field_title,
+#consultation .layout-content .content_container .node-type-static #paragraph-id--13 .field_field_title {
+  color: rgb(7, 50, 194);
+  font-size: 1.2rem;
+  font-weight: 500;
+  padding-bottom: 1.5rem;
+}
+#consultation .layout-content .content_container .node-type-static #paragraph-id--12::after {
+  content: "";
+  display: block;
+  border-bottom: solid 1px rgb(7, 50, 194);
+  width: 100%;
+  padding-bottom: 2rem;
+}
+#consultation .layout-content .content_container .node-type-static #paragraph-id--13 .field_field_texte .colone-picto {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+#consultation .layout-content .content_container .node-type-static #paragraph-id--13 .field_field_texte .colone-picto p {
+  width: 30%;
+}
+
+.partenaires .layout-content .content_container #block-quartiers-de-demain-titredepage {
+  grid-column: 3/span 9;
+  grid-row: 1;
+  margin-top: 3rem;
+}
+@media (max-width: 500px) {
+  .partenaires .layout-content .content_container #block-quartiers-de-demain-titredepage {
+    margin-top: 1rem;
+    grid-column: 2/span 9;
+  }
+}
+.partenaires .layout-content .content_container #block-quartiers-de-demain-titredepage h1 {
+  text-transform: uppercase;
+  color: rgb(247, 0, 43);
+  font-size: 1.6rem;
+  font-weight: 300;
+}
+.partenaires .layout-content .content_container .views-element-container {
+  grid-column: 3/span 9;
+  grid-row: 2;
+}
+@media (max-width: 500px) {
+  .partenaires .layout-content .content_container .views-element-container {
+    grid-column: 2/span 9;
+  }
+}
+.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 .layout-content .content_container .views-element-container .node-type-partenaire {
+    display: flex;
+    flex-direction: column;
+  }
+}
+.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_logo {
+  grid-column: 1/3;
+  grid-row: 1/span 3;
+  padding-right: 1rem;
+  margin: auto;
+}
+.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 .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;
+}
+@media (max-width: 810px) {
+  .partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_title {
+    margin-left: 0;
+  }
+}
+.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_body {
+  grid-column: 3/span 8;
+  grid-row: 2;
+  margin-left: 1rem;
+}
+@media (max-width: 810px) {
+  .partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_body {
+    margin-left: 0;
+  }
+}
+.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 rgb(7, 50, 194);
+  width: fit-content;
+  padding-bottom: 0.5rem;
+  margin-left: 1rem;
+}
+@media (max-width: 810px) {
+  .partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien {
+    margin-left: 0;
+  }
+}
+.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien a {
+  display: inline-flex;
+  align-items: center;
+}
+.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien a svg {
+  display: none;
+}
+.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien a::before {
+  display: inline-block;
+  content: url("../img/noun-arrow-to-right.svg");
+  padding-right: 0.5rem;
+  padding-top: 0.2rem;
+}
+
+.node-type-static .layout-content {
+  grid-row: 1;
+}
+.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;
+}
+@media (max-width: 500px) {
+  .node-type-static .layout-content .content_container #block-quartiers-de-demain-titredepage {
+    margin-top: 1rem;
+    grid-column: 2/span 9;
+  }
+}
+.node-type-static .layout-content .content_container #block-quartiers-de-demain-titredepage h1 {
+  text-transform: uppercase;
+  color: rgb(247, 0, 43);
+  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;
+}
+@media (max-width: 500px) {
+  .node-type-static .layout-content .content_container article.node-type-static {
+    grid-column: 2/span 9;
+  }
+}
+.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;
 }

web/themes/custom/quartiers_de_demain/src/assets/scss/global/_layout.scss

@@ -6,6 +6,7 @@ $header-height-ultrasmall : 50px;
 $width-menu-slidedown : 550px; 
 
 .layout-container {
+
     position: relative;
     width: 100vw;
     background-color: $background-home;
@@ -19,6 +20,13 @@ $width-menu-slidedown : 550px;
     display: flex;
     flex-flow: row wrap;
     
+
+    -webkit-user-select: none;
+    -webkit-touch-callout: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    
     header{
         flex: 0 0 100%;
     }

web/themes/custom/quartiers_de_demain/src/assets/scss/pages/consultation.scss

@@ -0,0 +1,167 @@
+#consultation{
+    background-color: #f6f7f3;
+
+
+    .layout-content{
+        padding-top: 1rem;
+        .content_container{
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            #block-quartiers-de-demain-titredepage{
+                margin-top: 1rem;
+                width: fit-content;
+                h1{
+                    text-transform: none;
+                    color: black;
+                    font-size: 2rem;
+                    font-weight: 500;
+                }
+                
+
+                
+            }
+            .node-type-static{
+                &::before{
+                    content:"";
+                    display: block;
+                    border-bottom: solid 1px $blue_QDD;
+                    width: 60% ;
+                    margin: auto;
+                }
+                
+                width: 80%;
+                .paragraph--type--static-parts:not(#paragraph-id--7){
+                    #svg1{
+                        display: none;
+                    }
+                } 
+                #paragraph-id--10{
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    .field_field_title{
+                        padding: 1rem;
+                        color: $blue_QDD;
+                        font-size: 2.5rem;
+                        font-weight: 500;
+                    }
+                    .colone-picto{
+                        display: flex;
+                        flex-direction: row;
+                        flex-wrap: wrap;
+                        padding: 1rem;
+                        p:not(:last-of-type){
+                            flex: 1 15%;
+                            color: $blue_QDD;
+                            padding: 0.5rem;
+                            &::before{
+                                content:"";
+                                display: block;
+                                border-left: solid 1px $blue_QDD;
+                                height: 30%;
+                                margin-bottom: 0.5rem;
+                            }
+                        }
+                         
+                        p:last-of-type{
+                            color: black;
+                            // flex: 1 80%;
+                            width: 55%;
+                            padding-top: 3rem;
+                            margin: auto;
+                        }
+                        
+                    }                 
+                }  
+                #paragraph-id--11{
+                    width: 65%;
+                    background-color: white;
+                    margin: auto;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    padding: 1rem;
+                    .field_field_title{
+                        color: $blue_QDD;
+                        font-size: 1.2rem;
+                        font-weight: 500;
+                    }
+                    .colone-picto{
+                        display: grid;
+                        grid-template-columns: auto auto;
+                        grid-template-rows: auto auto;
+                        padding: 1rem;
+                        p{
+                            flex: 1 15%;
+                            padding: 0rem;
+                            margin: 0;
+                            
+                            &:nth-of-type(1){
+                                grid-column: 1;
+                                grid-row: 2;
+                            }
+                            &:nth-of-type(2){
+                                grid-column: 2;
+                                grid-row: 2;
+                            }
+                        }
+                        h5{
+                            
+                            font-size: 3rem;
+                            font-weight: 500;
+                            color: $blue_QDD;
+                            margin: 0;
+                            height: fit-content;
+                            &:nth-of-type(1){
+                                grid-column: 1;
+                                grid-row: 1;
+                            }
+                            &:nth-of-type(2){
+                                grid-column: 2;
+                                grid-row: 1;
+                            }
+
+                        }
+                    }
+                }
+                #paragraph-id--12,
+                #paragraph-id--13{
+                    width: 65%;
+                    margin: auto;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    padding: 1rem;
+                    .field_field_title{
+                        color: $blue_QDD;
+                        font-size: 1.2rem;
+                        font-weight: 500;
+                        padding-bottom: 1.5rem;
+
+                    }
+                }
+
+                #paragraph-id--12::after{
+                        content:"";
+                        display: block;
+                        border-bottom: solid 1px $blue_QDD;
+                        width: 100% ;  
+                        padding-bottom: 2rem; 
+                }
+                #paragraph-id--13{
+                    .field_field_texte{
+                        .colone-picto{
+                            display: flex;
+                            flex-direction: row;                           
+                            justify-content: space-between ;
+                            p{
+                                width: 30%;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss

@@ -165,9 +165,6 @@
             .field_field_texte{
                 width: 80%;
                 .colone-picto{
-                    // display: flex;
-                    // flex-direction:row ;
-                    // justify-content: center;
                     margin-top: 2rem;
                     display: grid;
                     grid-template-columns: repeat(6 auto);
@@ -177,7 +174,6 @@
                         font-weight: 800;
                         margin-bottom: 0;
                         margin: 0;
-                       
                     }
                     h5:nth-of-type(1){
                         grid-row: 2;
@@ -222,7 +218,6 @@
                         grid-row: 3;
                         grid-column: 5;
                     }
-                    
                 }
             }
         }

web/themes/custom/quartiers_de_demain/src/assets/scss/quartiers_de_demain.scss

@@ -28,7 +28,8 @@
 
 /*pages*/
 @import "pages/home";
-// @import "pages/partenaires";
+@import "pages/consultation";
+@import "pages/partenaires";
 // @import "pages/presentation";
-// @import "pages/static";
+@import "pages/static";
 

web/themes/custom/quartiers_de_demain/templates/page--node--7.html.twig

@@ -0,0 +1,94 @@
+{#
+/**
+ * @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
+ */
+#}
+<div class="layout-container consultation" >
+
+  <header role="banner">
+    {{ page.header_left }}
+    {{ page.header_right }}
+    {{ page.header_nav }}
+  </header>
+
+  {{ page.primary_menu }}
+  {{ page.secondary_menu }}
+
+  {{ page.breadcrumb }}
+
+  {{ page.highlighted }}
+
+  {{ page.help }}
+
+  <main role="main" id="consultation">
+    <a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
+
+    <div class="layout-content">
+      {{ page.content }}
+    </div>{# /.layout-content #}
+
+    {% if page.sidebar_first %}
+      <aside class="layout-sidebar-first" role="complementary">
+        {{ page.sidebar_first }}
+      </aside>
+    {% endif %}
+
+    {% if page.sidebar_second %}
+      <aside class="layout-sidebar-second" role="complementary">
+        {{ page.sidebar_second }}
+      </aside>
+    {% endif %}
+
+  </main>
+
+  {# {% if page.footer_top or page.footer_left or page.footer_middle or page.footer_right or page.footer_bottom %} #}
+    <footer role="contentinfo">
+      {# <section id="footer-top"> #}
+          <span class="totop"><a href="#" id="toTop"><i class="arrow-up"></i></a></span>
+      {# </section>  #}
+      <div class="footer">
+        <section id="footer-left">{{ page.footer_left }}</section> 
+        <section id="footer-middle">{{ page.footer_middle }}</section> 
+        <section id="footer-right">{{ page.footer_right }}</section> 
+      </div> 
+      {# <section id="footer-bottom">{{ page.footer_bottom }}</section>  #}
+    </footer>
+  {# {% endif %} #}
+
+</div>{# /.layout-container #}