debut css accueil

web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css

@@ -111,39 +111,13 @@
   .layout-container main {
     width: 100%;
     display: grid;
-    grid-template-columns: repeat(12, 1fr);
+    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;
+  grid-column: 1 / span 12; }
-  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 {
@@ -324,96 +298,123 @@ header {
       text-transform: uppercase; }
 
 /*pages*/
-.node-id-6 .content_container {
+#presentation {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  grid-gap: 10px; }
+  #presentation .layout-content {
+    grid-column: 3 / 11;
+    order: 2;
+    padding-top: 3rem;
+    padding-bottom: 6rem; }
+    @media (max-width: 891px) {
+      #presentation .layout-content {
+        width: 90%; } }
+    @media (max-width: 500px) {
+      #presentation .layout-content {
+        padding-top: 0; } }
+    #presentation .layout-content .content_container {
       display: flex; }
-  .node-id-6 .content_container #block-quartiers-de-demain-titredepage {
+      #presentation .layout-content .content_container #block-quartiers-de-demain-titredepage {
         display: none; }
-  .node-id-6 .content_container article.node-type-static {
+      #presentation .layout-content .content_container article.node-type-static {
-    grid-column: 1 /span 9;
+        width: 100%; }
-    grid-row: 2; }
+        #presentation .layout-content .content_container article.node-type-static div.field_body h2 {
-    .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 {
+        #presentation .layout-content .content_container article.node-type-static div.field_body p {
           margin-top: 0; }
+  #presentation aside {
+    grid-column: 1 /span 2;
+    order: 1;
+    margin-top: 5rem; }
+    @media (max-width: 891px) {
+      #presentation aside {
+        margin-left: 5%;
+        margin-top: 9rem; } }
+    @media (max-width: 500px) {
+      #presentation aside {
+        width: 80%;
+        margin-top: 3rem; } }
 
-.partenaires .content_container #block-quartiers-de-demain-titredepage {
+.partenaires .layout-content .content_container #block-quartiers-de-demain-titredepage {
   grid-column: 3 /span 9;
   grid-row: 1;
   margin-top: 3rem; }
-  .partenaires .content_container #block-quartiers-de-demain-titredepage h1 {
+  .partenaires .layout-content .content_container #block-quartiers-de-demain-titredepage h1 {
     text-transform: uppercase;
     color: #f7002b;
     font-size: 1.6rem;
     font-weight: 300; }
 
