déploiement resources

This commit is contained in:
2021-04-14 14:22:24 +02:00
parent 0ae1e837e7
commit c8f6de919f
24 changed files with 837 additions and 379 deletions
@@ -16,8 +16,19 @@
margin-top: -3rem;
}
#sb-site{
background: none !important;
#body{
background: none !important;
padding-bottom: 2rem !important;
}
}
#header.scrolled {
padding-left: 2rem;
padding-right: 2rem;
}
#header #navbar ul.navigation li a {
font-family: "Sarabun", sans-serif;
font-weight: 400;
@@ -57,13 +68,17 @@
padding: 0.5rem;
max-height: 3rem;
margin:auto;
}
#gouv {
padding-right: 4rem;
}
}
#body {
p:empty { display:none; }
}
@@ -146,7 +161,7 @@
display: flex;
flex-wrap: wrap;
//
// background-image:
// url("/user/themes/epau-antimatter/images/14360_default_big.jpg") ,
// url("/user/themes/epau-antimatter/images/10361_web_01.jpg") ,
@@ -173,44 +188,49 @@
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;
}
.parallax-window {
// min-height: 400px;
background: transparent;
// height: 1534px;
// overflow: hidden;
}
// .images-background {
// position: absolute !important;
// width: 100%;
// display: flex;
// flex-direction: row;
// flex-wrap: wrap;
// justify-content: space-between;
//
// #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: 300px;
// }
//
// #photo4 {
// z-index: 0;
// width:700px !important;
// position: relative;
// top: 300px;
// }
// }
.programme {
z-index: 1;
@@ -224,6 +244,7 @@
h4 {
text-transform: uppercase;
line-height: 1.2;
}
img {
@@ -234,6 +255,7 @@
font-family: $font-family-default;
font-weight: 500;
font-style: italic;
padding-bottom: 1.5rem;
}
}
@@ -251,66 +273,49 @@
}
}
// .parallax {
// display: block;
// }
//
// /* .titre_nsb {
// display: block;
// position: absolute;
// margin-right: 39%;
// } */
//
//
// /* .ressources {
// display: flex;
// flex-wrap: wrap;
// justify-content: space-between;
// background-color: #ffffff;
// padding-top: 8rem;
// padding-right: 5rem;
// padding-left: 5rem;
// } */
//
// /* .ressource {
// max-width: 20%;
// margin-block: 5rem;
// flex-wrap: wrap;
// flex: 0 1 15%;
// } */
//
//
// /*
// .ressources h1 {
// text-transform: uppercase;
// background-color: #fff;
// color: #000;
// padding-top: 5rem;
// padding-bottom: 6rem;
// } */
//
// /* .ressources {
// display: grid;
// grid-template-columns: repeat(4, 1fr);
// grid-gap: 3rem;
// grid-auto-rows: auto;
// background-color: #ffffff;
// padding-top: 18rem;
// justify-items: center;
// position: relative;
// margin-right: 10%;
// margin-bottom: 6rem;
// margin-left: 10%;
// } */
//
// /* .ressources img {
// max-width: 50%;
// } */
//
// /* .ressource h1 h2 h3 h4 {
// margin: 0.2rem;
// } */
/*CSS pour afficher/masquer un texte via un bouton*/
/*Style du module TEXTE*/
.texte-cache {
position: relative;
max-height: 400px; /*Hauteur du texte visible avant le clic*/
overflow: hidden; /*On cache tout ce qui dépasse des 500px*/
transition: max-height 1s ease; /* Transition CSS entre l'ouverture et la fermeture*/
}
/*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*/
}
/*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 {
content: '';
position: absolute;
top: 400px;
bottom: 0;
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;
}
.gouvernance {
background-color: #000;
@@ -321,10 +326,9 @@
}
.mozaique_personnes {
background-color: #d5d2d1;
padding-bottom: 4rem;
@@ -334,10 +338,11 @@
flex-wrap: wrap;
// margin-left: 15%;
// padding-right: 15%;
width: 54%;
width: 100%;
padding-left: 22%;
padding-right: 15%;
margin: auto;
// justify-items: center;
justify-items: center;
h3 {
// display: flex;
@@ -432,33 +437,17 @@
}
// .mozaique :hover {
// background-color: #000;
// color: #fff;
// }
// comment faire pour donner une largueur à .info 2 fois plus grande que .portrait? les img de .portrait ne semblent pas vouloir bouger...
.bouton {
border: solid;
background-color: transparent;
text-transform: uppercase;
align-self: flex-end;
margin-right: 2rem;
margin:auto;
}
//
// .bouton :hover {
@@ -539,3 +528,75 @@
// .modal .container a.close:hover{
// color: black;
// }
#new-footer {
// position:absolute;
display: flex;
flex-direction: column;
.tothetop {
position: absolute;
// align-self: center;
height: 1rem;
bottom: $footer-height + 10rem;
text-align: center;
left: 0;
right: 0;
span {
font-size: 1.7rem;
line-height: 2,5rem;
background: #fff;
width: 4rem;
height: 5rem;
border-radius: $border-radius;
display: inline-block;
text-align: top;
}
}
.footer {
display: flex;
flex-direction: row;
.footer-logos {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
width: 70%;
align-items: center;
margin-left: 3rem;
img {
min-height: 4rem;
max-height: 4rem;
padding-right: 1rem;
}
}
.contact {
display: flex;
flex-direction: column;
width: 30%;
margin-top: 1.5rem;
align-items: flex-start;
img {
margin-bottom: 1rem;
max-height: 2rem;
}
svg {
margin-bottom: 1rem;
}
h6 {
margin: 0 !important;
font-weight: 600;
}
p {
margin: 0;
}
}
}
}