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 {
+@keyframes anim {
-  transition: width 5s ease-in-out; }
+  0% {
-  .after-h1:hover {
+    width: 0%; }
-    width: 100%; }
+  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,62 +916,68 @@ ul.pagination {
   padding-bottom: 6rem;
   padding-top: 2rem; }
 
-#mozaique_personnes {
+.mozaique_personnes {
+  background-color: #d5d2d1; }
+  .mozaique_personnes .equipe {
     display: flex !important;
     flex-direction: row;
     flex-wrap: wrap;
-  width: 70%;
+    width: 65%;
     margin: auto; }
-
+    .mozaique_personnes .equipe h3 {
-.mozaique_personnes {
-  background-color: #d5d2d1; }
-  .mozaique_personnes h3 {
       padding-top: 3rem;
-    padding-left: 15%;
+      min-width: 100%;
-    padding-right: 15%;
       font-family: "Sarabun";
       font-weight: 800;
       font-size: 1rem;
       line-height: 20px;
       text-align: left; }
-
+    .mozaique_personnes .equipe .personne {
-.mozaique {
       display: flex;
       flex-direction: row;
-  width: 50%;
+      flex-wrap: wrap;
-  padding: 0.5rem; }
+      padding-right: 0.5rem;
-
+      padding-bottom: 0.5rem; }
-.info {
+      .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: 30rem;
+          width: 50%;
-  height: 30rem; }
+          height: 30rem;
-  .info h5 {
+          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; }
-  .info h6 {
+          .mozaique_personnes .equipe .personne .mozaique .info h6 {
             font-weight: 300;
             font-size: 1.1rem;
             font-style: italic;
             margin: 0;
-    padding-left: 1rem;
+            padding-right: 1rem;
-    padding-bottom: 1rem; }
+            padding-bottom: 1rem;
-
+            padding-left: 1rem; }
-.info:hover {
+          .mozaique_personnes .equipe .personne .mozaique .info:hover {
             background-color: #000;
             color: #fff;
             transition: 0.2s ease-in-out; }
 
-.portrait {
-  background: transparent !important; }
-  .portrait img {
-    width: 5rem !important; }
-
 .bouton {
   border: solid;
   background-color: transparent;

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,26 +345,29 @@
 
 }
 
-#mozaique_personnes {
+
+
+.mozaique_personnes {
+  background-color: #d5d2d1;
+
+
+
+  .equipe {
     display: flex !important;
     flex-direction: row;
     flex-wrap: wrap;
     // margin-left: 15%;
     // padding-right: 15%;
-  width: 70%;
+    width: 65%;
     margin: auto;
-
+    // justify-items: center;
-
-}
-
-
-    .mozaique_personnes {
-      background-color: #d5d2d1;
 
     h3 {
+      // display: flex;
+      // flex-grow: 1;
       padding-top: 3rem;
-        padding-left: 15%;
+      // padding-left: 15%;
-        padding-right: 15%;
+      min-width: 100%;
       font-family: "Sarabun";
       font-weight: 800;
       font-size: 1rem;
@@ -359,60 +375,52 @@
       text-align: left;
     }
 
-    }
+    .personne {
-
+      display: flex;
-
+      flex-direction: row;
-
+      flex-wrap: wrap;
-// .personne {
+      // width: 50%;
-//   // display: flex;
+
-//   // flex-direction: row;
+      padding-right: 0.5rem;
-//   width: 50%;
+      padding-bottom: 0.5rem;
-//
+
-// }
+      .mozaique {
-
-
-
-.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;
 
 
-}
+        justify-content: flex-end;
+        max-width: 30rem;
 
-// .personne {
+        .portrait {
-//   width: 45%;
+          min-width: 10rem;
-//   display: flex;
+          min-height: 10rem;
-//   flex-direction: row;
-// }
 
-// .mozaique :hover {
+          // max-width:50% !important;
-//   background-color: #000;
+          background: red !important;
-//   color: #fff;
+
-// }
+          img {
+              max-width: 5rem !important;
+              max-height: 5rem !important;
+          }
+
+        }
 
         .info {
           background-color: #fff;
           display:flex;
           flex-direction: column;
           font-family: $font-family-default;
-      width: 30rem;
+          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 {
@@ -420,33 +428,45 @@
            font-size: 1.1rem;
            font-style: italic;
            margin: 0;
-       padding-left: 1rem;
+           padding-right: 1rem;
            padding-bottom: 1rem;
-     }
+           padding-left: 1rem;
          }
 
-// comment faire pour donner une largueur à .info 2 fois plus grande que .portrait? les img de .portrait ne semblent pas vouloir bouger...
+         &:hover {
-
-
-    .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;
   }
 
 }
 
 
 
+
+
+
+
+
+// .mozaique :hover {
+//   background-color: #000;
+//   color: #fff;
+// }
+
+
+// comment faire pour donner une largueur à .info 2 fois plus grande que .portrait? les img de .portrait ne semblent pas vouloir bouger...
+
+
+
+
+
+
+
+
 .bouton {
   border: solid;
   background-color: transparent;

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

@@ -1,16 +1,34 @@
-<div class="callout">
+<div class="callout after-h1">
-    {% set image = page.media.images|first %}
+    <!-- {% set image = page.media.images|first %}
     {% if image %}
         {{ image.cropResize(400,400).html('','','align-'~page.header.image_align)|raw }}
-    {% endif %}
+    {% endif %} -->
-  <div class="titre_bsn">
 
+  <!-- <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>