tagert blank & background flex
This commit is contained in:
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: Accueil
|
||||
body_classes: modular
|
||||
visible: true
|
||||
debugger: true
|
||||
---
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
---
|
||||
title: Accueil
|
||||
body_classes: modular
|
||||
visible: true
|
||||
debugger: true
|
||||
---
|
||||
|
||||
# EPAU
|
||||
|
||||
|
||||
## L'EUROPE DES PROJETS ARCHITECTURAUX ET URBAINS
|
||||
|
||||
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
|
||||
@@ -36,4 +36,4 @@ process:
|
||||
twig: false
|
||||
---
|
||||
|
||||
# Ressources
|
||||
|
||||
|
||||
@@ -18,6 +18,4 @@ admin:
|
||||
debugger: true
|
||||
---
|
||||
|
||||
# Gouvernance
|
||||
|
||||
## Le conseil d’administration de l’Europe des projets architecturaux et urbains et les Directions de programmes de l’Europe des projets architecturaux urbains
|
||||
|
||||
@@ -3,9 +3,7 @@ title: Contact
|
||||
body_classes: modular
|
||||
---
|
||||
|
||||
# Contact
|
||||
### 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
|
||||
CONTACT :
|
||||
Fabienne.Dran@developpement-durable.gouv.fr
|
||||
+ 33 (0)1 40 81 9327
|
||||
+33 (0)7 86 5033 31
|
||||
|
||||
@@ -91,8 +91,7 @@ sub {
|
||||
bottom: -0.25em; }
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
max-width: 15rem; }
|
||||
border: 0; }
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden; }
|
||||
|
||||
@@ -82,8 +82,7 @@ b, strong, label, th {
|
||||
#header #logo img {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-flow: row;
|
||||
max-height: 5rem; }
|
||||
flex-flow: row; }
|
||||
#header.scrolled {
|
||||
height: 3rem;
|
||||
background-color: rgba(255, 255, 255, 0.9) !important;
|
||||
@@ -825,9 +824,10 @@ ul.pagination {
|
||||
#logo {
|
||||
display: flex;
|
||||
flex-direction: row; }
|
||||
|
||||
#logo img {
|
||||
padding: 0.5rem; }
|
||||
#logo img {
|
||||
padding: 0.5rem;
|
||||
max-height: 3rem;
|
||||
margin: auto; }
|
||||
|
||||
.callout {
|
||||
padding-top: 0.5rem; }
|
||||
@@ -867,26 +867,47 @@ ul.pagination {
|
||||
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; }
|
||||
animation: anim 2.5s 1 normal ease-in-out forwards; }
|
||||
|
||||
.programmes {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background: url("/user/themes/epau-antimatter/images/14360_default_big.jpg") 0px 0px no-repeat, url("/user/themes/epau-antimatter/images/10361_web_01.jpg") 1200px 300px no-repeat, url("/user/themes/epau-antimatter/images/hyperliens_marseille_.PNG") 0px 700px no-repeat, url("/user/themes/epau-antimatter/images/jeux-olypiques-paris-2024-village-athle-lot-e2.jpg") right no-repeat;
|
||||
/* On bottom, like z-index: 1; */
|
||||
background-color: #d5d2d1;
|
||||
z-index: -1;
|
||||
justify-content: center;
|
||||
padding-left: 15%;
|
||||
padding-right: 15%;
|
||||
padding-top: 8rem;
|
||||
padding-bottom: 8rem; }
|
||||
|
||||
.paralax {
|
||||
position: absolute !important;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between; }
|
||||
.paralax #photo1 {
|
||||
position: relative;
|
||||
top: -60px; }
|
||||
.paralax #photo2 {
|
||||
z-index: 0;
|
||||
width: 700px !important;
|
||||
position: relative;
|
||||
top: 260px; }
|
||||
.paralax #photo3 {
|
||||
z-index: 0;
|
||||
width: 700px !important;
|
||||
position: relative;
|
||||
top: 500px; }
|
||||
.paralax #photo4 {
|
||||
z-index: 0;
|
||||
width: 700px !important;
|
||||
position: relative;
|
||||
top: 300px; }
|
||||
|
||||
.programme {
|
||||
z-index: 1;
|
||||
max-width: 35%;
|
||||
padding: 1.5rem;
|
||||
background-color: white;
|
||||
@@ -895,7 +916,7 @@ ul.pagination {
|
||||
text-transform: uppercase;
|
||||
line-height: 1.2; }
|
||||
.programme img {
|
||||
max-height: 15%; }
|
||||
max-height: 4rem; }
|
||||
.programme p {
|
||||
font-family: "Sarabun", sans-serif;
|
||||
font-weight: 500;
|
||||
@@ -949,7 +970,9 @@ ul.pagination {
|
||||
width: 15rem !important;
|
||||
height: 15rem !important; }
|
||||
.mozaique_personnes .equipe .personne .mozaique .photo img {
|
||||
width: 100%; }
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%; }
|
||||
.mozaique_personnes .equipe .personne .mozaique .info {
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
|
||||
@@ -98,7 +98,7 @@ sub {
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
max-width: 15rem;
|
||||
// max-width: 15rem;
|
||||
}
|
||||
|
||||
svg:not(:root) {
|
||||
|
||||
@@ -52,48 +52,15 @@
|
||||
#logo {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
img {
|
||||
padding: 0.5rem;
|
||||
max-height: 3rem;
|
||||
margin:auto;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
#logo img {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
//tentative animation when in View
|
||||
// @media () {
|
||||
//
|
||||
// @viewport {
|
||||
//
|
||||
// }
|
||||
// rect.after-h1 {
|
||||
// animation-duration: 4s;
|
||||
// animation-timing-function: linear;
|
||||
// animation-timeline: grow-timeline;
|
||||
// }
|
||||
//
|
||||
// @scroll-timeline grow-timeline {
|
||||
// source: selector(.test);
|
||||
// orientation: block;
|
||||
// scroll-offsets: 250px, 300px;
|
||||
// }
|
||||
//
|
||||
// @keyframes grow {
|
||||
// to { transform: translate(300px) }
|
||||
// }
|
||||
// @k
|
||||
|
||||
// @keyframes souligne {
|
||||
// 0% { width: 0.5%;
|
||||
// }
|
||||
// 100%{
|
||||
// width: 50%;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// // selecteur:hover,
|
||||
// // selecteur:focus,
|
||||
// selecteur:hover{
|
||||
// animation: souligne 2s ease-in-out;
|
||||
// }
|
||||
|
||||
|
||||
|
||||
@@ -135,6 +102,7 @@
|
||||
}
|
||||
|
||||
.titre_bsn {
|
||||
|
||||
display: block;
|
||||
margin-left: 40%;
|
||||
// padding-right: 15%;
|
||||
@@ -152,84 +120,51 @@
|
||||
|
||||
@keyframes anim {
|
||||
0% {width: 0%;}
|
||||
100% {width: 100%}
|
||||
|
||||
100% {width: 100%;}
|
||||
|
||||
}
|
||||
|
||||
.after-h1 { // fonctionne mais manque "when in View"
|
||||
.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;
|
||||
}
|
||||
.test {
|
||||
// opacity: 0;
|
||||
// transition: opacity 1s ease-in-out;
|
||||
animation: anim 2.5s 1 normal ease-in-out forwards;
|
||||
}
|
||||
}
|
||||
// &:hover {
|
||||
// .test {
|
||||
// opacity: 1;
|
||||
// }
|
||||
// opacity: 1;
|
||||
// transition: width 5s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// fond images en grille pour parallax
|
||||
|
||||
// #background {
|
||||
// background-color: #d5d2d1;
|
||||
// display: grid;
|
||||
// grid-template-columns: repeat(5, 1fr);
|
||||
// grid-template-rows: repeat(8, 5vw);
|
||||
// grid-gap: 15px;
|
||||
// }
|
||||
//
|
||||
// #background img {
|
||||
// max-width: 100% !important;
|
||||
// max-height: 100% !important;
|
||||
// // object-fit: cover;
|
||||
// }
|
||||
|
||||
// .item-1 {
|
||||
// grid-column-start: 1;
|
||||
// grid-column-end: 3;
|
||||
// grid-row-start: 1;
|
||||
// grid-row-end: 5;
|
||||
// }
|
||||
//
|
||||
// .item-2 {
|
||||
// grid-column-start: 3;
|
||||
// grid-column-end: 5;
|
||||
// grid-row-start: 1;
|
||||
// grid-row-end: 5;
|
||||
// }
|
||||
//
|
||||
// .item-3 {
|
||||
// grid-column-start: 5 ;
|
||||
// grid-column-end: 1;
|
||||
// grid-row-start: 9;
|
||||
// grid-row-end: 6;
|
||||
// }
|
||||
//
|
||||
// .item-4 {
|
||||
// grid-column-start: 1;
|
||||
// grid-column-end: 3;
|
||||
// grid-row-start: 1;
|
||||
// grid-row-end: 3;
|
||||
// }
|
||||
|
||||
.programmes {
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
background:
|
||||
url("/user/themes/epau-antimatter/images/14360_default_big.jpg") 0px 0px no-repeat, /* On top, like z-index: 4; */
|
||||
url("/user/themes/epau-antimatter/images/10361_web_01.jpg") 1200px 300px no-repeat, /* like z-index: 3; */
|
||||
url("/user/themes/epau-antimatter/images/hyperliens_marseille_.PNG") 0px 700px no-repeat, /* like z-index: 2; */
|
||||
url("/user/themes/epau-antimatter/images/jeux-olypiques-paris-2024-village-athle-lot-e2.jpg") right no-repeat; /* On bottom, like z-index: 1; */
|
||||
// background-image:
|
||||
// url("/user/themes/epau-antimatter/images/14360_default_big.jpg") ,
|
||||
// url("/user/themes/epau-antimatter/images/10361_web_01.jpg") ,
|
||||
// url("/user/themes/epau-antimatter/images/hyperliens_marseille_.PNG") ,
|
||||
// url("/user/themes/epau-antimatter/images/jeux-olypiques-paris-2024-village-athle-lot-e2.jpg") ;
|
||||
//
|
||||
// background-attachment: fixed;
|
||||
//
|
||||
// background-position: 50% -50px;
|
||||
|
||||
// position: sticky;
|
||||
// transform: translateY(-1);
|
||||
|
||||
// min-height: 500px;
|
||||
|
||||
background-color: #d5d2d1;
|
||||
|
||||
z-index: -1;
|
||||
justify-content: center;
|
||||
padding-left: 15%;
|
||||
padding-right: 15%;
|
||||
@@ -238,20 +173,61 @@
|
||||
padding-bottom: 8rem;
|
||||
}
|
||||
|
||||
.paralax {
|
||||
position: absolute !important;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
// transform: translate3d(0px, -128px, 0px);
|
||||
|
||||
#photo1 {
|
||||
position: relative;
|
||||
top: -60px;
|
||||
|
||||
}
|
||||
|
||||
#photo2 {
|
||||
z-index: 0;
|
||||
width:700px !important;
|
||||
position: relative;
|
||||
top: 260px;
|
||||
}
|
||||
|
||||
#photo3 {
|
||||
z-index: 0;
|
||||
width:700px !important;
|
||||
position: relative;
|
||||
top: 500px;
|
||||
}
|
||||
|
||||
#photo4 {
|
||||
z-index: 0;
|
||||
width:700px !important;
|
||||
position: relative;
|
||||
top: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.programme {
|
||||
z-index: 1;
|
||||
max-width: 35%;
|
||||
// min-width:
|
||||
padding: 1.5rem;
|
||||
background-color: white;
|
||||
margin: 0.4rem;
|
||||
|
||||
|
||||
h4 {
|
||||
text-transform: uppercase;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
img {
|
||||
max-height: 15%;
|
||||
max-height: 4rem;
|
||||
}
|
||||
|
||||
p {
|
||||
@@ -403,12 +379,14 @@
|
||||
width: 15rem !important;
|
||||
height: 15rem !important;
|
||||
// object-fit: cover;
|
||||
// background-size: cover;
|
||||
|
||||
img {
|
||||
// maxwidth: 15rem !important;
|
||||
// height: 15rem !important;
|
||||
// background-size: cover;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -15,7 +15,7 @@ $dropdown-color: #f6f6f6;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-flow: row;
|
||||
max-height: $header-height;
|
||||
// max-height: $header-height;
|
||||
}
|
||||
|
||||
// scroll based changes
|
||||
@@ -200,7 +200,7 @@ $dropdown-color: #f6f6f6;
|
||||
&.active > a {
|
||||
background-color: darken($dropdown-color, 4%);
|
||||
color: $core-accent;
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
|
||||
<div class="gouvernance">
|
||||
<div class="gouvernance after-h1">
|
||||
|
||||
<div class="titre_bsn">
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
|
||||
<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>
|
||||
<p> Le conseil d’administration de l’Europe des projets architecturaux et urbains et les Directions de programmes de l’Europe des projets architecturaux urbains</p>
|
||||
|
||||
@@ -1,12 +1,20 @@
|
||||
|
||||
<div class="programmes{{ page.header.class}}">
|
||||
|
||||
<div class="background paralax">
|
||||
<img id="photo1" src="/user/themes/epau-antimatter/images/14360_default_big.jpg" alt="photo 1" />
|
||||
<img id="photo2" src="/user/themes/epau-antimatter/images/10361_web_01.jpg" alt="photo 2" />
|
||||
<img id="photo3" src="/user/themes/epau-antimatter/images/hyperliens_marseille_.PNG" alt="photo 3" />
|
||||
<img id="photo4" src="/user/themes/epau-antimatter/images/jeux-olypiques-paris-2024-village-athle-lot-e2.jpg" alt="photo 4" />
|
||||
|
||||
</div>
|
||||
|
||||
{{ content|raw }}
|
||||
|
||||
{% for programme in page.header.programmes %}
|
||||
|
||||
<div class="programme">
|
||||
<a href="{{programme.site}}">
|
||||
<a href="{{programme.site}}" target="_blank">
|
||||
{% if programme.logo %}
|
||||
<img src="{{page.media[programme.logo].url|e }}" alt="logo du programme {{programme.nom_du_programme}}" />
|
||||
{% endif %}
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
|
||||
<div class="titre_nsb">
|
||||
<div class="titre_nsb after-h1">
|
||||
|
||||
<h1>Ressources</h1>
|
||||
|
||||
|
||||
<div class="test" >
|
||||
<svg width="100%" height="0.5rem">
|
||||
<rect class="after-h1" width="100%" height="100%" style="fill:rgb(0,0,0)" />
|
||||
<rect class="" width="100%" height="100%" style="fill:rgb(0,0,0)" />
|
||||
</svg>
|
||||
</div>
|
||||
<!-- <div class="after-h1-finish">
|
||||
|
||||
Reference in New Issue
Block a user