diving on partie

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({
-        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
-        smoothTouch: 0.1, // much shorter smoothing time on touch devices (default is NO smoothing on touch devices)
-        wrapper: 'main[role="main"]',
-        content: 'main[role="main"]>.layout-content'
-      });
+      // ScrollSmoother.create({
+      //   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
+      //   smoothTouch: 0.1, // much shorter smoothing time on touch devices (default is NO smoothing on touch devices)
+      //   wrapper: 'main[role="main"]',
+      //   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;
-    left: 20px;
+    top:$header_height + 30px;
+    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;
-      padding:2em;
-      box-shadow: 0 0 10px rgba(0,0,0,0.25);
-      max-width: 50em;
-      margin: 5em auto 0;
-
+      
+      @include card;
+      
       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;
+}
+