improved next chapitre | partie blocks positioning

config/sync/block.block.mathallo_contenu_3.yml

@@ -16,7 +16,7 @@ third_party_settings:
 id: mathallo_contenu_3
 theme: mathallo
 region: content
-weight: -3
+weight: -2
 provider: null
 plugin: 'menu_block:contenu'
 settings:
@@ -44,3 +44,4 @@ visibility:
       node: '@node.node_route_context:node'
     bundles:
       chapitre: chapitre
+      partie: partie

config/sync/block.block.mathallo_contenu_4.yml

@@ -16,7 +16,7 @@ third_party_settings:
 id: mathallo_contenu_4
 theme: mathallo
 region: content
-weight: 0
+weight: -3
 provider: null
 plugin: 'menu_block:contenu'
 settings:
@@ -44,3 +44,4 @@ visibility:
       node: '@node.node_route_context:node'
     bundles:
       chapitre: chapitre
+      partie: partie

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

@@ -300,9 +300,8 @@ main[role="main"]{
     // next chapitre
     nav.prev-chapitre,
     nav.next-chapitre{
-      position:absolute;
-      top:-10em;
       
+      position:absolute;
       
       padding: 0.5em 1em;
       @include menu-contenus;
@@ -321,6 +320,7 @@ main[role="main"]{
 
       // prev
       &.prev-chapitre{
+        top:-10em;
         left:0;
         a:after{
           transform: rotate(180deg);
@@ -332,6 +332,7 @@ main[role="main"]{
 
       // next
       &.next-chapitre{
+        bottom:500px;
         right:0;
         li.in-active-trail + li{
           display: block;
@@ -488,106 +489,84 @@ main[role="main"]{
         }
       }
 
-      
-
-      }
     }
-    div#partie-principes-pratique{
+  } // div.layout-content
-      position: relative;
-      display: flex;
-      gap: 0px;
-      section.field-card{
-        @mixin front-card{
-          z-index: 2;
-          background-color: #fff;
-          &>*>*{
-            opacity: 1;
-          }
-        }
-        @mixin back-card{
-          z-index: 1;
-          background-color: rgba(247,247,247,1);
-          &>*>*{
-            opacity: 0.6;
-          }
-        }
   
-        &.field-principes-reflexion{
+  div#partie-principes-pratique{
-          @include front-card();
+    position: relative;
+    display: flex;
+    gap: 0px;
+    section.field-card{
+      @mixin front-card{
+        z-index: 2;
+        background-color: #fff;
+        &>*>*{
+          opacity: 1;
         }
-        &.field-en-pratique{
+      }
-          margin-left: -50%;
+      @mixin back-card{
-          transform: translateY(2em);
+        z-index: 1;
+        background-color: rgba(247,247,247,1);
+        &>*>*{
+          opacity: 0.6;
+        }
+      }
+
+      &.field-principes-reflexion{
+        @include front-card();
+      }
+      &.field-en-pratique{
+        margin-left: -50%;
+        transform: translateY(2em);
+        @include back-card();
+      }
+      &.field-principes-reflexion,
+      &.field-en-pratique{
+        transition: background-color 0.25s ease-out;
+        &.back-card{
           @include back-card();
         }
-        &.field-principes-reflexion,
+        &.front-card{
-        &.field-en-pratique{
+          @include front-card();
-          transition: background-color 0.25s ease-out;
-          &.back-card{
-            @include back-card();
-          }
-          &.front-card{
-            @include front-card();
-          }
-        }
-
-      }
-    }
-
-    // HOME
-    div.views-home-chapitres{
-      // display: flex;
-      // gap: 2em;
-      padding:1em;
-      >.views-row{
-        // max-width: 700px;
-
-        article.node-type-chapitre{
-          h2{
-            @include titre_h3;
-          }
         }
       }
 
     }
+  } // partie-principes-pratique
 
-    // FORMES
+  // HOME
-    .bg-forme{
+  div.views-home-chapitres{
-        position: absolute;
+    // display: flex;
-        // background-color: red;
+    // gap: 2em;
-        width:300px; height:300px;
+    padding:1em;
-        top:50%;
+    >.views-row{
-        left:-300px;
+      // max-width: 700px;
-
-        z-index: -1;
-
-        background-position: center;
-        background-size: contain;
-        background-repeat: no-repeat;
-
-
-        // &.pyramide{ background-image: url('/themes/custom/mathallo/assets/img/formes/pyramide.svg'); }
-        // &.infinite{ background-image: url('/themes/custom/mathallo/assets/img/formes/infinite.svg'); }
-        // &.prct{ background-image: url('/themes/custom/mathallo/assets/img/formes/prct.svg'); }
-        // &.pi{ background-image: url('/themes/custom/mathallo/assets/img/formes/pi.svg'); }
-        // &.supeg{ background-image: url('/themes/custom/mathallo/assets/img/formes/supeg.svg'); }
-        // &.cone{ background-image: url('/themes/custom/mathallo/assets/img/formes/cone.svg'); }
-        // &.cube{ background-image: url('/themes/custom/mathallo/assets/img/formes/cube.svg'); }
-        // &.diamant{ background-image: url('/themes/custom/mathallo/assets/img/formes/diamant.svg'); }
-        // &.croissant{ background-image: url('/themes/custom/mathallo/assets/img/formes/croissant.svg'); }
-        // &.cylindre{ background-image: url('/themes/custom/mathallo/assets/img/formes/cylindre.svg'); }
-
-        filter: drop-shadow(0 0 15px rgba(0,0,0,0.05));
-        svg{
-        //   width: 100%;
-        //   height: 100%;
-          path,line,rect,circle,ellipse,polygon,polyline{
-            vector-effect: non-scaling-stroke;
-            stroke-width: 1px!important;
-          }
 
+      article.node-type-chapitre{
+        h2{
+          @include titre_h3;
         }
+      }
+    }
+
+  } // views-home-chapitres
+
+  // FORMES
+  .bg-forme{
+      position: absolute;
+      width:300px; height:300px;
+      top:50%;
+      left:-300px;
+      z-index: -1;
+      filter: drop-shadow(0 0 15px rgba(0,0,0,0.05));
+      svg{
+        path,line,rect,circle,ellipse,polygon,polyline{
+          vector-effect: non-scaling-stroke;
+          stroke-width: 1px!important;
+        }
+      }
   }
+  
 }
 
 // ______          _            

web_main/themes/custom/mathallo/templates/region--content.html.twig

@@ -0,0 +1,21 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a region.
+ *
+ * Available variables:
+ * - content: The content for this region, typically blocks.
+ * - attributes: HTML attributes for the region <div>.
+ * - region: The name of the region variable as defined in the theme's
+ *   .info.yml file.
+ *
+ * @see template_preprocess_region()
+ *
+ * @ingroup themeable
+ */
+#}
+{% if content %}
+  <div{{ attributes }}>
+    {{ content }}
+  </div>
+{% endif %}