ajout des images d'ornement

web/themes/erabletheme/css/styles.css

@@ -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 {

web/themes/erabletheme/js/erabletheme.js

@@ -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,6 +47,8 @@
       // Toggle menu visibility on hamburger click
       hamburgerBtn.addEventListener("click", function(event) {
         event.stopPropagation();
+        if (!inTransition) {
+          inTransition = true;
           hamburgerIcon.classList.toggle('open');
           if(menu.classList.contains('active')) {
             setTimeout(() => {
@@ -59,6 +62,11 @@
           setTimeout(() => {
             menu.classList.toggle("active");
           }, 1);
+          setTimeout(() => {
+            inTransition = false;
+          }, 700);
+        }
+
 
       });
     
@@ -66,12 +74,14 @@
       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);
         }
       });

web/themes/erabletheme/scss/_fullpage.scss

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

web/themes/erabletheme/scss/global/variables/_layout.scss

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

web/themes/erabletheme/scss/partials/_articles.scss

@@ -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 {

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

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

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

@@ -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">
 

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

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

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

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

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

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