taille infos personnes

This commit is contained in:
2021-04-15 18:19:24 +02:00
parent 7122b925f4
commit dc105832a2
2 changed files with 86 additions and 17 deletions
@@ -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;
@@ -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;