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

tagert blank & background flex

Browse Source
This commit is contained in:
ouidade
2021-04-11 13:53:11 +02:00
parent 16117309f3
commit 0ae1e837e7
59 changed files with 561 additions and 382 deletions
Download Patch File Download Diff File Expand all files Collapse all files
user/themes/epau-antimatter/css-compiled/nucleus.css
+1 -2
View File
@@ -91,8 +91,7 @@ sub {
bottom: -0.25em; }
img {
border: 0;
max-width: 15rem; }
border: 0; }
svg:not(:root) {
overflow: hidden; }
user/themes/epau-antimatter/css-compiled/template.css
+38 -15
View File
@@ -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;
user/themes/epau-antimatter/scss/nucleus/_core.scss
+1 -1
View File
@@ -98,7 +98,7 @@ sub {
img {
border: 0;
max-width: 15rem;
// max-width: 15rem;
}
svg:not(:root) {
user/themes/epau-antimatter/scss/template/_custom.scss
+82 -104
View File
@@ -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%;
}
user/themes/epau-antimatter/scss/template/_header.scss
+2 -2
View File
@@ -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;
}
user/themes/epau-antimatter/templates/modular/gouvernance.html.twig
+2 -2
View File
@@ -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>
user/themes/epau-antimatter/templates/modular/programmes.html.twig
+9 -1
View File
@@ -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 %}
user/themes/epau-antimatter/templates/modular/ressources.html.twig
+2 -2
View File
@@ -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">