h3 equipe chasse contenu d'après

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

@@ -860,10 +860,19 @@ ul.pagination {
   .titre_bsn p {
     padding-right: 15%; }
 
-.after-h1 {
-  transition: width 5s ease-in-out; }
-  .after-h1:hover {
-    width: 100%; }
+@keyframes anim {
+  0% {
+    width: 0%; }
+  100% {
+    width: 100%; } }
+
+.after-h1 .test {
+  opacity: 0;
+  transition: opacity 1s ease-in-out;
+  animation: anim 5s 500ms 1 normal ease-in-out forwards; }
+
+.after-h1:hover .test {
+  opacity: 1; }
 
 .programmes {
   display: flex;
@@ -907,61 +916,67 @@ 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; }
-  .mozaique_personnes h3 {
-    padding-top: 3rem;
-    padding-left: 15%;
-    padding-right: 15%;
-    font-family: "Sarabun";
-    font-weight: 800;
-    font-size: 1rem;
-    line-height: 20px;
-    text-align: left; }
-
-.mozaique {
-  display: flex;
-  flex-direction: row;
-  width: 50%;
-  padding: 0.5rem; }
-
-.info {
-  background-color: #fff;
-  display: flex;
-  flex-direction: column;
-  font-family: "Sarabun", sans-serif;
-  width: 30rem;
-  height: 30rem; }
-  .info h5 {
-    font-weight: 900;
-    font-size: 1.3rem;
-    margin: 0;
-    padding-top: 1rem;
-    padding-left: 1rem; }
-  .info h6 {
-    font-weight: 300;
-    font-size: 1.1rem;
-    font-style: italic;
-    margin: 0;
-    padding-left: 1rem;
-    padding-bottom: 1rem; }
-
-.info:hover {
-  background-color: #000;
-  color: #fff;
-  transition: 0.2s ease-in-out; }
-
-.portrait {
-  background: transparent !important; }
-  .portrait img {
-    width: 5rem !important; }
+  .mozaique_personnes .equipe {
+    display: flex !important;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 65%;
+    margin: auto; }
+    .mozaique_personnes .equipe h3 {
+      padding-top: 3rem;
+      min-width: 100%;
+      font-family: "Sarabun";
+      font-weight: 800;
+      font-size: 1rem;
+      line-height: 20px;
+      text-align: left; }
+    .mozaique_personnes .equipe .personne {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      padding-right: 0.5rem;
+      padding-bottom: 0.5rem; }
+      .mozaique_personnes .equipe .personne .mozaique {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        max-width: 30rem; }
+        .mozaique_personnes .equipe .personne .mozaique .portrait {
+          min-width: 10rem;
+          min-height: 10rem;
+          background: red !important; }
+          .mozaique_personnes .equipe .personne .mozaique .portrait img {
+            max-width: 5rem !important;
+            max-height: 5rem !important; }
+        .mozaique_personnes .equipe .personne .mozaique .info {
+          background-color: #fff;
+          display: flex;
+          flex-direction: column;
+          font-family: "Sarabun", sans-serif;
+          width: 50%;
+          height: 30rem;
+          min-width: 15rem; }
+          .mozaique_personnes .equipe .personne .mozaique .info h5 {
+            font-weight: 900;
+            font-size: 1.3rem;
+            margin: 0;
+            padding-top: 1rem;
+            padding-right: 1rem;
+            padding-left: 1rem; }
+          .mozaique_personnes .equipe .personne .mozaique .info h6 {
+            font-weight: 300;
+            font-size: 1.1rem;
+            font-style: italic;
+            margin: 0;
+            padding-right: 1rem;
+            padding-bottom: 1rem;
+            padding-left: 1rem; }
+          .mozaique_personnes .equipe .personne .mozaique .info:hover {
+            background-color: #000;
+            color: #fff;
+            transition: 0.2s ease-in-out; }
 
 .bouton {
   border: solid;

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

@@ -150,10 +150,23 @@
     }
 }
 