-.partenaires .content_container .views-element-container {
+.partenaires .layout-content .content_container .views-element-container {
   grid-column: 3 /span 9;
   grid-row: 2; }
-  .partenaires .content_container .views-element-container .node-type-partenaire {
+  .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 .content_container .views-element-container .node-type-partenaire {
+      .partenaires .layout-content .content_container .views-element-container .node-type-partenaire {
         display: flex;
         flex-direction: column; } }
-    .partenaires .content_container .views-element-container .node-type-partenaire .field_field_logo {
+    .partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_logo {
       grid-column: 1 /span 2;
       grid-row: 1 /span 3;
       padding-right: 1rem;
       margin: auto; }
-      .partenaires .content_container .views-element-container .node-type-partenaire .field_field_logo img {
+      .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 .content_container .views-element-container .node-type-partenaire .field_title {
+    .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; }
-    .partenaires .content_container .views-element-container .node-type-partenaire .field_body {
+    .partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_body {
       grid-column: 3 /span 8;
       grid-row: 2;
       margin-left: 1rem; }
-    .partenaires .content_container .views-element-container .node-type-partenaire .field_field_lien {
+    .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 #0732c2;
       width: fit-content;
       padding-bottom: 0.5rem;
       margin-left: 1rem; }
-      .partenaires .content_container .views-element-container .node-type-partenaire .field_field_lien a {
+      .partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien a {
         display: inline-flex;
         align-items: center; }
-        .partenaires .content_container .views-element-container .node-type-partenaire .field_field_lien a svg {
+        .partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien a svg {
           display: none; }
-        .partenaires .content_container .views-element-container .node-type-partenaire .field_field_lien a::before {
+        .partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien a::before {
           display: inline-block;
           content: url("../images/noun-arrow-to-right.svg");
           padding-right: 0.5rem;
           padding-top: 0.2rem; }
 
-.node-type-static .content_container #block-quartiers-de-demain-titredepage {
+.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 .content_container #block-quartiers-de-demain-titredepage h1 {
+  .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 .content_container article.node-type-static {
+.node-type-static .layout-content .content_container article.node-type-static {
   grid-column: 3 /span 9;
   grid-row: 2; }
-  .node-type-static .content_container article.node-type-static div.field_body h2 {
+  .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 .content_container article.node-type-static div.field_body p {
+  .node-type-static .layout-content .content_container article.node-type-static div.field_body p {
     margin-top: 0; }

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

@@ -12,7 +12,6 @@ $width-menu-slidedown : 550px;
     font-size: $font-medium;
     top: 0%;
     left: 0%;
-    // width: 100%;
     overflow: hidden;
     display: flex;
     flex-flow: row wrap;
@@ -20,10 +19,7 @@ $width-menu-slidedown : 550px;
     header{
         flex: 0 0 100%;
     }
-    // main{
+   
-    //     // position: relative;
-    //     // top: -7rem;
-    // }
     footer{
         flex: 0 0 100%;
     }
@@ -31,63 +27,16 @@ $width-menu-slidedown : 550px;
         width: 100%;
         display: grid;
         grid-template-columns: repeat(12, 1fr);
-        grid-gap: 10px;
-        padding-left: 10px;
-        padding-right: 10px;
     }
     .content_container{
-
         display: grid;
         grid-template-columns: repeat(12, 1fr);
     }
 }
 
 .layout-content{
-    grid-column: 3 /span 10;
+    grid-column: 1 / span 12;
-    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{
-    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;
-//     flex-direction: row;
-//     position: relative;
-//     @media (max-width:500px) {
-//         flex-direction: column;
-//     }
-
-
-// }
-
-// .main-content{
-//     margin-top: 7rem;
-// }
-

web/themes/custom/quartiers_de_demain/scss/pages/_partenaires.scss

@@ -1,5 +1,8 @@
 .partenaires{
     // font-family: $font-family-default;
+    .layout-content{
+        // grid-column: 1 / span 12;
+
         .content_container{
             // display: grid;
             // grid-template-columns: repeat(12, 1fr);
@@ -83,3 +86,5 @@
         }
     }
 
+}
+    

web/themes/custom/quartiers_de_demain/scss/pages/_presentation.scss

@@ -1,10 +1,28 @@
-.node-id-6{
 
+#presentation{
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    grid-gap: 10px;
+    .layout-content{
+        grid-column: 3 / 11;
+        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%;
     
@@ -21,3 +39,26 @@
             }
         }
     }    
+    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;
+        }
+    }
+}
+        
+        
+        
+    
+
+

web/themes/custom/quartiers_de_demain/scss/pages/_static.scss

@@ -1,4 +1,6 @@
 .node-type-static{
+    .layout-content{
+        // grid-column: 1 / span 12;
         .content_container{
 
             #block-quartiers-de-demain-titredepage{
@@ -30,5 +32,5 @@
             }
         }
     }
-// html.js body.node-type-static.node-id-2 div.dialog-off-canvas-main-canvas div.layout-container main div.layout-content div.content_container article.node-type-static
+   
-// html.no-touchevents.js body.node-type-static.node-id-1.toolbar-horizontal.toolbar-fixed.toolbar-tray-open div.dialog-off-canvas-main-canvas div.layout-container main div.layout-content div.content_container article.contextual-region.node-type-static
+}

web/themes/custom/quartiers_de_demain/scss/quartiers_de_demain.scss

@@ -26,7 +26,7 @@
 
 
 /*pages*/
-@import "pages/_presentation";
+@import "pages/presentation";
 @import "pages/partenaires";
 @import "pages/static";
 

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

@@ -0,0 +1,92 @@
+{#
+/**
+ * @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" >
+
+  <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="presentation">
+    <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">{{ page.footer_top }}</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 #}