mozaique personnes

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

@@ -887,6 +887,13 @@ ul.pagination {
   padding-bottom: 6rem;
   padding-top: 2rem; }
 
+#mozaique_personnes {
+  display: flex !important;
+  flex-direction: row;
+  flex-wrap: wrap;
+  width: 70%;
+  margin: auto; }
+
 .mozaique_personnes {
   background-color: #d5d2d1; }
 
@@ -898,23 +905,22 @@ ul.pagination {
   font-family: "Sarabun";
   font-weight: 800;
   font-size: 1rem;
-  line-height: 20px; }
+  line-height: 20px;
+  text-align: left; }
 
 .mozaique {
   display: flex;
   flex-direction: row;
-  max-width: 65%;
-  align-items: stretch;
-  position: relative;
-  margin-right: 10%;
-  margin-left: 15%;
-  height: auto; }
+  width: 50%;
+  padding: 0.5rem; }
 
 .info {
   background-color: #fff;
   display: flex;
   flex-direction: column;
-  font-family: "Sarabun", sans-serif; }
+  font-family: "Sarabun", sans-serif;
+  width: 30rem;
+  height: 30rem; }
 
 .info:hover {
   background-color: #000;
@@ -937,12 +943,8 @@ ul.pagination {
   padding-bottom: 1rem; }
 
 .portrait {
-  max-width: 15rem !important;
   background: transparent !important; }
 
-.2columns {
-  max-width: 25%; }
-
 .bouton {
   border: solid;
   background-color: transparent;

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

@@ -17,12 +17,12 @@
 // } );
 
 
-$(".bouton").click(function(){
-     $("#modal .message").html("Contenu de ma modal");
-     $("#modal").addClass("open");
-});
-
-$("#modal .mask, #modal a.close").click(function(){
-     $("#modal").removeClass("open");
-     return false;
-});
+// $(".bouton").click(function(){
+//      $("#modal .message").html();
+//      $("#modal").addClass("open");
+// });
+//
+// $("#modal .mask, #modal a.close").click(function(){
+//      $("#modal").removeClass("open");
+//      return false;
+// });

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

@@ -192,12 +192,25 @@
 
 }
 
+#mozaique_personnes {
+  display: flex !important;
+  flex-direction: row;
+  flex-wrap: wrap;
+  // margin-left: 15%;
+  // padding-right: 15%;
+  width: 70%;
+  margin: auto;
+
+
+}
 
     .mozaique_personnes {
-      background-color: #d5d2d1
-    }
+      background-color: #d5d2d1;
+      }
+
 
     .mozaique_personnes h3 {
+
       margin-top: 0px !important;
       padding-top: 3rem;
       padding-left: 15%;
@@ -206,9 +219,15 @@
       font-weight: 800;
       font-size: 1rem;
       line-height: 20px;
+      text-align: left;
     }
 
-
+// .personne {
+//   // display: flex;
+//   // flex-direction: row;
+//   width: 50%;
+//
+// }
 
 
 
@@ -216,17 +235,25 @@
   // background-color: #fff;
   display: flex;
   flex-direction: row;
-  max-width: 65%;
-
-  align-items: stretch;
-  position: relative;
-  margin-right: 10%;
+  width: 50%;
+  // max-width: 35%;
+  padding: 0.5rem;
+  // align-items: stretch;
+  // position: relative;
+  // margin-right: 34%;
   // margin-bottom: 6rem;
-  margin-left: 15%;
-  height: auto;
+  // margin-left: 15%;
+  // height: auto;
+
 
 }
 
+// .personne {
+//   width: 45%;
+//   display: flex;
+//   flex-direction: row;
+// }
+
 // .mozaique :hover {
 //   background-color: #000;
 //   color: #fff;
@@ -237,9 +264,14 @@
       display:flex;
       flex-direction: column;
       font-family: $font-family-default;
-
+      width: 30rem;
+      height: 30rem;
 
     }
+
+// comment faire pour donner une largueur à .info 2 fois plus grande que .portrait? les img de .portrait ne semblent pas vouloir bouger...
+
+
     .info:hover {
         background-color: #000;
         color: #fff;
@@ -264,13 +296,15 @@
     }
 
 .portrait {
-  max-width:15rem !important;
+  // max-width:50% !important;
   background: transparent !important;
 }
 
-.2columns {
-  max-width: 25%;
-}
+// img.portrait {
+//   width: 20%;
+// }
+
+
 
 .bouton {
   border: solid;

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

@@ -1,9 +1,10 @@
-<div class="mozaique_personnes {{ page.header.class}}">
+<div id="mozaique_personnes{{ page.header.class}}">
     {{ content|raw }}
 
+
     {% for personne in page.header.personnes %}
 
-      <div class="personne">
+      <!-- <div class="personne"> -->
         <div class="mozaique">
             <div class="portait">
               {% if personne.portrait %}
@@ -18,27 +19,26 @@
                 <h6>{{ personne.fonction }}</h6>
                 {% endif %}
                 <button class="bouton">Voir biographie</button>
-
             </div>
                 <div id="modal">
                 	<div class="mask">
-                	<div class="container">
-                		<div class="message">
-                      {% if personne.biographie %}
-                      <p>{{ personne.biographie|markdown }}</p>
-                      {% endif %}
+                  	<div class="container">
+                  		<div class="message">
+                        {% if personne.biographie %}
+                        <p>{{ personne.biographie|markdown }}</p>
+                        {% endif %}
+                      </div>
+                  		<a href="#" class="close">&times;</a>
                     </div>
-                		<a href="#" class="close">&times;</a>
-
-                	</div>
                   </div>
-                </div>
+              	</div>
+
 
 
         </div>
 
 
-      </div>
+      <!-- </div> -->
 
     {% endfor %}