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

ajout des images d'ornement

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
web/themes/erabletheme/assets/formes/forme_1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
web/themes/erabletheme/assets/formes/forme_2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 283 KiB

BIN
web/themes/erabletheme/assets/formes/forme_3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 252 KiB

BIN
web/themes/erabletheme/assets/formes/forme_4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
web/themes/erabletheme/assets/formes/forme_5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 184 KiB

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

@ -35,6 +35,7 @@
.layout-container {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 100vh;
}
@ -668,18 +669,11 @@ a {
}
.actu_full .liens_fixed > div > div:nth-of-type(2) a, .actu_full .file_fixed > div > div > div a {
display: inline-block;
max-width: 19vw;
}
@media (min-width: 760px) {
.actu_full .liens_fixed > div > div:nth-of-type(2), .actu_full .file_fixed > div > div > div {
padding: 0;
}
}
@media (min-width: 1080px) {
.actu_full .liens_fixed > div > div:nth-of-type(2), .actu_full .file_fixed > div > div > div {
margin-bottom: 0 !important;
margin: 0;
padding: 0 3vw;
position: fixed;
right: 0;
bottom: 10vh;
@ -687,6 +681,9 @@ a {
.actu_full .liens_fixed > div > div:nth-of-type(2) > div, .actu_full .file_fixed > div > div > div > div {
height: 3vh;
}
.actu_full .liens_fixed > div > div:nth-of-type(2) a, .actu_full .file_fixed > div > div > div a {
max-width: 19vw;
}
}
.actu_full .file_fixed span:last-of-type {
display: none;
@ -914,6 +911,7 @@ a {
margin-top: -3vh;
padding-top: 3vh;
background: linear-gradient(to bottom, #fcf9ee 80%, white 100%);
position: relative;
}
.fullpage > h2 {
font-family: "Barlow", sans-serif;
@ -921,23 +919,43 @@ a {
padding: 0 3vw;
margin-top: 1rem;
color: #038788;
padding-top: 5vh;
margin-top: 5vh;
margin-bottom: 7vh;
background-color: #fcf9ee;
z-index: 1;
position: relative;
width: auto;
display: inline-block;
}
.fullpage > h2 a {
color: #038788;
}
@media (min-width: 760px) {
.fullpage > h2 {
background-color: unset;
}
}
.fullpage .fullpage_content > h2 {
font-family: "Barlow", sans-serif;
font-size: 2.3rem;
padding: 0 3vw;
margin-top: 1rem;
color: #038788;
padding-top: 5vh;
margin-top: 5vh;
background-color: #fcf9ee;
z-index: 1;
position: relative;
width: auto;
display: inline-block;
}
.fullpage .fullpage_content > h2 a {
color: #038788;
}
@media (min-width: 760px) {
.fullpage .fullpage_content > h2 {
background-color: unset;
}
}
.fullpage .fullpage_content .sous_titre {
font-family: "Marianne", sans-serif;
font-size: 1rem;
@ -979,18 +997,11 @@ a {
}
.fullpage .fullpage_content .liens_fixed > div > div a, .fullpage .fullpage_content .file_fixed > div > div a {
display: inline-block;
max-width: 19vw;
}
@media (min-width: 760px) {
.fullpage .fullpage_content .liens_fixed > div > div, .fullpage .fullpage_content .file_fixed > div > div {
padding: 0;
}
}
@media (min-width: 1080px) {
.fullpage .fullpage_content .liens_fixed > div > div, .fullpage .fullpage_content .file_fixed > div > div {
margin-bottom: 0 !important;
margin: 0;
padding: 0 3vw;
position: fixed;
right: 0;
bottom: 10vh;
@ -998,6 +1009,9 @@ a {
.fullpage .fullpage_content .liens_fixed > div > div > div, .fullpage .fullpage_content .file_fixed > div > div > div {
height: 3vh;
}
.fullpage .fullpage_content .liens_fixed > div > div a, .fullpage .fullpage_content .file_fixed > div > div a {
max-width: 19vw;
}
}
.fullpage .fullpage_content .file_fixed span:last-of-type {
display: none;
@ -1020,6 +1034,158 @@ 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;
@ -1035,6 +1201,16 @@ a {
.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 {

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

File diff suppressed because one or more lines are too long

34
web/themes/erabletheme/js/erabletheme.js
View File

@ -28,6 +28,7 @@
const menu = hamburgerBtn.nextElementSibling;
const menuItems = menu.children;
const opacityDelay = 50;
let inTransition = false;
function toggleMenuItems(action) {
let delay = opacityDelay;
@ -46,32 +47,41 @@
// Toggle menu visibility on hamburger click
hamburgerBtn.addEventListener("click", function(event) {
event.stopPropagation();
hamburgerIcon.classList.toggle('open');
if(menu.classList.contains('active')) {
if (!inTransition) {
inTransition = true;
hamburgerIcon.classList.toggle('open');
if(menu.classList.contains('active')) {
setTimeout(() => {
menu.style.display = "none";
}, 700);
toggleMenuItems('hide');
} else {
menu.style.display = "flex";
toggleMenuItems('show');
}
setTimeout(() => {
menu.style.display = "none";
menu.classList.toggle("active");
}, 1);
setTimeout(() => {
inTransition = false;
}, 700);
toggleMenuItems('hide');
} else {
menu.style.display = "flex";
toggleMenuItems('show');
}
setTimeout(() => {
menu.classList.toggle("active");
}, 1);
});
// Close menu when clicking outside of the menu
document.addEventListener("click", function(event) {
const isHamburgerClicked = event.target === hamburgerBtn;
const isMenuClicked = event.target === menu || event.target.parentElement === menu;
if (!isMenuClicked && !isHamburgerClicked) {
if (!isMenuClicked && !isHamburgerClicked && !inTransition) {
inTransition = true;
hamburgerIcon.classList.remove('open');
menu.classList.remove("active");
toggleMenuItems('hide');
setTimeout(() => {
menu.style.display = "none";
inTransition = false;
}, 700);
}
});

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 {

13
web/themes/erabletheme/templates/node/node--actualite--full.html.twig
View File

@ -68,7 +68,20 @@
* @ingroup themeable
*/
#}
<div class="ornements_top_under">
<div></div>
<div></div>
</div>
<article{{ attributes }} class="actu_full fullpage">
<div class="ornements_top_over">
<div></div>
<div></div>
<div></div>
</div>
<div class="ornements_bottom_over">
<div></div>
<div></div>
</div>
<div class="retour_actus">
← Retour aux actualités

14
web/themes/erabletheme/templates/node/node--content-global.html.twig
View File

@ -68,7 +68,21 @@
* @ingroup themeable
*/
#}
<div class="ornements_top_under">
<div></div>
<div></div>
</div>
<article class="fullpage">
<div class="ornements_top_over">
<div></div>
<div></div>
<div></div>
</div>
<div class="ornements_bottom_over">
<div></div>
<div></div>
</div>
<div class="fullpage_content">

14
web/themes/erabletheme/templates/views-view--content-gouvernance.html.twig
View File

@ -38,7 +38,21 @@
]
%}
<div{{ attributes.addClass(classes) }}>
<div class="ornements_top_under">
<div></div>
<div></div>
</div>
<div class="content_gouvernance fullpage">
<div class="ornements_top_over">
<div></div>
<div></div>
<div></div>
</div>
<div class="ornements_bottom_over">
<div></div>
<div></div>
</div>
<h2>
{{ view_array['#title']['#markup'] }}
</h2>

14
web/themes/erabletheme/templates/views-view--content-partenaires.html.twig
View File

@ -38,7 +38,21 @@
]
%}
<div{{ attributes.addClass(classes) }}>
<div class="ornements_top_under">
<div></div>
<div></div>
</div>
<div class="content_partenaires fullpage">
<div class="ornements_top_over">
<div></div>
<div></div>
<div></div>
</div>
<div class="ornements_bottom_over">
<div></div>
<div></div>
</div>
<h2>
{{ view_array['#title']['#markup'] }}
</h2>

13
web/themes/erabletheme/templates/views-view--page-actus.html.twig
View File

@ -37,7 +37,20 @@
dom_id ? 'js-view-dom-id-' ~ dom_id,
]
%}
<div class="ornements_top_under">
<div></div>
<div></div>
</div>
<div{{ attributes.addClass(classes).addClass('fullpage', 'actus') }}>
<div class="ornements_top_over">
<div></div>
<div></div>
<div></div>
</div>
<div class="ornements_bottom_over">
<div></div>
<div></div>
</div>
<h2>
{{ view_array['#title']['#markup'] }}
</h2>