index page projets

web/themes/erabletheme/scss/_fullpage.scss

@@ -1,21 +1,17 @@
 .fullpage {
     margin-bottom: 10vh;
-    margin-top: -3vh;
     padding-top: 3vh;
-    @include beige_gradient();
+    padding-bottom: 3vh;
+    background-color: white;
     position: relative;
-    > h2 {
-      margin-top: 5vh;
+    h2 {
+      margin-top: 5vh !important;
       margin-bottom: 7vh;
-      background-color: $beige;
       z-index: 1;
       position: relative;
       width: auto;
       display: inline-block;
       @include main_title();
-      @media (min-width: $breakpoint_tablet) {
-          background-color: unset;
-      }
     }
 
     .legende {
@@ -26,17 +22,7 @@
 
     .fullpage_content {
         > h2 {
-          margin-top: 5vh;
           margin-bottom: 1rem;
-          background-color: $beige;
-          z-index: 1;
-          position: relative;
-          width: auto;
-          display: inline-block;
-          @include main_title();
-          @media (min-width: $breakpoint_tablet) {
-              background-color: unset;
-          }
         }
 
         .sous_titre {
@@ -82,7 +68,6 @@
           display: none;
         }
 
-
         h3, h4, h5, h6 {
           margin-bottom: 1rem;
           padding-left: $x_margin;
@@ -94,14 +79,15 @@
         margin-bottom: 8vh;
     }
     @media (min-width: $breakpoint_tablet) {
-        margin-top: 2vh;
-        padding-top: 0;
-        width: 75vw;
-        margin-left: 12.5vw;
+      margin-top: 5vh;
+      padding-top: 0;
+      width: 75vw;
+      margin-left: 12.5vw;
     }
     @media (min-width: $breakpoint_desktop) {
-        width: 50%;
-        margin-left: 25%;
+      margin-top: 13vh;
+      width: 50vw;
+      margin-left: 25%;
     }
 
     &.large-container {
@@ -112,3 +98,91 @@
       }
     }
 }
+
+main:has(#block-erabletheme-leprogramme-2) {
+  .fullpage {
+    @media (min-width: $breakpoint_tablet) {
+      width: 70vw;
+      margin-left: 2vw;
+    }
+    @media (min-width: $breakpoint_desktop) {
+      width: 50vw;
+      margin-left: 3vw;
+      margin-right: 24vw;
+    }
+  }
+}
+
+aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) {
+  height: auto;
+  margin-top: 2vh;
+  margin-bottom: 2vh;
+  @media screen and (min-width: $breakpoint_tablet) {
+    margin-top: 5vh;
+    margin-bottom: 0;
+  }
+  @media screen and (min-width: $breakpoint_desktop) {
+    margin-top: 13vh;
+  }
+  > div {
+    width: auto;
+    display: inline-block;
+    @media screen and (min-width: $breakpoint_tablet) {
+      position: sticky;
+      top: 5vh;
+      width: 27vw;
+    }
+    @media screen and (min-width: $breakpoint_desktop) {
+      top: 12vh;
+      width: 22vw;
+    }
+    #block-erabletheme-leprogramme-2 {
+      padding: 1.5rem;
+      background-color: white;
+      margin-left: 2vw;
+      > h2 {
+        padding-bottom: 1rem;
+        border-bottom: solid 1px $teal;
+        display: flex;
+        justify-content: space-between;
+        cursor: pointer;
+        > span {
+          @include sous_titre();
+        }
+        > div {
+          mask-image: url('/themes/erabletheme/assets/icons/arrow-down-s-line.svg');
+          background-size: contain;
+          background-color: $teal;
+          width: 1.3rem;
+          height: 1.3rem;
+          color: $teal;
+          transform: rotate(0deg);
+          transition: transform 0.3s ease;
+          &.closed {
+            transform: rotate(180deg);
+          }
+        }
+      }
+      > ul {
+        max-height: 100vh;
+        overflow: hidden;
+        transition: max-height 0.6s ease;
+        > li {
+          margin: 1rem 0;
+          @include main_text_content();
+          > a {
+            color: black;
+            font-size: $m_font_size;
+            &:hover,
+            &.is-active {
+              font-weight: 800;
+            }
+          }
+        }
+        &.closed {
+          max-height: 0vh;
+        }
+      }
+    }
+  }
+}