diving on partie

composer.json

@@ -22,6 +22,7 @@
         "drupal/core-recommended": "^10.4",
         "drupal/entity_block": "^2.0",
         "drupal/page_manager": "^4.0@RC",
+        "drupal/paragraphs": "^1.20",
         "drupal/upgrade_status": "^4.3",
         "wikimedia/composer-merge-plugin": "^2.1"
     },

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "ac9d6b4c23e1156901adb2d3916d33bf",
+    "content-hash": "14cfea0e9a67e8b560b3100650c92c1d",
     "packages": [
         {
             "name": "asm89/stack-cors",
@@ -4020,6 +4020,68 @@
                 "source": "https://git.drupalcode.org/project/entity_clone"
             }
         },
+        {
+            "name": "drupal/entity_reference_revisions",
+            "version": "1.14.0",
+            "source": {
+                "type": "git",
+                "url": "https://git.drupalcode.org/project/entity_reference_revisions.git",
+                "reference": "8.x-1.14"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://ftp.drupal.org/files/projects/entity_reference_revisions-8.x-1.14.zip",
+                "reference": "8.x-1.14",
+                "shasum": "cb900e41124979a46da1912ff2b502270beda632"
+            },
+            "require": {
+                "drupal/core": "^10.2 || ^11"
+            },
+            "conflict": {
+                "drush/drush": "<12.5.1"
+            },
+            "require-dev": {
+                "drupal/diff": "^1 || ^2"
+            },
+            "type": "drupal-module",
+            "extra": {
+                "drupal": {
+                    "version": "8.x-1.14",
+                    "datestamp": "1767266825",
+                    "security-coverage": {
+                        "status": "covered",
+                        "message": "Covered by Drupal's security advisory policy"
+                    }
+                }
+            },
+            "notification-url": "https://packages.drupal.org/8/downloads",
+            "license": [
+                "GPL-2.0-or-later"
+            ],
+            "authors": [
+                {
+                    "name": "berdir",
+                    "homepage": "https://www.drupal.org/user/214652"
+                },
+                {
+                    "name": "frans",
+                    "homepage": "https://www.drupal.org/user/514222"
+                },
+                {
+                    "name": "jeroen.b",
+                    "homepage": "https://www.drupal.org/user/1853532"
+                },
+                {
+                    "name": "miro_dietiker",
+                    "homepage": "https://www.drupal.org/user/227761"
+                }
+            ],
+            "description": "Entity Reference Revisions",
+            "homepage": "https://www.drupal.org/project/entity_reference_revisions",
+            "support": {
+                "source": "https://git.drupalcode.org/project/entity_reference_revisions"
+            }
+        },
         {
             "name": "drupal/extlink",
             "version": "2.0.5",
@@ -5591,6 +5653,87 @@
                 "source": "https://git.drupalcode.org/project/pagerer"
             }
         },
