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%; } } width: 100%; } }
.after-h1 .test { .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 { .after-h1 .souligne {
animation: glissement 2.5s 1 normal ease-in-out forwards; } animation: glissement 1.2s 1 normal ease-in-out forwards; }
.programmes { .programmes {
display: flex; display: flex;
@@ -954,6 +954,16 @@ ul.pagination {
.texte-cache.ouvert { .texte-cache.ouvert {
max-height: 100vh; max-height: 100vh;
/* On lui définit une hauteur max de tout l'écran si nécessaire pour qu'il affiche tout son contenu*/ } /* 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"*/ /*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 { .texte-cache:not(.ouvert)::after {
@@ -963,6 +973,16 @@ ul.pagination {
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 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 { .bouton-ouverture {
position: relative; position: relative;
@@ -1028,7 +1048,7 @@ ul.pagination {
flex-direction: column; flex-direction: column;
font-family: "Sarabun", sans-serif; font-family: "Sarabun", sans-serif;
width: 50%; width: 50%;
height: 26rem; height: 23rem;
min-width: 15rem; } min-width: 15rem; }
.mozaique_personnes .equipe .personne .mozaique .info h5 { .mozaique_personnes .equipe .personne .mozaique .info h5 {
font-weight: 900; font-weight: 900;
@@ -1036,16 +1056,16 @@ ul.pagination {
margin: 0; margin: 0;
padding-top: 1rem; padding-top: 1rem;
padding-right: 1rem; padding-right: 1rem;
padding-left: 1rem; } padding-left: 1.3rem; }
.mozaique_personnes .equipe .personne .mozaique .info h6 { .mozaique_personnes .equipe .personne .mozaique .info h6 {
font-weight: 300; font-weight: 300;
font-size: 1.1rem; font-size: 1rem;
font-style: italic; font-style: italic;
line-height: 1.5; line-height: 1.5;
margin: 0; margin: 0;
padding-right: 1rem; padding-right: 1.2rem;
padding-bottom: 1rem; padding-bottom: 1.2rem;
padding-left: 1rem; } padding-left: 1.3rem; }
.mozaique_personnes .equipe .personne .mozaique .info:hover { .mozaique_personnes .equipe .personne .mozaique .info:hover {
background-color: #000; background-color: #000;
color: #fff; color: #fff;
@@ -1070,6 +1090,13 @@ ul.pagination {
.modal.open { .modal.open {
display: block; } display: block; }
.modal.open .bouton {
border: solid;
background-color: transparent;
text-transform: uppercase;
align-self: flex-end;
margin: auto;
margin-bottom: 2rem; }
.modal .container { .modal .container {
position: absolute; position: absolute;
@@ -144,6 +144,7 @@
@keyframes anim { @keyframes anim {
0% {width: 0%;} 0% {width: 0%;}
100% {width: 100%;} 100% {width: 100%;}
} }
@@ -162,10 +163,10 @@
.test { .test {
// opacity: 0; // opacity: 0;
// transition: opacity 1s ease-in-out; // 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 { .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*/ /*Style du module TEXTE lorsqu'il est ouvert*/
.texte-cache.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*/ 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"*/ /*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; left: 0;
right: 0; right: 0;
// background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); /*Couleur de notre effet*/ // 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 { .bouton-ouverture {
@@ -428,7 +461,7 @@
flex-direction: column; flex-direction: column;
font-family: $font-family-default; font-family: $font-family-default;
width: 50%; width: 50%;
height: 26rem; height: 23rem;
min-width: 15rem; min-width: 15rem;
h5 { h5 {
@@ -437,17 +470,17 @@
margin: 0; margin: 0;
padding-top: 1rem; padding-top: 1rem;
padding-right: 1rem; padding-right: 1rem;
padding-left: 1rem; padding-left: 1.3rem;
} }
h6 { h6 {
font-weight: 300; font-weight: 300;
font-size: 1.1rem; font-size: 1rem;
font-style: italic; font-style: italic;
line-height: 1.5; line-height: 1.5;
margin: 0; margin: 0;
padding-right: 1rem; padding-right: 1.2rem;
padding-bottom: 1rem; padding-bottom: 1.2rem;
padding-left: 1rem; padding-left: 1.3rem;
} }
&:hover { &:hover {
@@ -495,7 +528,16 @@
} }
.modal.open{ .modal.open{
display: block; display: block;
.bouton {
border: solid;
background-color: transparent;
text-transform: uppercase;
align-self: flex-end;
margin:auto;
margin-bottom: 2rem;
}
} }
// #modal .mask{ // #modal .mask{
// background: none !important; // background: none !important;
// opacity: 1; // opacity: 1;
@@ -599,7 +641,7 @@
max-height: 4rem; max-height: 4rem;
padding-right: 1rem; padding-right: 1rem;
} }
} }
.contact { .contact {
display: flex; display: flex;