bachir
/
drupal-erable
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ajout des ornements sur l'index

This commit is contained in:
Valentin 2023-12-18 11:48:10 +01:00
parent 02e77dda2f
commit 9db8cebe7d
10 changed files with 706 additions and 367 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

525
web/themes/erabletheme/css/styles.css
View File

@ -477,6 +477,9 @@ a {
} }
.slick-container div.views-row article > div:first-of-type { .slick-container div.views-row article > div:first-of-type {
width: calc(50% + 6.25vw); 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 { .slick-container div.views-row article > div:last-of-type {
width: calc(50% - 6.25vw); width: calc(50% - 6.25vw);
@ -491,6 +494,9 @@ a {
.slick-container div.views-row article > div:last-of-type > div:last-of-type { .slick-container div.views-row article > div:last-of-type > div:last-of-type {
margin-top: 0.5rem; margin-top: 0.5rem;
} }
.slick-container div.views-row article .preview_infos {
background-color: #fcf9ee;
}
} }
.slick-container .slick-arrow { .slick-container .slick-arrow {
display: none !important; display: none !important;
@ -603,6 +609,7 @@ a {
font-weight: 800; font-weight: 800;
color: #038788; color: #038788;
padding-left: 3vw; padding-left: 3vw;
cursor: pointer;
} }
.actu_full .article_meta { .actu_full .article_meta {
padding-left: 3vw; padding-left: 3vw;
@ -741,8 +748,343 @@ a {
color: #038788; 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 */ /* PAGES */
.home_introduction { .home_introduction {
position: relative;
border-bottom: solid 2px #038788; border-bottom: solid 2px #038788;
width: 100%; width: 100%;
padding: 4rem 0; padding: 4rem 0;
@ -750,6 +1092,10 @@ a {
.home_introduction h2 { .home_introduction h2 {
display: none; display: none;
} }
.home_introduction > div {
z-index: 1;
position: relative;
}
.home_introduction > .logo { .home_introduction > .logo {
text-align: center; text-align: center;
width: 100%; 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 { .content_gouvernance .views-row {
margin-bottom: 2vh; margin-bottom: 2vh;
} }

2
web/themes/erabletheme/css/styles.css.map
View File

File diff suppressed because one or more lines are too long

178
web/themes/erabletheme/scss/_fullpage.scss
View File

@ -90,181 +90,3 @@
margin-left: 25vw; 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;
}
}
}
}

5
web/themes/erabletheme/scss/_home.scss
View File

@ -1,10 +1,15 @@
.home_introduction { .home_introduction {
position: relative;
border-bottom: solid 2px $teal; border-bottom: solid 2px $teal;
width: 100%; width: 100%;
padding: 4rem 0; padding: 4rem 0;
h2 { h2 {
display: none; display: none;
} }
> div {
z-index: 1;
position: relative;
}
> .logo { > .logo {
text-align: center; text-align: center;
width: 100%; width: 100%;

1
web/themes/erabletheme/scss/partials/_articles.scss
View File

@ -8,6 +8,7 @@
font-weight: 800; font-weight: 800;
color: $teal; color: $teal;
padding-left: $x_margin; padding-left: $x_margin;
cursor: pointer;
} }
.article_meta { .article_meta {
padding-left: $x_margin; padding-left: $x_margin;

6
web/themes/erabletheme/scss/partials/_carousel.scss
View File

@ -41,6 +41,9 @@
border-bottom: solid 1px $teal; border-bottom: solid 1px $teal;
> div:first-of-type { > div:first-of-type {
width: calc(50% + 6.25vw); width: calc(50% + 6.25vw);
height: 40vh !important;
align-self: flex-start;
min-height: 100% !important;
} }
> div:last-of-type { > div:last-of-type {
width: calc(50% - 6.25vw); width: calc(50% - 6.25vw);
@ -55,6 +58,9 @@
margin-top: 0.5rem; margin-top: 0.5rem;
} }
} }
.preview_infos {
background-color: $beige;
}
} }
} }
.slick-arrow { .slick-arrow {

324
web/themes/erabletheme/scss/partials/_ornements.scss Normal file
View File

@ -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;
}
}

1
web/themes/erabletheme/scss/styles.scss
View File

@ -12,6 +12,7 @@
@import "partials/_carousel"; @import "partials/_carousel";
@import "partials/_articles"; @import "partials/_articles";
@import "partials/_articles_teaser"; @import "partials/_articles_teaser";
@import "partials/_ornements.scss";
/* PAGES */ /* PAGES */

4
web/themes/erabletheme/templates/block--views-block--actus-block-1.html.twig
View File

@ -28,6 +28,9 @@
* @ingroup themeable * @ingroup themeable
*/ */
#} #}
<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') }}> <div{{ attributes.addClass('slick-container') }}>
{{ title_prefix }} {{ title_prefix }}
{% if label %} {% if label %}
@ -38,3 +41,4 @@
{{ content }} {{ content }}
{% endblock %} {% endblock %}
</div> </div>
</div>

9
web/themes/erabletheme/templates/block--views-block--home-blocks-block-1.html.twig
View File

@ -30,6 +30,15 @@
#} #}
<div{{ attributes }}> <div{{ attributes }}>
<div class="home_introduction"> <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"> <div class="logo">
<img src="{{ directory }}/assets/logo_erable.png" alt="Logo Érable" /> <img src="{{ directory }}/assets/logo_erable.png" alt="Logo Érable" />
</div> </div>