ajout des ornements sur l'index
This commit is contained in:
parent
02e77dda2f
commit
9db8cebe7d
|
@ -477,6 +477,9 @@ a {
|
|||
}
|
||||
.slick-container div.views-row article > div:first-of-type {
|
||||
width: calc(50% + 6.25vw);
|
||||
height: 40vh !important;
|
||||
align-self: flex-start;
|
||||
min-height: 100% !important;
|
||||
}
|
||||
.slick-container div.views-row article > div:last-of-type {
|
||||
width: calc(50% - 6.25vw);
|
||||
|
@ -491,6 +494,9 @@ a {
|
|||
.slick-container div.views-row article > div:last-of-type > div:last-of-type {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.slick-container div.views-row article .preview_infos {
|
||||
background-color: #fcf9ee;
|
||||
}
|
||||
}
|
||||
.slick-container .slick-arrow {
|
||||
display: none !important;
|
||||
|
@ -603,6 +609,7 @@ a {
|
|||
font-weight: 800;
|
||||
color: #038788;
|
||||
padding-left: 3vw;
|
||||
cursor: pointer;
|
||||
}
|
||||
.actu_full .article_meta {
|
||||
padding-left: 3vw;
|
||||
|
@ -741,8 +748,343 @@ a {
|
|||
color: #038788;
|
||||
}
|
||||
|
||||
.ornements_top_over {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
height: 30vh;
|
||||
right: -55vw;
|
||||
top: -5vh;
|
||||
z-index: 0;
|
||||
}
|
||||
.ornements_top_over > div {
|
||||
position: absolute;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.ornements_top_over > div:first-of-type {
|
||||
background-image: url(../assets/formes/forme_4.png);
|
||||
top: -3vh;
|
||||
right: 5vw;
|
||||
}
|
||||
.ornements_top_over > div:nth-of-type(2) {
|
||||
background-image: url(../assets/formes/forme_5.png);
|
||||
right: -13vw;
|
||||
}
|
||||
.ornements_top_over > div:nth-of-type(3) {
|
||||
background-image: url(../assets/formes/forme_3.png);
|
||||
top: 4vh;
|
||||
right: -8vw;
|
||||
}
|
||||
@media (min-width: 760px) {
|
||||
.ornements_top_over {
|
||||
left: -40vw;
|
||||
top: -10vw;
|
||||
}
|
||||
.ornements_top_over > div {
|
||||
transform: scaleX(-1);
|
||||
left: -55vw;
|
||||
}
|
||||
.ornements_top_over > div:first-of-type {
|
||||
display: none;
|
||||
}
|
||||
.ornements_top_over > div:nth-of-type(2) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1080px) {
|
||||
.ornements_top_over > div:nth-of-type(3) {
|
||||
transform: scaleX(-1) rotate(-25deg);
|
||||
top: -25vh;
|
||||
}
|
||||
}
|
||||
|
||||
.ornements_top_under {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
height: 30vh;
|
||||
left: -30vw;
|
||||
top: 0vw;
|
||||
}
|
||||
.ornements_top_under > div {
|
||||
position: absolute;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
.ornements_top_under > div:first-of-type {
|
||||
background-image: url(../assets/formes/forme_4.png);
|
||||
top: -3vh;
|
||||
left: -45vw;
|
||||
}
|
||||
.ornements_top_under > div:nth-of-type(2) {
|
||||
background-image: url(../assets/formes/forme_5.png);
|
||||
left: -60vw;
|
||||
}
|
||||
@media (min-width: 760px) {
|
||||
.ornements_top_under {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1080px) {
|
||||
.ornements_top_under > div:first-of-type {
|
||||
top: 1vh;
|
||||
left: -50vw;
|
||||
}
|
||||
.ornements_top_under > div:nth-of-type(2) {
|
||||
top: 6vh;
|
||||
left: -56.5vw;
|
||||
}
|
||||
}
|
||||
|
||||
.ornements_bottom_over {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
height: 30vh;
|
||||
left: -30vw;
|
||||
bottom: -20vh;
|
||||
}
|
||||
.ornements_bottom_over > div {
|
||||
position: absolute;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.ornements_bottom_over > div:first-of-type {
|
||||
background-image: url(../assets/formes/forme_1.png);
|
||||
left: 8vw;
|
||||
bottom: -4vh;
|
||||
}
|
||||
.ornements_bottom_over > div:nth-of-type(2) {
|
||||
background-image: url(../assets/formes/forme_2.png);
|
||||
bottom: -15vh;
|
||||
left: -3vw;
|
||||
}
|
||||
@media (min-width: 760px) {
|
||||
.ornements_bottom_over {
|
||||
left: unset;
|
||||
right: -8vw;
|
||||
bottom: -25vh;
|
||||
}
|
||||
.ornements_bottom_over > div {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
.ornements_bottom_over > div:nth-of-type(2) {
|
||||
left: 18vw;
|
||||
bottom: -11vh;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1080px) {
|
||||
.ornements_bottom_over > div:first-of-type {
|
||||
bottom: 6vh;
|
||||
left: 20vw;
|
||||
}
|
||||
.ornements_bottom_over > div:nth-of-type(2) {
|
||||
bottom: -9vh;
|
||||
left: 25vw;
|
||||
}
|
||||
}
|
||||
|
||||
.fullpage.actus .ornements_top_over, .fullpage.actus .ornements_top_under {
|
||||
top: -12vh;
|
||||
}
|
||||
.fullpage.actus .ornements_bottom_over {
|
||||
bottom: -28vh;
|
||||
}
|
||||
.fullpage.actus .ornements_bottom_over > div:nth-of-type(2) {
|
||||
bottom: -10vh;
|
||||
left: -7vh;
|
||||
}
|
||||
@media (min-width: 760px) {
|
||||
.fullpage.actus {
|
||||
width: auto;
|
||||
margin-left: 3vw;
|
||||
margin-right: 3vw;
|
||||
}
|
||||
.fullpage.actus .actus_list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
@media (min-width: 1080px) {
|
||||
.fullpage.actus .actus_list {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
.fullpage.actus .ornements_top_over > div:nth-of-type(3) {
|
||||
top: -28vh;
|
||||
}
|
||||
.fullpage.actus .ornements_bottom_over > div:first-of-type {
|
||||
bottom: 0vh;
|
||||
left: -3vw;
|
||||
}
|
||||
.fullpage.actus .ornements_bottom_over > div:nth-of-type(2) {
|
||||
left: 6vh;
|
||||
}
|
||||
}
|
||||
|
||||
.carousel_container {
|
||||
position: relative;
|
||||
}
|
||||
.carousel_container .ornements_carousel_top {
|
||||
position: absolute;
|
||||
display: none;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-image: url(../assets/formes/forme_5.png);
|
||||
}
|
||||
@media (min-width: 760px) {
|
||||
.carousel_container .ornements_carousel_top {
|
||||
display: block;
|
||||
width: 20vw;
|
||||
height: 50vh;
|
||||
top: -25vh;
|
||||
left: 3vw;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
@media (min-width: 1080px) {
|
||||
.carousel_container .ornements_carousel_top {
|
||||
top: 20vh;
|
||||
left: -10vw;
|
||||
height: 30vh;
|
||||
}
|
||||
}
|
||||
.carousel_container .ornements_carousel_bottom {
|
||||
position: absolute;
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
@media (min-width: 760px) {
|
||||
.carousel_container .ornements_carousel_bottom {
|
||||
display: block;
|
||||
width: 20vw;
|
||||
height: 50vh;
|
||||
right: 0;
|
||||
bottom: 1px;
|
||||
}
|
||||
.carousel_container .ornements_carousel_bottom > div:first-of-type {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-image: url(../assets/formes/forme_5.png);
|
||||
position: absolute;
|
||||
margin-top: 35vh;
|
||||
}
|
||||
.carousel_container .ornements_carousel_bottom > div:nth-of-type(2) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-image: url(../assets/formes/forme_2.png);
|
||||
position: absolute;
|
||||
margin-top: 40vh;
|
||||
margin-left: 12vw;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1080px) {
|
||||
.carousel_container .ornements_carousel_bottom {
|
||||
width: 12vw;
|
||||
bottom: unset;
|
||||
top: 0;
|
||||
right: -2vw;
|
||||
}
|
||||
.carousel_container .ornements_carousel_bottom > div:first-of-type {
|
||||
margin-top: -16vh;
|
||||
}
|
||||
.carousel_container .ornements_carousel_bottom > div:nth-of-type(2) {
|
||||
margin-top: -8vh;
|
||||
margin-left: 4vw;
|
||||
}
|
||||
}
|
||||
|
||||
.ornements_presentation_left {
|
||||
position: absolute !important;
|
||||
height: 20vh;
|
||||
width: 20vw;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.ornements_presentation_left > div {
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.ornements_presentation_left > div:first-of-type {
|
||||
background-image: url(../assets/formes/forme_4.png);
|
||||
transform: rotate(180deg);
|
||||
width: 200%;
|
||||
left: -20vw;
|
||||
bottom: -8vh;
|
||||
}
|
||||
.ornements_presentation_left > div:nth-of-type(2) {
|
||||
background-image: url(../assets/formes/forme_5.png);
|
||||
transform: rotate(180deg);
|
||||
width: 130%;
|
||||
left: -10vw;
|
||||
bottom: -5vh;
|
||||
}
|
||||
@media (min-width: 760px) {
|
||||
.ornements_presentation_left > div:nth-of-type(2) {
|
||||
width: 170%;
|
||||
height: 120%;
|
||||
left: -21vw;
|
||||
bottom: -3vh;
|
||||
}
|
||||
}
|
||||
.ornements_presentation_left > div:nth-of-type(3) {
|
||||
background-image: url(../assets/formes/forme_3.png);
|
||||
transform: rotate(180deg);
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 200%;
|
||||
left: -22vw;
|
||||
bottom: -3vh;
|
||||
}
|
||||
|
||||
.ornements_presentation_right {
|
||||
position: absolute !important;
|
||||
height: 20vh;
|
||||
width: 20vw;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.ornements_presentation_right > div {
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.ornements_presentation_right > div:first-of-type {
|
||||
background-image: url(../assets/formes/forme_1.png);
|
||||
transform: rotate(-90deg);
|
||||
bottom: -3vh;
|
||||
right: -6vw;
|
||||
}
|
||||
.ornements_presentation_right > div:nth-of-type(2) {
|
||||
background-image: url(../assets/formes/forme_2.png);
|
||||
bottom: -12vh;
|
||||
right: -12vw;
|
||||
}
|
||||
|
||||
/* PAGES */
|
||||
.home_introduction {
|
||||
position: relative;
|
||||
border-bottom: solid 2px #038788;
|
||||
width: 100%;
|
||||
padding: 4rem 0;
|
||||
|
@ -750,6 +1092,10 @@ a {
|
|||
.home_introduction h2 {
|
||||
display: none;
|
||||
}
|
||||
.home_introduction > div {
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
.home_introduction > .logo {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
|
@ -1034,185 +1380,6 @@ a {
|
|||
}
|
||||
}
|
||||
|
||||
.ornements_top_over {
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
height: 30vh;
|
||||
right: -55vw;
|
||||
top: -5vh;
|
||||
z-index: 0;
|
||||
}
|
||||
.ornements_top_over > div {
|
||||
position: absolute;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.ornements_top_over > div:first-of-type {
|
||||
background-image: url(../assets/formes/forme_4.png);
|
||||
top: -3vh;
|
||||
right: 5vw;
|
||||
}
|
||||
.ornements_top_over > div:nth-of-type(2) {
|
||||
background-image: url(../assets/formes/forme_5.png);
|
||||
right: -13vw;
|
||||
}
|
||||
.ornements_top_over > div:nth-of-type(3) {
|
||||
background-image: url(../assets/formes/forme_3.png);
|
||||
top: 4vh;
|
||||
right: -8vw;
|
||||
}
|
||||
@media (min-width: 760px) {
|
||||
.ornements_top_over {
|
||||
left: -40vw;
|
||||
top: -10vw;
|
||||
}
|
||||
.ornements_top_over > div {
|
||||
transform: scaleX(-1);
|
||||
left: -55vw;
|
||||
}
|
||||
.ornements_top_over > div:first-of-type {
|
||||
display: none;
|
||||
}
|
||||
.ornements_top_over > div:nth-of-type(2) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1080px) {
|
||||
.ornements_top_over > div:nth-of-type(3) {
|
||||
transform: scaleX(-1) rotate(-25deg);
|
||||
top: -25vh;
|
||||
}
|
||||
}
|
||||
|
||||
.ornements_top_under {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
height: 30vh;
|
||||
left: -30vw;
|
||||
top: 0vw;
|
||||
}
|
||||
.ornements_top_under > div {
|
||||
position: absolute;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
.ornements_top_under > div:first-of-type {
|
||||
background-image: url(../assets/formes/forme_4.png);
|
||||
top: -3vh;
|
||||
left: -45vw;
|
||||
}
|
||||
.ornements_top_under > div:nth-of-type(2) {
|
||||
background-image: url(../assets/formes/forme_5.png);
|
||||
left: -60vw;
|
||||
}
|
||||
@media (min-width: 760px) {
|
||||
.ornements_top_under {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1080px) {
|
||||
.ornements_top_under > div:first-of-type {
|
||||
top: 1vh;
|
||||
left: -50vw;
|
||||
}
|
||||
.ornements_top_under > div:nth-of-type(2) {
|
||||
top: 6vh;
|
||||
left: -56.5vw;
|
||||
}
|
||||
}
|
||||
|
||||
.ornements_bottom_over {
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
height: 30vh;
|
||||
left: -30vw;
|
||||
bottom: -20vh;
|
||||
}
|
||||
.ornements_bottom_over > div {
|
||||
position: absolute;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.ornements_bottom_over > div:first-of-type {
|
||||
background-image: url(../assets/formes/forme_1.png);
|
||||
left: 8vw;
|
||||
bottom: -4vh;
|
||||
}
|
||||
.ornements_bottom_over > div:nth-of-type(2) {
|
||||
background-image: url(../assets/formes/forme_2.png);
|
||||
bottom: -15vh;
|
||||
left: -3vw;
|
||||
}
|
||||
@media (min-width: 760px) {
|
||||
.ornements_bottom_over {
|
||||
left: unset;
|
||||
right: -8vw;
|
||||
bottom: -25vh;
|
||||
}
|
||||
.ornements_bottom_over > div {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
.ornements_bottom_over > div:nth-of-type(2) {
|
||||
left: 18vw;
|
||||
bottom: -11vh;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1080px) {
|
||||
.ornements_bottom_over > div:first-of-type {
|
||||
bottom: 6vh;
|
||||
left: 20vw;
|
||||
}
|
||||
.ornements_bottom_over > div:nth-of-type(2) {
|
||||
bottom: -9vh;
|
||||
left: 25vw;
|
||||
}
|
||||
}
|
||||
|
||||
.fullpage.actus .ornements_top_over, .fullpage.actus .ornements_top_under {
|
||||
top: -12vh;
|
||||
}
|
||||
.fullpage.actus .ornements_bottom_over {
|
||||
bottom: -28vh;
|
||||
}
|
||||
.fullpage.actus .ornements_bottom_over > div:nth-of-type(2) {
|
||||
bottom: -10vh;
|
||||
left: -7vh;
|
||||
}
|
||||
@media (min-width: 760px) {
|
||||
.fullpage.actus {
|
||||
width: auto;
|
||||
margin-left: 3vw;
|
||||
margin-right: 3vw;
|
||||
}
|
||||
.fullpage.actus .actus_list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
@media (min-width: 1080px) {
|
||||
.fullpage.actus .actus_list {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
.fullpage.actus .ornements_top_over > div:nth-of-type(3) {
|
||||
top: -28vh;
|
||||
}
|
||||
.fullpage.actus .ornements_bottom_over > div:first-of-type {
|
||||
bottom: 0vh;
|
||||
left: -3vw;
|
||||
}
|
||||
.fullpage.actus .ornements_bottom_over > div:nth-of-type(2) {
|
||||
left: 6vh;
|
||||
}
|
||||
}
|
||||
|
||||
.content_gouvernance .views-row {
|
||||
margin-bottom: 2vh;
|
||||
}
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -89,182 +89,4 @@
|
|||
width: 50vw;
|
||||
margin-left: 25vw;
|
||||
}
|
||||
}
|
||||
|
||||
.ornements_top_over {
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
height: 30vh;
|
||||
right: -55vw;
|
||||
top: -5vh;
|
||||
z-index: 0;
|
||||
> div {
|
||||
position: absolute;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
> div:first-of-type {
|
||||
background-image: url(../assets/formes/forme_4.png);
|
||||
top: -3vh;
|
||||
right: 5vw;
|
||||
}
|
||||
> div:nth-of-type(2) {
|
||||
background-image: url(../assets/formes/forme_5.png);
|
||||
right: -13vw;
|
||||
}
|
||||
> div:nth-of-type(3) {
|
||||
background-image: url(../assets/formes/forme_3.png);
|
||||
top: 4vh;
|
||||
right: -8vw;
|
||||
}
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
left: -40vw;
|
||||
top: -10vw;
|
||||
> div {
|
||||
transform: scaleX(-1);
|
||||
left: -55vw;
|
||||
}
|
||||
> div:first-of-type {
|
||||
display: none;
|
||||
}
|
||||
> div:nth-of-type(2) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (min-width: $breakpoint_desktop) {
|
||||
> div:nth-of-type(3) {
|
||||
transform: scaleX(-1) rotate(-25deg);
|
||||
top: -25vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ornements_top_under {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
height: 30vh;
|
||||
left: -30vw;
|
||||
top: 0vw;
|
||||
> div {
|
||||
position: absolute;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
> div:first-of-type {
|
||||
background-image: url(../assets/formes/forme_4.png);
|
||||
top: -3vh;
|
||||
left: -45vw;
|
||||
}
|
||||
> div:nth-of-type(2) {
|
||||
background-image: url(../assets/formes/forme_5.png);
|
||||
left: -60vw;
|
||||
}
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
display: block;
|
||||
}
|
||||
@media (min-width: $breakpoint_desktop) {
|
||||
> div:first-of-type {
|
||||
top: 1vh;
|
||||
left: -50vw;
|
||||
}
|
||||
> div:nth-of-type(2) {
|
||||
top: 6vh;
|
||||
left: -56.5vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ornements_bottom_over {
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
height: 30vh;
|
||||
left: -30vw;
|
||||
bottom: -20vh;
|
||||
> div {
|
||||
position: absolute;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
> div:first-of-type {
|
||||
background-image: url(../assets/formes/forme_1.png);
|
||||
left: 8vw;
|
||||
bottom: -4vh;
|
||||
}
|
||||
> div:nth-of-type(2) {
|
||||
background-image: url(../assets/formes/forme_2.png);
|
||||
bottom: -15vh;
|
||||
left: -3vw;
|
||||
}
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
left: unset;
|
||||
right: -8vw;
|
||||
bottom: -25vh;
|
||||
> div {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
> div:nth-of-type(2) {
|
||||
left: 18vw;
|
||||
bottom: -11vh;
|
||||
}
|
||||
|
||||
}
|
||||
@media (min-width: $breakpoint_desktop) {
|
||||
> div:first-of-type {
|
||||
bottom: 6vh;
|
||||
left: 20vw;
|
||||
}
|
||||
> div:nth-of-type(2) {
|
||||
bottom: -9vh;
|
||||
left: 25vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fullpage.actus {
|
||||
.ornements_top_over, .ornements_top_under {
|
||||
top: -12vh;
|
||||
}
|
||||
.ornements_bottom_over {
|
||||
bottom: -28vh;
|
||||
> div:nth-of-type(2) {
|
||||
bottom: -10vh;
|
||||
left: -7vh;
|
||||
}
|
||||
}
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
width: auto;
|
||||
margin-left: $x_margin;
|
||||
margin-right: $x_margin;
|
||||
.actus_list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
@media (min-width: $breakpoint_desktop) {
|
||||
.actus_list {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
.ornements_top_over {
|
||||
> div:nth-of-type(3) {
|
||||
top: -28vh;
|
||||
}
|
||||
}
|
||||
.ornements_bottom_over {
|
||||
> div:first-of-type {
|
||||
bottom: 0vh;
|
||||
left: -3vw;
|
||||
}
|
||||
> div:nth-of-type(2) {
|
||||
left: 6vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,10 +1,15 @@
|
|||
.home_introduction {
|
||||
position: relative;
|
||||
border-bottom: solid 2px $teal;
|
||||
width: 100%;
|
||||
padding: 4rem 0;
|
||||
h2 {
|
||||
display: none;
|
||||
}
|
||||
> div {
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
> .logo {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
|
|
|
@ -8,6 +8,7 @@
|
|||
font-weight: 800;
|
||||
color: $teal;
|
||||
padding-left: $x_margin;
|
||||
cursor: pointer;
|
||||
}
|
||||
.article_meta {
|
||||
padding-left: $x_margin;
|
||||
|
|
|
@ -41,6 +41,9 @@
|
|||
border-bottom: solid 1px $teal;
|
||||
> div:first-of-type {
|
||||
width: calc(50% + 6.25vw);
|
||||
height: 40vh !important;
|
||||
align-self: flex-start;
|
||||
min-height: 100% !important;
|
||||
}
|
||||
> div:last-of-type {
|
||||
width: calc(50% - 6.25vw);
|
||||
|
@ -55,6 +58,9 @@
|
|||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
.preview_infos {
|
||||
background-color: $beige;
|
||||
}
|
||||
}
|
||||
}
|
||||
.slick-arrow {
|
||||
|
|
|
@ -0,0 +1,324 @@
|
|||
.ornements_top_over {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
height: 30vh;
|
||||
right: -55vw;
|
||||
top: -5vh;
|
||||
z-index: 0;
|
||||
> div {
|
||||
position: absolute;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
> div:first-of-type {
|
||||
background-image: url(../assets/formes/forme_4.png);
|
||||
top: -3vh;
|
||||
right: 5vw;
|
||||
}
|
||||
> div:nth-of-type(2) {
|
||||
background-image: url(../assets/formes/forme_5.png);
|
||||
right: -13vw;
|
||||
}
|
||||
> div:nth-of-type(3) {
|
||||
background-image: url(../assets/formes/forme_3.png);
|
||||
top: 4vh;
|
||||
right: -8vw;
|
||||
}
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
left: -40vw;
|
||||
top: -10vw;
|
||||
> div {
|
||||
transform: scaleX(-1);
|
||||
left: -55vw;
|
||||
}
|
||||
> div:first-of-type {
|
||||
display: none;
|
||||
}
|
||||
> div:nth-of-type(2) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (min-width: $breakpoint_desktop) {
|
||||
> div:nth-of-type(3) {
|
||||
transform: scaleX(-1) rotate(-25deg);
|
||||
top: -25vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ornements_top_under {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
height: 30vh;
|
||||
left: -30vw;
|
||||
top: 0vw;
|
||||
> div {
|
||||
position: absolute;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
> div:first-of-type {
|
||||
background-image: url(../assets/formes/forme_4.png);
|
||||
top: -3vh;
|
||||
left: -45vw;
|
||||
}
|
||||
> div:nth-of-type(2) {
|
||||
background-image: url(../assets/formes/forme_5.png);
|
||||
left: -60vw;
|
||||
}
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
display: block;
|
||||
}
|
||||
@media (min-width: $breakpoint_desktop) {
|
||||
> div:first-of-type {
|
||||
top: 1vh;
|
||||
left: -50vw;
|
||||
}
|
||||
> div:nth-of-type(2) {
|
||||
top: 6vh;
|
||||
left: -56.5vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ornements_bottom_over {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
height: 30vh;
|
||||
left: -30vw;
|
||||
bottom: -20vh;
|
||||
> div {
|
||||
position: absolute;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
> div:first-of-type {
|
||||
background-image: url(../assets/formes/forme_1.png);
|
||||
left: 8vw;
|
||||
bottom: -4vh;
|
||||
}
|
||||
> div:nth-of-type(2) {
|
||||
background-image: url(../assets/formes/forme_2.png);
|
||||
bottom: -15vh;
|
||||
left: -3vw;
|
||||
}
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
left: unset;
|
||||
right: -8vw;
|
||||
bottom: -25vh;
|
||||
> div {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
> div:nth-of-type(2) {
|
||||
left: 18vw;
|
||||
bottom: -11vh;
|
||||
}
|
||||
|
||||
}
|
||||
@media (min-width: $breakpoint_desktop) {
|
||||
> div:first-of-type {
|
||||
bottom: 6vh;
|
||||
left: 20vw;
|
||||
}
|
||||
> div:nth-of-type(2) {
|
||||
bottom: -9vh;
|
||||
left: 25vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fullpage.actus {
|
||||
.ornements_top_over, .ornements_top_under {
|
||||
top: -12vh;
|
||||
}
|
||||
.ornements_bottom_over {
|
||||
bottom: -28vh;
|
||||
> div:nth-of-type(2) {
|
||||
bottom: -10vh;
|
||||
left: -7vh;
|
||||
}
|
||||
}
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
width: auto;
|
||||
margin-left: $x_margin;
|
||||
margin-right: $x_margin;
|
||||
.actus_list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
@media (min-width: $breakpoint_desktop) {
|
||||
.actus_list {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
.ornements_top_over {
|
||||
> div:nth-of-type(3) {
|
||||
top: -28vh;
|
||||
}
|
||||
}
|
||||
.ornements_bottom_over {
|
||||
> div:first-of-type {
|
||||
bottom: 0vh;
|
||||
left: -3vw;
|
||||
}
|
||||
> div:nth-of-type(2) {
|
||||
left: 6vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.carousel_container {
|
||||
position: relative;
|
||||
.ornements_carousel_top {
|
||||
position: absolute;
|
||||
display: none;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-image: url(../assets/formes/forme_5.png);
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
display: block;
|
||||
width: 20vw;
|
||||
height: 50vh;
|
||||
top: -25vh;
|
||||
left: 3vw;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
@media (min-width: $breakpoint_desktop) {
|
||||
top: 20vh;
|
||||
left: -10vw;
|
||||
height: 30vh;
|
||||
}
|
||||
}
|
||||
|
||||
.ornements_carousel_bottom {
|
||||
position: absolute;
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
display: block;
|
||||
width: 20vw;
|
||||
height: 50vh;
|
||||
right: 0;
|
||||
bottom: 1px;
|
||||
> div:first-of-type {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-image: url(../assets/formes/forme_5.png);
|
||||
position: absolute;
|
||||
margin-top: 35vh;
|
||||
}
|
||||
> div:nth-of-type(2) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-image: url(../assets/formes/forme_2.png);
|
||||
position: absolute;
|
||||
margin-top: 40vh;
|
||||
margin-left: 12vw;
|
||||
}
|
||||
}
|
||||
@media (min-width: $breakpoint_desktop) {
|
||||
width: 12vw;
|
||||
bottom: unset;
|
||||
top: 0;
|
||||
right: -2vw;
|
||||
> div:first-of-type {
|
||||
margin-top: -16vh;
|
||||
}
|
||||
> div:nth-of-type(2) {
|
||||
margin-top: -8vh;
|
||||
margin-left: 4vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ornements_presentation_left {
|
||||
position: absolute !important;
|
||||
height: 20vh;
|
||||
width: 20vw;
|
||||
// background-color: red;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
> div {
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
> div:first-of-type {
|
||||
background-image: url(../assets/formes/forme_4.png);
|
||||
transform: rotate(180deg);
|
||||
width: 200%;
|
||||
left: -20vw;
|
||||
bottom: -8vh;
|
||||
}
|
||||
> div:nth-of-type(2) {
|
||||
background-image: url(../assets/formes/forme_5.png);
|
||||
transform: rotate(180deg);
|
||||
width: 130%;
|
||||
left: -10vw;
|
||||
bottom: -5vh;
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
width: 170%;
|
||||
height: 120%;
|
||||
left: -21vw;
|
||||
bottom: -3vh;
|
||||
}
|
||||
}
|
||||
> div:nth-of-type(3) {
|
||||
background-image: url(../assets/formes/forme_3.png);
|
||||
transform: rotate(180deg);
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 200%;
|
||||
left: -22vw;
|
||||
bottom: -3vh;
|
||||
}
|
||||
}
|
||||
|
||||
.ornements_presentation_right {
|
||||
position: absolute !important;
|
||||
height: 20vh;
|
||||
width: 20vw;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
> div {
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
> div:first-of-type {
|
||||
background-image: url(../assets/formes/forme_1.png);
|
||||
transform: rotate(-90deg);
|
||||
bottom: -3vh;
|
||||
right: -6vw;
|
||||
}
|
||||
> div:nth-of-type(2) {
|
||||
background-image: url(../assets/formes/forme_2.png);
|
||||
bottom: -12vh;
|
||||
right: -12vw;
|
||||
}
|
||||
}
|
|
@ -12,6 +12,7 @@
|
|||
@import "partials/_carousel";
|
||||
@import "partials/_articles";
|
||||
@import "partials/_articles_teaser";
|
||||
@import "partials/_ornements.scss";
|
||||
|
||||
/* PAGES */
|
||||
|
||||
|
|
|
@ -28,13 +28,17 @@
|
|||
* @ingroup themeable
|
||||
*/
|
||||
#}
|
||||
<div{{ attributes.addClass('slick-container') }}>
|
||||
{{ title_prefix }}
|
||||
{% if label %}
|
||||
<h2{{ title_attributes }}>{{ label }}</h2>
|
||||
{% endif %}
|
||||
{{ title_suffix }}
|
||||
{% block content %}
|
||||
{{ content }}
|
||||
{% endblock %}
|
||||
<div class="carousel_container">
|
||||
<div class="ornements_carousel_top"></div>
|
||||
<div class="ornements_carousel_bottom"><div></div><div></div></div>
|
||||
<div{{ attributes.addClass('slick-container') }}>
|
||||
{{ title_prefix }}
|
||||
{% if label %}
|
||||
<h2{{ title_attributes }}>{{ label }}</h2>
|
||||
{% endif %}
|
||||
{{ title_suffix }}
|
||||
{% block content %}
|
||||
{{ content }}
|
||||
{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -30,6 +30,15 @@
|
|||
#}
|
||||
<div{{ attributes }}>
|
||||
<div class="home_introduction">
|
||||
<div class="ornements_presentation_left">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="ornements_presentation_right">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="logo">
|
||||
<img src="{{ directory }}/assets/logo_erable.png" alt="Logo Érable" />
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue