Project-closer (en cours)

assets/css/src/_main.scss

@@ -146,6 +146,18 @@ nav {
   }
 }
 
+.mix-blend-bg {
+  display: block;
+  position: fixed;
+  height: 100%;
+  background-color: white;
+  top: var(--body-margin);
+  right: var(--body-margin);
+  bottom: var(--body-margin);
+  left: calc(var(--index-width) + var(--body-margin));
+  z-index: -1;
+}
+
 button.prev {
   position: absolute;
   top: 0;

assets/css/src/_mobile.scss

@@ -143,6 +143,14 @@
   .selected .toggle {
     display: block;
   }
+
+  .mix-blend-bg {
+    inset: 0;
+    background-color: white;
+    width: auto;
+    z-index: -1;
+    height: var(--slider-height);
+  }
 }
 
 @media (max-width: 687px) {

assets/css/style.css

@@ -141,6 +141,18 @@ nav.filter-menu button.active {
   display: contents;
 }
 
+.mix-blend-bg {
+  display: block;
+  position: fixed;
+  height: 100%;
+  background-color: white;
+  top: var(--body-margin);
+  right: var(--body-margin);
+  bottom: var(--body-margin);
+  left: calc(var(--index-width) + var(--body-margin));
+  z-index: -1;
+}
+
 button.prev {
   position: absolute;
   top: 0;
@@ -712,6 +724,13 @@ dialog#mobile-menu-content::backdrop {
   .selected .toggle {
     display: block;
   }
+  .mix-blend-bg {
+    inset: 0;
+    background-color: white;
+    width: auto;
+    z-index: -1;
+    height: var(--slider-height);
+  }
 }
 @media (max-width: 687px) {
   [data-template=infos] div {

site/templates/index.php

@@ -18,6 +18,7 @@
             </div>
             <section class="toggle">
                 <div class="project-slideshow">
+                    <button class="mix-blend-bg all-projects-closer"></button>
                     <?php foreach ($project->images() as $image): ?>
                         <?php snippet('picture', [
                             'file'       => $image,