preprocess page partenaires

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

@@ -98,6 +98,7 @@
   font-family: "Marianne", sans-serif;
   font-weight: 400;
   font-style: normal;
+  font-size: 0.6rem;
   top: 0%;
   left: 0%;
   overflow: hidden;
@@ -108,6 +109,34 @@
   .layout-container footer {
     flex: 0 0 100%; }
 
+/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
+html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+  margin: 0;
+  padding: 0; }
+
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
+  display: block; }
+
+body {
+  line-height: 1; }
+
+ol, ul {
+  list-style: none; }
+
+blockquote, q {
+  quotes: none; }
+
+blockquote:before, blockquote:after, q:before, q:after {
+  content: none; }
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0; }
+
 ul {
   list-style-type: none; }
 
@@ -215,24 +244,36 @@ header {
 .footer {
   display: grid;
   grid-template-columns: repeat(12, 1fr);
-  grid-gap: 10px;
+  grid-template-rows: repeat(1, 1fr);
   background-color: white;
   padding-top: 3rem;
-  font-family: "Marianne";
+  font-size: 0.6rem; }
-  font-weight: 800;
+  .footer section {
-  font-size: 1.1rem;
+    width: fit-content; }
-  text-transform: lowercase; }
+  .footer h2, .footer ul {
+    margin: 0; }
   .footer #footer-left {
-    grid-column: 1 /span 3; }
+    grid-column: 1 /span 5;
-    .footer #footer-left #block-quartiers-de-demain-logoepau {
+    grid-row: 1; }
+    .footer #footer-left .footer_left_container {
+      display: flex;
+      flex-direction: row; }
+      .footer #footer-left .footer_left_container #block-quartiers-de-demain-logoepau {
         height: 150px; }
-    .footer #footer-left img {
+      .footer #footer-left .footer_left_container img {
         width: 150px;
         height: auto; }
   .footer #footer-middle {
-    grid-column: 6 /span 7; }
+    grid-column: 6 /span 7;
+    grid-row: 1; }
+    .footer #footer-middle #block-quartiers-de-demain-pieddepage-2-menu {
+      display: none; }
   .footer #footer-right {
-    grid-column: 9 /span 12; }
+    grid-column: 9 /span 12;
+    grid-row: 1;
+    font-size: 0.6rem; }
+    .footer #footer-right #block-quartiers-de-demain-socialmedialinks {
+      flex-direction: column; }
   @media (max-width: 891px) {
     .footer div {
       flex-wrap: wrap; } }
@@ -240,10 +281,50 @@ header {
     .footer div {
       flex-direction: column; } }
 
-#block-quartiers-de-demain-pieddepage-2-menu {
-  display: none; }
-
-#block-quartiers-de-demain-socialmedialinks {
-  flex-direction: column; }
-
 /*pages*/
+.partenaires .content_container {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr); }
+  .partenaires .content_container #block-quartiers-de-demain-titredepage {
+    grid-column: 3 /span 9;
+    grid-row: 1;
+    margin-top: 3rem;
+    margin-bottom: 3rem; }
+    .partenaires .content_container #block-quartiers-de-demain-titredepage h1 {
+      text-transform: uppercase;
+      color: #f7002b;
+      font-size: 1.6rem; }
+  .partenaires .content_container .views-element-container {
+    grid-column: 3 /span 9;
+    grid-row: 2; }
+
+.node-type-partenaire {
+  width: 100%;
+  padding-bottom: 3rem;
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  grid-template-rows: repeat(auto-fill); }
+  @media (max-width: 810px) {
+    .node-type-partenaire {
+      display: flex;
+      flex-direction: column; } }
+  .node-type-partenaire .field--name-field-logo {
+    grid-column: 1 / 2;
+    grid-row: 2;
+    margin-top: 2rem;
+    padding-right: 1rem; }
+  .node-type-partenaire .field--name-field-titre {
+    grid-column: 2 / 8;
+    grid-row: 1;
+    font-weight: 800; }
+  .node-type-partenaire .field--name-field-texte {
+    grid-column: 2 / 8;
+    grid-row: 2; }
+  .node-type-partenaire .field--name-field-lien {
+    grid-column: 2 / 8;
+    grid-row: 3; }
+
+a {
+  font-weight: 800; }
+  a svg {
+    display: none; }