+@keyframes anim {
+  0% {width: 0%;}
+  100% {width: 100%}
+}
+
 .after-h1 {     // fonctionne mais manque "when in View"
-  transition: width 5s ease-in-out;
+  .test {
+    opacity: 0;
+    transition: opacity 1s ease-in-out;
+    animation: anim 5s 500ms 1 normal ease-in-out forwards;
+  }
+
   &:hover {
-    width: 100%;
+    .test {
+        opacity: 1;
+    }
+    // opacity: 1;
     // transition: width 5s ease-in-out;
   }
 }
@@ -332,118 +345,125 @@
 
 }
 
-#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;
 
-    .mozaique_personnes {
-      background-color: #d5d2d1;
 
-      h3 {
-        padding-top: 3rem;
-        padding-left: 15%;
-        padding-right: 15%;
-        font-family: "Sarabun";
-        font-weight: 800;
-        font-size: 1rem;
-        line-height: 20px;
-        text-align: left;
-      }
 
+  .equipe {
+    display: flex !important;
+    flex-direction: row;
+    flex-wrap: wrap;
+    // margin-left: 15%;
+    // padding-right: 15%;
+    width: 65%;
+    margin: auto;
+    // justify-items: center;
+
+    h3 {
+      // display: flex;
+      // flex-grow: 1;
+      padding-top: 3rem;
+      // padding-left: 15%;
+      min-width: 100%;
+      font-family: "Sarabun";
+      font-weight: 800;
+      font-size: 1rem;
+      line-height: 20px;
+      text-align: left;
     }
 
+    .personne {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      // width: 50%;
 
+      padding-right: 0.5rem;
+      padding-bottom: 0.5rem;
 
-// .personne {
-//   // display: flex;
-//   // flex-direction: row;
-//   width: 50%;
-//
-// }
+      .mozaique {
+        display: flex;
+        flex-direction: row;
 
 
+        justify-content: flex-end;
+        max-width: 30rem;
 
-.mozaique {
-  // background-color: #fff;
-  display: flex;
-  flex-direction: row;
-  width: 50%;
-  // max-width: 35%;
-  padding: 0.5rem;
-  // align-items: stretch;
-  // position: relative;
-  // margin-right: 34%;
-  // margin-bottom: 6rem;
-  // margin-left: 15%;
-  // height: auto;
+        .portrait {
+          min-width: 10rem;
+          min-height: 10rem;
 
+          // max-width:50% !important;
+          background: red !important;
+
+          img {
+              max-width: 5rem !important;
+              max-height: 5rem !important;
+          }
+
+        }
+
+        .info {
+          background-color: #fff;
+          display:flex;
+          flex-direction: column;
+          font-family: $font-family-default;
+          width: 50%;
+          height: 30rem;
+          min-width: 15rem;
+
+          h5 {
+           font-weight: 900;
+           font-size: 1.3rem;
+           margin: 0;
+           padding-top: 1rem;
+           padding-right: 1rem;
+           padding-left: 1rem;
+         }
+         h6 {
+           font-weight: 300;
+           font-size: 1.1rem;
+           font-style: italic;
+           margin: 0;
+           padding-right: 1rem;
+           padding-bottom: 1rem;
+           padding-left: 1rem;
+         }
+
+         &:hover {
+             background-color: #000;
+             color: #fff;
+             transition:0.2s ease-in-out;
+         }
+        }
+      }
+    }
+  }
 
 }
 
-// .personne {
-//   width: 45%;
-//   display: flex;
-//   flex-direction: row;
-// }
+
+
+
+
+
+
 
 // .mozaique :hover {
 //   background-color: #000;
 //   color: #fff;
 // }
 
-    .info {
-      background-color: #fff;
-      display:flex;
-      flex-direction: column;
-      font-family: $font-family-default;
-      width: 30rem;
-      height: 30rem;
-
-      h5 {
-       font-weight: 900;
-       font-size: 1.3rem;
-       margin: 0;
-       padding-top: 1rem;
-       padding-left: 1rem;
-     }
-     h6 {
-       font-weight: 300;
-       font-size: 1.1rem;
-       font-style: italic;
-       margin: 0;
-       padding-left: 1rem;
-       padding-bottom: 1rem;
-     }
-    }
 
 // 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;
-        transition:0.2s ease-in-out;
-    }
-
 
