better capsule (aka footnotes)

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

@@ -394,7 +394,7 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
 
     function onMouseEnterFN(event){
       console.log('onMouseEnterFN, event:', event);
-      fn_modale.innerHTML = event.target.dataset.content;
+      fn_modale.innerHTML = event.target.querySelector('.footnote-content').innerHTML;
       fn_modale.classList.add('visible');
 
 

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

@@ -770,7 +770,7 @@ aside.footnote-content{
   position: absolute;
   // top:50%; left:50%;
   z-index: 200;
-  max-width: 100em;
+  max-width: 40em;
   padding:1em 1.5em 1em 1em;
   border:  1px dashed $bleu_site;
   &.visible{
@@ -778,5 +778,8 @@ aside.footnote-content{
     opacity: 1;
     transition: opacity 0.25s ease-in-out;
   }
-
+  img{
+    max-width: 100%;
+    height: auto;
+  }
 }

web_main/themes/custom/mathallo/templates/footnote-link.html.twig

@@ -1,7 +1,7 @@
 {% apply footnotes_spaceless %}
   {# footnotes/footnote-link.html.twig #}
-  <span class="footnote__citation js-footnote-citation" id="{{ fn.ref_id }}" data-content="{{ fn.text }}">
+  <div class="footnote__citation js-footnote-citation" id="{{ fn.ref_id }}">
     {{ fn.value|render|trim }}
-    {# <aside class="footnote-content">{{ fn.text }}</aside> #}
-  </span>
+    <aside class="footnote-content">{{ fn.text }}</aside>
+  </div>
 {% endapply %}

web_main/themes/custom/mathallo/templates/footnote-links.html.twig

@@ -10,4 +10,4 @@
       {%- endfor -%}
     </span>
   {%- endif -%}
-{% endapply %}
+{% endapply %}