web/themes/custom/quartiers_de_demain/quartiers_de_demain.theme

@@ -49,6 +49,17 @@ function quartiers_de_demain_preprocess_region(&$variables) {
 
 }
 
+
+/* implements template_preprocess_field() */
+
+function quartiers_de_demain_preprocess_field(&$variables) {
+  $node = \Drupal::routeMatch()->getParameter('node');
+
+  if (isset($variables['field_name'])) {
+    $variables['attributes']['class'][] = 'field_'.$variables['field_name']; 
+  }
+}
+
 /**
  * Prepares variables for block templates.
  *

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

@@ -9,6 +9,7 @@ $width-menu-slidedown : 550px;
     font-family: $font-family-default;
     font-weight: 400;
     font-style: normal;
+    font-size: $font-normal;
     top: 0%;
     left: 0%;
     // width: 100%;

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

@@ -1,3 +1,7 @@
+
+/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
+html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
+
 ul{
     list-style-type: none;
 }
@@ -25,3 +29,5 @@ svg.mailto{
 svg.ext{
     display: none;
 }
+
+

web/themes/custom/quartiers_de_demain/scss/global/variables/_colors.scss

@@ -8,6 +8,7 @@ $white-button: rgb(255, 255, 255);
 $white-header:rgb(255, 255, 255);
 $yellow-puca: #fdc300;
 $bleu_fond_header: rgb(232, 235, 244);
+$red_QDD: rgb(247, 0, 43);
 
 
 

web/themes/custom/quartiers_de_demain/scss/global/variables/_typography.scss

@@ -4,6 +4,12 @@ $font-family-header: "Marianne", sans-serif;
 $font-family-chapeau: "Marianne", sans-serif;
 
 
+$font-extra: 2.3rem;
+$font-large: 1.6rem;
+$font-big: 1rem;
+$font-medium: .8rem;
+$font-normal: .6rem;
+$font-small: .45rem;
 
 
 

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

@@ -0,0 +1,120 @@
+.partenaires{
+    .content_container{
+        display: grid;
+        grid-template-columns: repeat(12, 1fr);
+        #block-quartiers-de-demain-titredepage{
+            grid-column: 3 /span 9;
+            grid-row: 1;
+            margin-top: 3rem;
+            margin-bottom: 3rem;
+
+            h1{
+                text-transform: uppercase;
+                color: $red_QDD ;
+                font-size: $font-large;
+            }
+        }
+        .views-element-container{
+            grid-column: 3 /span 9;
+            grid-row: 2;
+
+        }
+    }
+}
+
+// .field--name-field-partenaires{
+//     padding-top: 3rem;
+    .node-type-partenaire{
+        width: 100%;
+        padding-bottom: 3rem;
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        grid-template-rows: repeat(auto-fill);
+        @media (max-width: 810px){
+            display: flex;
+            flex-direction: column;
+        }
+        .field--name-field-logo{
+        
+            grid-column: 1 / 2;
+            grid-row:  2;
+            margin-top: 2rem;
+            padding-right: 1rem;
+        }
+        .field--name-field-titre{
+            grid-column: 2 / 8;
+            grid-row:  1;
+            font-weight: 800;
+            
+        }
+        .field--name-field-texte{
+            grid-column: 2 / 8;
+            grid-row:  2;
+        }
+        .field--name-field-lien{
+            grid-column: 2 / 8;
+            grid-row:  3;
+        }
+    
+    }
+    a{
+        font-weight: 800;
+        svg{
+            display: none;
+        }
+    }
+    
+// }
+
+// .field--name-field-equipes{
+//     padding-top: 3rem;
+//     .paragraph--type--equipe{
+//         width: 100%;
+
+//         .paragraph--type--personne{
+//             width: 100%;
+//             padding-bottom: 3rem;
+//             display: grid;
+//             grid-template-columns: repeat(7, 1fr);
+//             grid-template-rows: repeat(auto-fill);
+//             @media (max-width: 810px){
+//                 display: flex;
+//                 flex-direction: column;
+//             }
+
+//             .field--name-field-photo{
+        
+//                 grid-column: 1 / 2;
+//                 grid-row:  1 / span 3;
+//                 // margin-top: 2rem;
+//                 padding-right: 1rem;
+//                 img{
+//                     border-radius: 50%;
+//                 }
+//             }
+//             .field--name-field-prenom{
+//                 grid-column: 2 / span 3;
+//                 grid-row:  1;
+//                 font-weight: 800;
+                
+//             }
+//             .field--name-field-nom{
+//                 grid-column: 2 / span 3;
+//                 grid-row:  2;
+//             }
+//             .field--name-field-fonction{
+//                 grid-column: 2 / 8;
+//                 grid-row:  3;
+//             }
+//         }
+
+    
+//     }
+//     a{
+//         font-weight: 800;
+//         svg{
+//             display: none;
+//         }
+//     }
+    
+// }

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

@@ -1,34 +1,47 @@
 .footer{
     display: grid;
     grid-template-columns: repeat(12, 1fr);
-    grid-gap: 10px;
+    grid-template-rows: repeat(1, 1fr);
+    // grid-gap: 10px;
     background-color: $white-header;
     padding-top: 3rem;
-    font-family: "Marianne";
+    font-size: $font-normal;
-    font-weight: 800;
+    section{width: fit-content;}
-    font-size: 1.1rem;
+    h2, ul{margin: 0;}
-    text-transform: lowercase;
+    
     #footer-left{
-        grid-column: 1 /span 3;
+        grid-column: 1 /span 5;
+        grid-row: 1;
+        .footer_left_container{
+            display: flex;
+            flex-direction: row;
             #block-quartiers-de-demain-logorepu{
 
             }
             #block-quartiers-de-demain-logoepau{
             height: $header-height;
-           
             }
             img{
                 width: $header-height;
                 height: auto;
             }
         }
+ 
+    }
     #footer-middle{
         grid-column: 6 /span 7;
-
+        grid-row: 1;
+        #block-quartiers-de-demain-pieddepage-2-menu{
+            display: none;
+        }
     }
     #footer-right{
         grid-column: 9 /span 12;
-
+        grid-row: 1;
+        font-size: $font-normal;
+        #block-quartiers-de-demain-socialmedialinks{
+            flex-direction: column;
+        }
     }
 
     div{
@@ -46,10 +59,3 @@
 
 }
 
-#block-quartiers-de-demain-pieddepage-2-menu{
-    display: none;
-}
-
-#block-quartiers-de-demain-socialmedialinks{
-    flex-direction: column;
-}

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

@@ -18,6 +18,7 @@
 
 
 
+
 /*partials*/
 @import "partials/header";
 @import "partials/footer";
