Index > CSS > mobile (round2)

assets/css/src/_mobile.scss

@@ -1,4 +1,8 @@
 @media screen and (max-width: 1000px) {
+  * {
+    --slider-height: 50vh;
+  }
+
   body {
     background-color: red;
   }
@@ -9,7 +13,7 @@
     width: 100vw;
     left: 0;
     margin: 0;
-    height: 50vh;
+    height: var(--slider-height);
   }
   .project-slideshow img {
     width: 100%;
@@ -18,8 +22,13 @@
   }
 
   .main-title {
-    z-index: 2;
-    position: fixed;
+    font-size: var(--font-size-XL);
+    line-break: strict;
+    left: -0.65vw;
+    position: relative;
+    top: -0.7vw;
+    margin-top: var(--body-margin);
+    line-height: 0.75;
   }
 
   .project-index :has(.selected) {
@@ -42,7 +51,7 @@
   }
 
   main:has(ul li.selected) {
-    top: 50vh;
+    top: var(--slider-height);
   }
 
   nav.filter-menu {
@@ -59,4 +68,11 @@
   .fix:hover + .toggle {
     display: none;
   }
+
+  .slide-number {
+    position: fixed;
+    top: var(--slider-height);
+    margin-top: calc(-2 * (var(--line-height-S)));
+    right: var(--body-margin);
+  }
 }