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

ajout des images d'ornement

Browse Source
This commit is contained in:
Valentin
2023-12-17 16:49:23 +01:00
parent a0137d95ac
commit 02e77dda2f
16 changed files with 471 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,16 +3,33 @@
margin-top: -3vh;
padding-top: 3vh;
@include beige_gradient();
position: relative;
> h2 {
@include main_title();
padding-top: 5vh;
margin-top: 5vh;
margin-bottom: 7vh;
background-color: $beige;
z-index: 1;
position: relative;
width: auto;
display: inline-block;
@media (min-width: $breakpoint_tablet) {
background-color: unset;
}
}
.fullpage_content {
> h2 {
@include main_title();
padding-top: 5vh;
margin-top: 5vh;
background-color: $beige;
z-index: 1;
position: relative;
width: auto;
display: inline-block;
@media (min-width: $breakpoint_tablet) {
background-color: unset;
}
}
.sous_titre {
@@ -39,21 +56,19 @@
@include fluo_button();
a {
display: inline-block;
max-width: calc(25vw - $x_margin * 2);
}
@media (min-width: $breakpoint_tablet) {
padding: 0;
}
@media (min-width: $breakpoint_desktop) {
margin-bottom: 0 !important;
margin: 0;
padding: 0 $x_margin;
position: fixed;
right: 0;
bottom: 10vh;
> div {
height: 3vh;
}
a {
max-width: calc(25vw - $x_margin * 2);
}
}
}
.file_fixed span:last-of-type {
@@ -76,7 +91,154 @@
}
}
.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;
@@ -90,6 +252,19 @@
.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
web/themes/erabletheme/scss/global/variables/_layout.scss
View File

@@ -9,5 +9,6 @@ $breakpoint_desktop: 1080px;
.layout-container {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 100vh;
}

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

@@ -59,21 +59,19 @@
@include fluo_button();
a {
display: inline-block;
max-width: calc(25vw - $x_margin * 2);
}
@media (min-width: $breakpoint_tablet) {
padding: 0;
}
@media (min-width: $breakpoint_desktop) {
margin-bottom: 0 !important;
margin: 0;
padding: 0 $x_margin;
position: fixed;
right: 0;
bottom: 10vh;
> div {
height: 3vh;
}
a {
max-width: calc(25vw - $x_margin * 2);
}
}
}
.file_fixed span:last-of-type {