+        {
+            "name": "drupal/paragraphs",
+            "version": "1.20.0",
+            "source": {
+                "type": "git",
+                "url": "https://git.drupalcode.org/project/paragraphs.git",
+                "reference": "8.x-1.20"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://ftp.drupal.org/files/projects/paragraphs-8.x-1.20.zip",
+                "reference": "8.x-1.20",
+                "shasum": "68051cc8c025aa3f62fd44a219d158361928a4ad"
+            },
+            "require": {
+                "drupal/core": "^10.3 || ^11",
+                "drupal/entity_reference_revisions": "~1.3"
+            },
+            "require-dev": {
+                "drupal/block_field": "1.x-dev",
+                "drupal/diff": "1.x-dev",
+                "drupal/entity_browser": "2.x-dev",
+                "drupal/entity_usage": "2.x-dev",
+                "drupal/feeds": "^3",
+                "drupal/field_group": "3.x-dev",
+                "drupal/inline_entity_form": "3.x-dev",
+                "drupal/paragraphs-paragraphs_library": "*",
+                "drupal/replicate": "1.x-dev",
+                "drupal/search_api": "^1",
+                "drupal/search_api_db": "*"
+            },
+            "suggest": {
+                "drupal/entity_browser": "Recommended for an improved user experience when using the Paragraphs library module"
+            },
+            "type": "drupal-module",
+            "extra": {
+                "drupal": {
+                    "version": "8.x-1.20",
+                    "datestamp": "1767269542",
+                    "security-coverage": {
+                        "status": "covered",
+                        "message": "Covered by Drupal's security advisory policy"
+                    }
+                }
+            },
+            "notification-url": "https://packages.drupal.org/8/downloads",
+            "license": [
+                "GPL-2.0-or-later"
+            ],
+            "authors": [
+                {
+                    "name": "berdir",
+                    "homepage": "https://www.drupal.org/user/214652"
+                },
+                {
+                    "name": "frans",
+                    "homepage": "https://www.drupal.org/user/514222"
+                },
+                {
+                    "name": "jeroen.b",
+                    "homepage": "https://www.drupal.org/user/1853532"
+                },
+                {
+                    "name": "jstoller",
+                    "homepage": "https://www.drupal.org/user/99012"
+                },
+                {
+                    "name": "miro_dietiker",
+                    "homepage": "https://www.drupal.org/user/227761"
+                },
+                {
+                    "name": "primsi",
+                    "homepage": "https://www.drupal.org/user/282629"
+                }
+            ],
+            "description": "Enables the creation of Paragraphs entities.",
+            "homepage": "https://www.drupal.org/project/paragraphs",
+            "support": {
+                "source": "https://git.drupalcode.org/project/paragraphs"
+            }
+        },
         {
             "name": "drupal/path_alias_xt",
             "version": "dev-1.x",

web_main/themes/custom/mathallo/assets/js/main.js

@@ -61,13 +61,13 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
       //   scrollTrigger: 'main[role="main"]', // start animation when ".box" enters the viewport
       //   backgroundPositionY: 10
       // });
-      ScrollSmoother.create({
+      // ScrollSmoother.create({
-        smooth: 1, // how long (in seconds) it takes to "catch up" to the native scroll position
+      //   smooth: 1, // how long (in seconds) it takes to "catch up" to the native scroll position
-        effects: true, // looks for data-speed and data-lag attributes on elements
+      //   effects: true, // looks for data-speed and data-lag attributes on elements
-        smoothTouch: 0.1, // much shorter smoothing time on touch devices (default is NO smoothing on touch devices)
+      //   smoothTouch: 0.1, // much shorter smoothing time on touch devices (default is NO smoothing on touch devices)
-        wrapper: 'main[role="main"]',
+      //   wrapper: 'main[role="main"]',
-        content: 'main[role="main"]>.layout-content'
+      //   content: 'main[role="main"]>.layout-content'
-      });
+      // });
     }
 
     function initVues(){

web_main/themes/custom/mathallo/assets/scss/main.scss

@@ -43,8 +43,8 @@ div.layout-container{
     // flex: 1 1 auto; 
     position: fixed;     
     z-index: 90;
-    top:$header_height + 40px;
+    top:$header_height + 30px;
-    left: 20px;
+    left: 15px;
   }
   main[role="main"]{
     // flex: 1 1 auto; 
@@ -96,6 +96,10 @@ header[role="banner"]{
       font-size: 2em;
       text-transform:uppercase;
       font-weight: 500;
+
+      &:hover{
+        color: $rose;
+      }
     }
   }
 
@@ -108,11 +112,18 @@ header[role="banner"]{
     >div#burger-btn{
       position:relative;
       transition-duration: 0.5s;
+      transition-property: transform;
       top: 8.5px;
       &, &::before, &::after{
         // position: absolute;
         width:20px; height:3px;
         background-color: $bleu_site;
+        
+      }
+      &:hover{
+        &, &::before, &::after{
+          background-color: $rose;
+        } 
       }
       &::before, &::after{
         content: "";
@@ -126,7 +137,6 @@ header[role="banner"]{
       &::after{
         bottom: 6px;
       }
-
       &[opened]{
         transform: rotate(90deg);
       }
@@ -155,6 +165,7 @@ header[role="banner"]{
       }
 
       nav#block-mathallo-contenu{
+        padding: 1em;
         @include menu-contenus;
         li{
           padding:0 0 1em 0;
@@ -220,8 +231,8 @@ nav[role="breadcrumb"]{
     }
   }
   #block-mathallo-contenu-2{
-    @include menu-contenus;
     padding: 0.5em 1em;
+    @include menu-contenus;
     li:not(.in-active-trail){
       display: none;
     }
@@ -251,17 +262,17 @@ nav[role="breadcrumb"]{
                       
 main[role="main"]{
   div.layout-content{
+    
     article{
-      position: relative;
+      
-      background-color: #fff;
+      @include card;
-      padding:2em;
+      
-      box-shadow: 0 0 10px rgba(0,0,0,0.25);
-      max-width: 50em;
-      margin: 5em auto 0;
-
       h2{
         @include titre_h2;
         margin:0;
+        a:hover{
+          color: $rose;
+        }
       }
       div.field-chapitre-num,
       div.field-partie-num{
@@ -276,6 +287,7 @@ main[role="main"]{
         &>*{
           font-weight: 600;
         }
+
       }
 
     }
@@ -287,6 +299,59 @@ main[role="main"]{
       gap: 2em;
       padding:1em;
     }
+
+    section.field-card{
+      @include card;
+
+      h3{
+        @include titre_h3;
+      }
+
+      &.field-en-pratique{
+        div.field-label{
+          text-align: right;
+        }
+      }
+
+      &.field-ressources,
+      &.field-plus-loin{
+        .field-label{
+          @include titre_h3;
+          padding-bottom: 1em;
+        }
+        div.paragraph{
+          padding-bottom: 1em;
+        }
+        p{
+          margin: 0 0.25em;
+        }
+      }
+
+      &.field-ressources{
+        div.paragraph--type--ressource{
+          .field_titre{
+            background-color: $bleu_site;
+            color: #fff;
+            border-radius: 2em;
+            display: inline-block;
+            padding: 0.5em 1em;
+            &>div{
+              @include titre_h4;
+              color:#fff;
+            }
+          }
+        }
+      }
+      &.field-plus-loin{
+        div.paragraph--type--complement{
+          .field_titre{
+            @include titre_h4;
+            color: $bleu_site;
+          }
+        }
+      }
+    }
+
     // HOME
     div.views-home-chapitres{
       display: flex;

web_main/themes/custom/mathallo/assets/scss/partials/fonts.scss

@@ -14,6 +14,7 @@ body{
   font-size: 3em;
   font-weight: 400;
   color: $bleu_typo;
+  line-height: 1;
 }
 
 @mixin titre_h3{
@@ -21,3 +22,8 @@ body{
   font-size: 2em;
 }
 
+@mixin titre_h4{
+  @include titre_h2();
+  font-size: 1.323em;
+}
+

web_main/themes/custom/mathallo/assets/scss/partials/mixins.scss

@@ -1,5 +1,4 @@
 @mixin menu-contenus{
-  padding: 1em;
   ul,li{
     padding: 0;
     margin:0;
@@ -19,4 +18,14 @@
     font-size: 1.13em;
   }
   
-}
+}
+
+@mixin card{
+  position: relative;
+  background-color: #fff;
+  padding:2em;
+  box-shadow: 0 0 10px rgba(0,0,0,0.25);
+  max-width: 50em;
+  margin: 5em auto 0;
+}
+

web_main/themes/custom/mathallo/mathallo.theme

@@ -86,17 +86,17 @@ function mathallo_preprocess_contanier(&$variables) {
 
 }
 
+/**
+ * Implements hook_preprocess_HOOK() for node.html.twig.
+ */
+function mathallo_preprocess_field(&$variables) {
+  if (!isset($variables["title_attributes"]['class'])) {
+    $variables["title_attributes"]['class'] = [];
+  }
+  $variables['title_attributes']['class'][] = 'field-label';
 
-
+  if (!isset($variables["attributes"]['class'])) {
-// function A(){
+    $variables["attributes"]['class'] = [];
-//   $attr = 6;
+  }
-//   B($attr);
+  $variables['attributes']['class'][] = $variables['field_name'];
-//   print($attr);
+}
-// }
-
-// function B($attr){
-//   $attr = 3;
-//   print($attr);
-// }
-
-// A();

web_main/themes/custom/mathallo/templates/field.html.twig

@@ -58,7 +58,9 @@
   {% endif %}
 {% else %}
   <div{{ attributes }}>
+
     <div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
+
     {% if multiple %}
       <div>
     {% endif %}

web_main/themes/custom/mathallo/templates/node--partie--full.html.twig

@@ -0,0 +1,97 @@
+{#
+/**
+ * @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'.
+ *
+ * @see template_preprocess_node()
+ *
+ * @ingroup themeable
+ */
+#}
+
+<article{{ attributes }}>
+  <div class="field-partie-num">
+    {{ content.field_partie }}
+  </div>
+  {{ title_prefix }}
+  {% if label and not page %}
+    <h2{{ title_attributes }}>
+      <a href="{{ url }}" rel="bookmark">{{ label }}</a>
+    </h2>
+  {% endif %}
+  {{ title_suffix }}
+
+  <div{{ content_attributes }}>
+    {{ content|without('field_partie','field_principes_reflexions','field_en_pratique','field_ressources','field_pour_aller_plus_loin') }}
+  </div>
+
+</article>
+{% if content.field_principes_reflexions %}
+  <section class="field-card field-principes-reflexion">{{ content.field_principes_reflexions }}</section>
+{% endif %}
+
+{% if content.field_en_pratique %}
+  <section class="field-card field-en-pratique">{{ content.field_en_pratique }}</section>
+{% endif %}
+
+{% if content.field_ressources %}
+  <section class="field-card field-ressources">{{ content.field_ressources }}</section>
+{% endif %}
+
+{% if content.field_pour_aller_plus_loin %}
+  <section class="field-card field-plus-loin">{{ content.field_pour_aller_plus_loin }}</section>
+{% endif %}