@@ -25,4 +26,4 @@
 
 
 /*pages*/
-
+@import "pages/partenaires.scss";

web/themes/custom/quartiers_de_demain/templates/field.html.twig

@@ -0,0 +1,76 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a field.
+ *
+ * To override output, copy the "field.html.twig" from the templates directory
+ * to your theme's directory and customize it, just like customizing other
+ * Drupal templates such as page.html.twig or node.html.twig.
+ *
+ * Instead of overriding the theming for all fields, you can also just override
+ * theming for a subset of fields using
+ * @link themeable Theme hook suggestions. @endlink For example,
+ * here are some theme hook suggestions that can be used for a field_foo field
+ * on an article node type:
+ * - field--node--field-foo--article.html.twig
+ * - field--node--field-foo.html.twig
+ * - field--node--article.html.twig
+ * - field--field-foo.html.twig
+ * - field--text-with-summary.html.twig
+ * - field.html.twig
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - label_hidden: Whether to show the field label or not.
+ * - title_attributes: HTML attributes for the title.
+ * - label: The label for the field.
+ * - multiple: TRUE if a field can contain multiple items.
+ * - items: List of all the field items. Each item contains:
+ *   - attributes: List of HTML attributes for each item.
+ *   - content: The field item's content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
+ *
+ * @see template_preprocess_field()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set title_classes = [
+    'field',
+    'field--name-' ~ field_name|clean_class,
+    'field--type-' ~ field_type|clean_class,
+    'field--label-' ~ label_display,
+    label_display == 'visually_hidden' ? 'visually-hidden',
+  ]
+%}
+
+{% if label_hidden %}
+  {% if multiple %}
+    <div{{ attributes }}>
+      {% for item in items %}
+        <div{{ item.attributes }}>{{ item.content }}</div>
+      {% endfor %}
+    </div>
+  {% else %}
+    {% for item in items %}
+      <div{{ attributes }}>{{ item.content }}</div>
+    {% endfor %}
+  {% endif %}
+{% else %}
+  <div{{ attributes }}>
+    <div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
+    {% if multiple %}
+      <div>
+    {% endif %}
+    {% for item in items %}
+      <div{{ item.attributes }}>{{ item.content }}</div>
+    {% endfor %}
+    {% if multiple %}
+      </div>
+    {% endif %}
+  </div>
+{% endif %}