-.portrait {
-  // max-width:50% !important;
-  background: transparent !important;
 
-  img {
-      width: 5rem !important;
-  }
 
-}
 
 
 

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

@@ -1,16 +1,34 @@
-<div class="callout">
-    {% set image = page.media.images|first %}
+<div class="callout after-h1">
+    <!-- {% set image = page.media.images|first %}
     {% if image %}
         {{ image.cropResize(400,400).html('','','align-'~page.header.image_align)|raw }}
-    {% endif %}
-  <div class="titre_bsn">
+    {% endif %} -->
+
+  <!-- <div class="titre_bsn">
+  <h1>EPAU</h1>
 
+  <div class="test" >
+    <svg width="100%" height="0.5rem">
+     <rect class="after-h1" width="100%" height="100%" style="fill:rgb(255,255,255)" opacity="0.1" />
+   </svg>
+  </div>
+
+  <h2>L'EUROPE DES PROJETS ARCHITECTURAUX ET URBAINS</h2>
+
+  <p>Organisme national de recherche et d’expérimentation, sous la tutelle des Ministères en charge de l’architecture et de l’urbanisme, la Cité de l’Architecture et du Patrimoine et de l’Association Europan France</p>
+
+
+
+  {{ content|raw }}
+  </div>     -->
+
+  <div class="titre_bsn">
 
   <h1>EPAU</h1>
 
   <div class="test" >
     <svg width="100%" height="0.5rem">
-     <rect class="after-h1" width="100%" height="100%" style="fill:rgb(255,255,255)" />
+     <rect class="" width="100%" height="100%" style="fill:rgb(255,255,255)" />
    </svg>
   </div>
 

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

@@ -1,17 +1,17 @@
 
 
-<div id="mozaique_personnes{{ page.header.class}}">
+<div class="equipe"{{ page.header.class}}">
     {{ content|raw }}
 
 
 
     {% for personne in page.header.personnes %}
       <!-- {{ dump(personne) }} -->
-      <!-- <div class="personne"> -->
+      <div class="personne">
         <div class="mozaique">
             <div class="portait">
               {% if personne.portrait %}
-                <img src="{{page.media[personne.portrait].url|e }}" alt="portrait de {{personne.nom}}" />
+                <img src="{{page.media[personne.portrait].url|e }}" alt="photo de {{personne.nom}}" />
               {% endif %}
             </div>
             <div class="info">
@@ -42,7 +42,7 @@
         </div>
 
 
-      <!-- </div> -->
+      </div>
 
     {% endfor %}
 

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

@@ -3,29 +3,7 @@
     {% if image %}
         {{ image.cropResize(400,400).html('','','align-'~page.header.image_align)|raw }}
     {% endif %}
-  <div class="titre_bsn">
 
-
-  <h1>Contact</h1>
-
-
-  <h2></h2>
-
-  <p>Fabienne Dran
-Assistante de direction
-
-Fabienne.Dran@developpement-durable.gouv.fr
-
-    33 (0)1 40 81 93 27
-    +33 (0)7 86 50 33 31
-</p>
-
-
-    <div class="test" >
-      <svg width="50%" height="0.5rem">
-       <rect class="after-h1" width="3%" height="100%" style="fill:rgb(0,0,0)" />
-     </svg>
-    </div>
   {{ content|raw }}
-  </div>
+
 </div>