CSS > mobile (round 3)

assets/css/src/_mobile.scss

@@ -1,10 +1,12 @@
 @media screen and (max-width: 1000px) {
-  * {
+  :root {
     --slider-height: 50vh;
+    --font-size-XL: 12.5vw;
+    --font-size-L: 1.5rem;
+    --font-size-S: 0.75rem;
   }
 
   body {
-    background-color: red;
   }
 
   .project-slideshow {
@@ -26,7 +28,7 @@
     line-break: strict;
     left: -0.65vw;
     position: relative;
-    top: -0.7vw;
+    top: var(--main-title-top);
     margin-top: var(--body-margin);
     line-height: 0.75;
   }
@@ -34,11 +36,12 @@
   .project-index :has(.selected) {
   }
 
-  .fix {
-    display: block;
+  .project-toggler.grid {
+    grid-template-columns: 2fr 2fr 1fr;
+    width: 100%;
   }
 
-  .project-toggler.grid {
+  .fix {
     display: block;
   }
 
@@ -48,31 +51,93 @@
     bottom: 0;
     overflow: auto;
     width: calc(100% - var(--body-margin));
+    padding-top: var(--font-size-XL);
   }
 
   main:has(ul li.selected) {
     top: var(--slider-height);
+    padding-top: 0;
   }
 
   nav.filter-menu {
-    position: absolute;
+    position: sticky;
     top: 0;
-    margin-top: calc(var(--line-height-S) * 2);
+    padding-top: var(--line-height-S);
+    margin: 0;
+    width: 100%;
+  }
+
+  nav.filter-menu:has(+ ul li.selected) {
   }
 
   ul.projects-index {
-    top: calc(var(--line-height-S) * 5);
+    padding-top: var(--line-height-S);
     position: absolute;
+    width: calc(100vw - (var(--body-margin) * 3));
+    overflow: auto;
+    padding-bottom: var(--font-size-XL);
+  }
+
+  .selected .fix:hover + .toggle {
+    display: block;
   }
 
   .fix:hover + .toggle {
     display: none;
   }
 
+  .selected .fix:hover .slide-number {
+    display: block;
+  }
+
   .slide-number {
     position: fixed;
     top: var(--slider-height);
     margin-top: calc(-2 * (var(--line-height-S)));
     right: var(--body-margin);
   }
+
+  .main-menu {
+    display: none;
+  }
+
+  .mobile-menu {
+    display: flex;
+  }
+
+  .close-mobile-menu {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    left: 0;
+    font-size: var(--font-size-XL);
+    display: flex;
+    justify-content: center;
+  }
+
+  header:hover ~ main {
+    opacity: 1;
+    transition-duration: 0;
+  }
+
+  .main-title:hover {
+    opacity: 1;
+    transition-duration: 0;
+  }
+
+  .main-title:has(+ nav:hover) {
+    opacity: 1;
+    transition-duration: 0;
+  }
+
+  #home-slideshow img:not(.slide.active img) {
+    display: none;
+  }
+}
+
+@media (max-width: 687px) {
+  [data-template="infos"] div {
+    padding-right: var(--body-margin);
+    width: calc(100% - var(--body-margin));
+  }
 }