Browse Source

taille infos personnes

ouidade 3 years ago
parent
commit
dc105832a2

+ 35 - 8
user/themes/epau-antimatter/css-compiled/template.css

@@ -895,10 +895,10 @@ ul.pagination {
     width: 100%; } }
 
 .after-h1 .test {
-  animation: anim 2.5s 1 normal ease-in-out forwards; }
+  animation: anim 1.2s 1 normal ease-in-out forwards; }
 
 .after-h1 .souligne {
-  animation: glissement 2.5s 1 normal ease-in-out forwards; }
+  animation: glissement 1.2s 1 normal ease-in-out forwards; }
 
 .programmes {
   display: flex;
@@ -954,6 +954,16 @@ ul.pagination {
 .texte-cache.ouvert {
   max-height: 100vh;
   /* On lui définit une hauteur max de tout l'écran si nécessaire pour qu'il affiche tout son contenu*/ }
+  .texte-cache.ouvert .bouton-ouverture {
+    position: relative;
+    justify-content: center;
+    cursor: pointer;
+    border: solid;
+    background-color: transparent;
+    text-transform: uppercase;
+    left: 45%;
+    margin-top: 3rem;
+    margin-bottom: 5rem; }
 
 /*On stylise l'effet de flou lorsque le module TEXTE est fermé, donc il n'a pas la classe "ouvert"*/
 .texte-cache:not(.ouvert)::after {
@@ -963,6 +973,16 @@ ul.pagination {
   bottom: 0;
   left: 0;
   right: 0; }
+  .texte-cache:not(.ouvert)::after .bouton-ouverture {
+    position: relative;
+    justify-content: center;
+    cursor: pointer;
+    border: solid;
+    background-color: transparent;
+    text-transform: uppercase;
+    left: 45%;
+    margin-top: 3rem;
+    margin-bottom: 5rem; }
 
 .bouton-ouverture {
   position: relative;
@@ -1028,7 +1048,7 @@ ul.pagination {
           flex-direction: column;
           font-family: "Sarabun", sans-serif;
           width: 50%;
-          height: 26rem;
+          height: 23rem;
           min-width: 15rem; }
           .mozaique_personnes .equipe .personne .mozaique .info h5 {
             font-weight: 900;
@@ -1036,16 +1056,16 @@ ul.pagination {
             margin: 0;
             padding-top: 1rem;
             padding-right: 1rem;
-            padding-left: 1rem; }
+            padding-left: 1.3rem; }
           .mozaique_personnes .equipe .personne .mozaique .info h6 {
             font-weight: 300;
-            font-size: 1.1rem;
+            font-size: 1rem;
             font-style: italic;
             line-height: 1.5;
             margin: 0;
-            padding-right: 1rem;
-            padding-bottom: 1rem;
-            padding-left: 1rem; }
+            padding-right: 1.2rem;
+            padding-bottom: 1.2rem;
+            padding-left: 1.3rem; }
           .mozaique_personnes .equipe .personne .mozaique .info:hover {
             background-color: #000;
             color: #fff;
@@ -1070,6 +1090,13 @@ ul.pagination {
 
 .modal.open {
   display: block; }
+  .modal.open .bouton {
+    border: solid;
+    background-color: transparent;
+    text-transform: uppercase;
+    align-self: flex-end;
+    margin: auto;
+    margin-bottom: 2rem; }
 
 .modal .container {
   position: absolute;

+ 51 - 9
user/themes/epau-antimatter/scss/template/_custom.scss

@@ -144,6 +144,7 @@
 
 @keyframes anim {
   0% {width: 0%;}
+
   100% {width: 100%;}
 }
 
@@ -162,10 +163,10 @@
   .test {
     // opacity: 0;
     // transition: opacity 1s ease-in-out;
-    animation: anim 2.5s 1 normal ease-in-out forwards;
+    animation: anim 1.2s 1 normal ease-in-out forwards;
   }
   .souligne {
-    animation: glissement 2.5s 1 normal ease-in-out forwards;
+    animation: glissement 1.2s 1 normal ease-in-out forwards;
   }
 }
 //
@@ -313,6 +314,21 @@
 /*Style du module TEXTE lorsqu'il est ouvert*/
 .texte-cache.ouvert {
     max-height: 100vh; /* On lui définit une hauteur max de tout l'écran si nécessaire pour qu'il affiche tout son contenu*/
+    .bouton-ouverture {
+        position: relative;
+        justify-content: center;
+        cursor: pointer;
+        border: solid;
+        background-color: transparent;
+        text-transform: uppercase;
+        left: 45%;
+        margin-top: 3rem;
+        margin-bottom: 5rem;
+        // align-self: flex-end;
+        // margin-right: 2rem;
+        // margin: auto;
+
+    }
   }
 
 /*On stylise l'effet de flou lorsque le module TEXTE est fermé, donc il n'a pas la classe "ouvert"*/
@@ -324,6 +340,23 @@
   left: 0;
   right: 0;
   // background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); /*Couleur de notre effet*/
+  .bouton-ouverture {
+      position: relative;
+      justify-content: center;
+      cursor: pointer;
+      border: solid;
+      background-color: transparent;
+      text-transform: uppercase;
+      left: 45%;
+      margin-top: 3rem;
+      margin-bottom: 5rem;
+      // align-self: flex-end;
+      // margin-right: 2rem;
+      // margin: auto;
+
+  }
+
+
 }
 
 .bouton-ouverture {
@@ -428,7 +461,7 @@
           flex-direction: column;
           font-family: $font-family-default;
           width: 50%;
-          height: 26rem;
+          height: 23rem;
           min-width: 15rem;
 
           h5 {
@@ -437,17 +470,17 @@
            margin: 0;
            padding-top: 1rem;
            padding-right: 1rem;
-           padding-left: 1rem;
+           padding-left: 1.3rem;
          }
          h6 {
            font-weight: 300;
-           font-size: 1.1rem;
+           font-size: 1rem;
            font-style: italic;
            line-height: 1.5;
            margin: 0;
-           padding-right: 1rem;
-           padding-bottom: 1rem;
-           padding-left: 1rem;
+           padding-right: 1.2rem;
+           padding-bottom: 1.2rem;
+           padding-left: 1.3rem;
          }
 
          &:hover {
@@ -495,7 +528,16 @@
 }
 .modal.open{
 	display: block;
+  .bouton {
+    border: solid;
+    background-color: transparent;
+    text-transform: uppercase;
+    align-self: flex-end;
+    margin:auto;
+    margin-bottom: 2rem;
+  }
 }
+
 // #modal .mask{
 // 	background: none !important;
 // 	opacity: 1;
@@ -599,7 +641,7 @@
         max-height: 4rem;
         padding-right: 1rem;
       }
-      
+
     }
     .contact {
       display: flex;