web/themes/custom/quartiers_de_demain/templates/node--partenaire.html.twig

@@ -0,0 +1,95 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a node.
+ *
+ * Available variables:
+ * - node: The node entity with limited access to object properties and methods.
+ *   Only method names starting with "get", "has", or "is" and a few common
+ *   methods such as "id", "label", and "bundle" are available. For example:
+ *   - node.getCreatedTime() will return the node creation timestamp.
+ *   - node.hasField('field_example') returns TRUE if the node bundle includes
+ *     field_example. (This does not indicate the presence of a value in this
+ *     field.)
+ *   - node.isPublished() will return whether the node is published or not.
+ *   Calling other methods, such as node.delete(), will result in an exception.
+ *   See \Drupal\node\Entity\Node for a full list of public properties and
+ *   methods for the node object.
+ * - label: (optional) The title of the node.
+ * - content: All node 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.
+ * - author_picture: The node author user entity, rendered using the "compact"
+ *   view mode.
+ * - metadata: Metadata for this node.
+ * - date: (optional) Themed creation date field.
+ * - author_name: (optional) Themed author name field.
+ * - url: Direct URL of the current node.
+ * - display_submitted: Whether submission information should be displayed.
+ * - attributes: HTML attributes for the containing element.
+ *   The attributes.class element may contain one or more of the following
+ *   classes:
+ *   - node: The current template type (also known as a "theming hook").
+ *   - node--type-[type]: The current node type. For example, if the node is an
+ *     "Article" it would result in "node--type-article". Note that the machine
+ *     name will often be in a short form of the human readable label.
+ *   - node--view-mode-[view_mode]: The View Mode of the node; for example, a
+ *     teaser would result in: "node--view-mode-teaser", and
+ *     full: "node--view-mode-full".
+ *   The following are controlled through the node publishing options.
+ *   - node--promoted: Appears on nodes promoted to the front page.
+ *   - node--sticky: Appears on nodes ordered above other non-sticky nodes in
+ *     teaser listings.
+ *   - node--unpublished: Appears on unpublished nodes visible only to site
+ *     admins.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - content_attributes: Same as attributes, except applied to the main
+ *   content tag that appears in the template.
+ * - author_attributes: Same as attributes, except applied to the author of
+ *   the node tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ * - view_mode: View mode; for example, "teaser" or "full".
+ * - teaser: Flag for the teaser state. Will be true if view_mode is 'teaser'.
+ * - page: Flag for the full page state. Will be true if view_mode is 'full'.
+ * - readmore: Flag for more state. Will be true if the teaser content of the
+ *   node cannot hold the main body content.
+ * - 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_node()
+ *
+ * @ingroup themeable
+ */
+#}
+<article{{ attributes }}>
+
+  {{ title_prefix }}
+  {% if label and not page %}
+    <h2{{ title_attributes }}>
+      <a href="{{ url }}" rel="bookmark">{{ label }}</a>
+    </h2>
+  {% endif %}
+  {{ title_suffix }}
+
+  {% if display_submitted %}
+    <footer>
+      {{ author_picture }}
+      <div{{ author_attributes }}>
+        {% trans %}Submitted by {{ author_name }} on {{ date }}{% endtrans %}
+        {{ metadata }}
+      </div>
+    </footer>
+  {% endif %}
+
+  {# <div{{ content_attributes }}> #}
+    {{ content }}
+  {# </div> #}
+
+</article>

web/themes/custom/quartiers_de_demain/templates/page--partenaires.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 partenaires">
+
+  <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">
+    <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 #}