js popin, pb lien js et variable twig

user/themes/epau-antimatter/css-compiled/template.css

@@ -898,7 +898,6 @@ ul.pagination {
   background-color: #d5d2d1; }
 
 .mozaique_personnes h3 {
-  margin-top: 0px !important;
   padding-top: 3rem;
   padding-left: 15%;
   padding-right: 15%;
@@ -945,6 +944,9 @@ ul.pagination {
 .portrait {
   background: transparent !important; }
 
+img.portrait {
+  width: 20%; }
+
 .bouton {
   border: solid;
   background-color: transparent;
@@ -1036,15 +1038,19 @@ ul.pagination {
     .modular .showcase .button:hover {
       background: rgba(255, 255, 255, 0.2); }
 
+.modular .titre_nsb h1 {
+  text-transform: uppercase;
+  text-align: right;
+  padding-right: 50%; }
+
 .modular .features {
   padding: 2rem 8rem;
-  text-align: center; }
+  text-align: center;
+  align-content: center; }
   .modular .features:after {
     content: "";
     display: table;
     clear: both; }
-  .modular .features .titre_nsb h1 {
-    text-transform: uppercase; }
   .modular .features h2 {
     margin: 0;
     line-height: 100%; }

user/themes/epau-antimatter/js/antimatter.js

@@ -37,16 +37,48 @@ jQuery(document).ready(function($){
     // Responsive Menu
 
 
+  //        * Grab data attributes from twig with JQuery
+         //  */
+         // $(() => {
+         //
+         //     // Select elements by their data attribute
+         //     const $personneElements = $('[data-personne-id]');
+         //
+         //     // Map over each element and extract the data value
+         //     const $personneIds =
+         //         $.map($personneElements, item => $(item).data('personneId'));
+         //
+         //     // You'll now have array containing string values
+         //     console.log($personneIds); // eg: ["1", "2", "3"]
+         // });
 
-    $(".bouton").click(function(){
-	       $("#modal .message").html();
-	       $("#modal").addClass("open");
-         // $("#body").addClass("grey");
-    });
+         // {% set script %}
+         // // ton js
+         // var mavariable = {{ twigvar }};
+         // {% endset %}
+         // {% do assets.addInlineJs(script) %}
+
+
+    //
+    // // POPIN Biographies
+    // var id = $('#biographie').data('id');
+    // if id > 0{
+    //   $(".bouton").click(function(){
+  	//        $("#modal .message").html(#biographie);
+  	//        $("#modal").addClass("open");
+    //        // $("#body").addClass("grey");
+    //   });
+    // }
+    // $(".bouton").click(function(){
+	  //      $("#modal .message").html();
+	  //      $("#modal").addClass("open");
+    //      // $("#body").addClass("grey");
+    // });
+    //
+    // $("#modal .mask, #modal a.close").click(function(){
+    // 	   $("#modal").removeClass("open");
+    // 	   return false;
+    // });
 
-    $("#modal .mask, #modal a.close").click(function(){
-    	   $("#modal").removeClass("open");
-    	   return false;
-    });
 
 });

user/themes/epau-antimatter/scss/template/_custom.scss

@@ -204,14 +204,13 @@
 
 }
 
+
     .mozaique_personnes {
       background-color: #d5d2d1;
       }
 
 
     .mozaique_personnes h3 {
-
-      margin-top: 0px !important;
       padding-top: 3rem;
       padding-left: 15%;
       padding-right: 15%;
@@ -298,11 +297,12 @@
 .portrait {
   // max-width:50% !important;
   background: transparent !important;
+
 }
 
-// img.portrait {
-//   width: 20%;
-// }
+img.portrait {
+  width: 20%;
+}
 
 
 

user/themes/epau-antimatter/scss/template/modular/_features.scss

@@ -1,17 +1,18 @@
-// Modular Showcase styling
+// Modular Ressources  styling
 .modular {
+  .titre_nsb h1 {
+      text-transform: uppercase;
+      text-align: right;
+      padding-right: 50%;
+  }
+
     .features {
 
         padding: 2rem 8rem;
         text-align: center;
-
+        align-content: center;
         @include clearfix;
 
-        .titre_nsb h1 {
-            text-transform: uppercase;
-
-        }
-
         h2 {
             margin: 0;
             line-height: 100%;

user/themes/epau-antimatter/templates/modular/personnes.html.twig

@@ -1,3 +1,22 @@
+<script>
+
+var message = {{ page.media[personne.biographie].url|e }};
+$(".bouton").click(function(){
+
+     $("#modal .message").html('message');
+
+     $("#modal").addClass("open");
+     // $("#body").addClass("grey");
+
+});
+
+$("#modal .mask, #modal a.close").click(function(){
+     $("#modal").removeClass("open");
+     return false;
+});
+</script>
+
+
 <div id="mozaique_personnes{{ page.header.class}}">
     {{ content|raw }}
 
@@ -25,16 +44,16 @@
                   	<div class="container">
                   		<div class="message">
                         {% if personne.biographie %}
-                        <p>{{ personne.biographie|markdown }}</p>
+                        <p>{{ personne.biographie|markdown }} </p>
                         {% endif %}
+
                       </div>
                   		<a href="#" class="close">&times;</a>
                     </div>
+
                   </div>
               	</div>
 
-
-
         </div>
 
 

user/themes/epau-antimatter/templates/modular/ressources.html.twig

@@ -1,7 +1,10 @@
+
+<div class="titre_nsb">
+  {{ content|raw }}
+</div>
+
 <div class="features {{ page.header.class}}">
-    <div class="titre_nsb">
-      {{ content|raw }}
-    </div>
+
 
     {% for rapport in page.header.rapports %}
 
@@ -22,4 +25,5 @@
 
         </div>
     {% endfor %}
+
 </div>