CSS > mobile (round 3)

assets/css/src/_main.scss

@@ -37,6 +37,7 @@
   --font-size-XL: 11vw;
   --line-height-S: var(--font-size-S);
   --text-color: black;
+  --bg-color: white;
   --body-margin: 0.6rem;
   --nav-margin: 1rem;
   --apparition-duration: 0.3s;
@@ -46,6 +47,7 @@
   --half-screen: 50vw;
   --index-width: 40rem;
   --close-cursor: url(/assets/images/close-cursor.png), crosshair;
+  --main-title-top: -0.7vw;
 }
 
 body {
@@ -74,10 +76,9 @@ h1 {
 }
 
 p {
-  /*! padding: var(--margin-S); */
   box-sizing: border-box;
   margin: 0;
-  width: 50rem;
+  width: fit-content;
   max-width: 100%;
 }
 
@@ -105,12 +106,14 @@ ul {
 nav {
   &.filter-menu {
     display: flex;
+    flex-wrap: wrap;
     opacity: 1;
     position: relative;
     font-size: var(--font-size-L);
     pointer-events: all;
-    gap: calc(2 * var(--body-margin));
+    column-gap: calc(2 * var(--body-margin));
     margin: calc(4 * var(--line-height-S)) 0 var(--line-height-S) 0;
+    width: calc(var(--index-width) - var(--body-margin));
 
     a {
       text-decoration: none;
@@ -183,7 +186,6 @@ button.next {
 
 .toggle {
   display: none;
-  /*! margin-bottom: var(--line-height-S); */
 }
 
 .fix:hover + .toggle {
@@ -218,13 +220,16 @@ button.next {
   opacity: 1;
 }
 
+.projects-index:has(li:hover) li:not(:hover) {
+  opacity: var(--low-opacity);
+}
+
 .unselected:hover .toggle {
   display: none;
 }
 
 .unselected:hover .slide-number {
   display: none;
-  color: red;
 }
 
 .selected {
@@ -266,6 +271,11 @@ button.next {
   gap: var(--body-margin);
   pointer-events: all;
   padding-bottom: var(--line-height-S);
+  cursor: inherit;
+}
+
+.project-toggler span {
+  cursor: pointer;
 }
 
 .project-description {
@@ -311,4 +321,17 @@ button.next {
 [data-template="infos"] main {
   position: absolute;
   top: calc(var(--line-height-S) + 0.35rem);
+  display: flex;
+  flex-wrap: wrap;
+  bottom: auto;
+  padding-bottom: var(--font-size-XL);
+}
+
+[data-template="infos"] .main-infos {
+  max-width: 100%;
+  width: 660px;
+}
+
+[data-template="infos"] .secondary-infos {
+  max-width: 100%;
 }