ouidade/dev-epau.archi.fr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

h3 equipe chasse contenu d'après

Browse Source
This commit is contained in:
ouidade
2021-04-08 22:02:27 +02:00
parent 03309f4e37
commit e75859abd0
5 changed files with 204 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files
user/themes/epau-antimatter/css-compiled/template.css
+72 -57
View File
@@ -860,10 +860,19 @@ ul.pagination {
.titre_bsn p { .titre_bsn p {
padding-right: 15%; } 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 { .programmes {
display: flex; display: flex;
@@ -907,61 +916,67 @@ ul.pagination {
padding-bottom: 6rem; padding-bottom: 6rem;
padding-top: 2rem; } padding-top: 2rem; }
#mozaique_personnes {
display: flex !important;
flex-direction: row;
flex-wrap: wrap;
width: 70%;
margin: auto; }
.mozaique_personnes { .mozaique_personnes {
background-color: #d5d2d1; } background-color: #d5d2d1; }
.mozaique_personnes h3 { .mozaique_personnes .equipe {
padding-top: 3rem; display: flex !important;
padding-left: 15%; flex-direction: row;
padding-right: 15%; flex-wrap: wrap;
font-family: "Sarabun"; width: 65%;
font-weight: 800; margin: auto; }
font-size: 1rem; .mozaique_personnes .equipe h3 {
line-height: 20px; padding-top: 3rem;
text-align: left; } min-width: 100%;
font-family: "Sarabun";
.mozaique { font-weight: 800;
display: flex; font-size: 1rem;
flex-direction: row; line-height: 20px;
width: 50%; text-align: left; }
padding: 0.5rem; } .mozaique_personnes .equipe .personne {
display: flex;
.info { flex-direction: row;
background-color: #fff; flex-wrap: wrap;
display: flex; padding-right: 0.5rem;
flex-direction: column; padding-bottom: 0.5rem; }
font-family: "Sarabun", sans-serif; .mozaique_personnes .equipe .personne .mozaique {
width: 30rem; display: flex;
height: 30rem; } flex-direction: row;
.info h5 { justify-content: flex-end;
font-weight: 900; max-width: 30rem; }
font-size: 1.3rem; .mozaique_personnes .equipe .personne .mozaique .portrait {
margin: 0; min-width: 10rem;
padding-top: 1rem; min-height: 10rem;
padding-left: 1rem; } background: red !important; }
.info h6 { .mozaique_personnes .equipe .personne .mozaique .portrait img {
font-weight: 300; max-width: 5rem !important;
font-size: 1.1rem; max-height: 5rem !important; }
font-style: italic; .mozaique_personnes .equipe .personne .mozaique .info {
margin: 0; background-color: #fff;
padding-left: 1rem; display: flex;
padding-bottom: 1rem; } flex-direction: column;
font-family: "Sarabun", sans-serif;
.info:hover { width: 50%;
background-color: #000; height: 30rem;
color: #fff; min-width: 15rem; }
transition: 0.2s ease-in-out; } .mozaique_personnes .equipe .personne .mozaique .info h5 {
font-weight: 900;
.portrait { font-size: 1.3rem;
background: transparent !important; } margin: 0;
.portrait img { padding-top: 1rem;
width: 5rem !important; } 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 { .bouton {
border: solid; border: solid;
user/themes/epau-antimatter/scss/template/_custom.scss
+104 -84
View File
@@ -150,10 +150,23 @@
} }
} }
@keyframes anim {
0% {width: 0%;}
100% {width: 100%}
}
.after-h1 { // fonctionne mais manque "when in View" .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 { &:hover {
width: 100%; .test {
opacity: 1;
}
// opacity: 1;
// transition: width 5s ease-in-out; // 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 { .equipe {
padding-top: 3rem; display: flex !important;
padding-left: 15%; flex-direction: row;
padding-right: 15%; flex-wrap: wrap;
font-family: "Sarabun"; // margin-left: 15%;
font-weight: 800; // padding-right: 15%;
font-size: 1rem; width: 65%;
line-height: 20px; margin: auto;
text-align: left; // 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;
.mozaique {
display: flex;
flex-direction: row;
// .personne { justify-content: flex-end;
// // display: flex; max-width: 30rem;
// // flex-direction: row;
// width: 50%;
//
// }
.portrait {
min-width: 10rem;
min-height: 10rem;
// max-width:50% !important;
background: red !important;
.mozaique { img {
// background-color: #fff; max-width: 5rem !important;
display: flex; max-height: 5rem !important;
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;
}
.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 { // .mozaique :hover {
// background-color: #000; // background-color: #000;
// color: #fff; // 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... // 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
+23 -5
View File
@@ -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 %} {% if image %}
{{ image.cropResize(400,400).html('','','align-'~page.header.image_align)|raw }} {{ 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> <h1>EPAU</h1>
<div class="test" > <div class="test" >
<svg width="100%" height="0.5rem"> <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> </svg>
</div> </div>
user/themes/epau-antimatter/templates/modular/personnes.html.twig
+4 -4
View File
@@ -1,17 +1,17 @@
<div id="mozaique_personnes{{ page.header.class}}"> <div class="equipe"{{ page.header.class}}">
{{ content|raw }} {{ content|raw }}
{% for personne in page.header.personnes %} {% for personne in page.header.personnes %}
<!-- {{ dump(personne) }} --> <!-- {{ dump(personne) }} -->
<!-- <div class="personne"> --> <div class="personne">
<div class="mozaique"> <div class="mozaique">
<div class="portait"> <div class="portait">
{% if personne.portrait %} {% 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 %} {% endif %}
</div> </div>
<div class="info"> <div class="info">
@@ -42,7 +42,7 @@
</div> </div>
<!-- </div> --> </div>
{% endfor %} {% endfor %}
user/themes/epau-antimatter/templates/modular/text.html.twig
+1 -23
View File
@@ -3,29 +3,7 @@
{% if image %} {% if image %}
{{ image.cropResize(400,400).html('','','align-'~page.header.image_align)|raw }} {{ image.cropResize(400,400).html('','','align-'~page.header.image_align)|raw }}
{% endif %} {% 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 }} {{ content|raw }}
</div>
</div> </div>