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

View File

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