CSS > mobile (round 3)

assets/css/src/_global.scss

@@ -1,3 +0,0 @@
-button {
-  background-color: transparent;
-}

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%;
 }

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 {
+  .project-toggler.grid {
-    display: block;
+    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));
+  }
 }

assets/css/src/_nav.scss

@@ -37,7 +37,7 @@ nav li a {
   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;
 }
@@ -48,11 +48,14 @@ nav li a {
   /* background-color: yellow; */
 }
 
+.title-nav-mobile {
+  display: none;
+}
+
 .main-title {
   z-index: 2;
   font-size: var(--font-size-S);
   top: var(--body-margin);
-  transition-duration: var(--disparition-duration);
   cursor: pointer;
   width: fit-content;
   position: fixed;
@@ -83,13 +86,18 @@ header:hover ~ main {
   transition-duration: var(--apparition-duration);
 }
 
+main {
+  transition-duration: var(--disparition-duration);
+  transition-property: opacity;
+}
+
 .main-title:hover {
-  opacity: var(--low-opacity);
+  opacity: 0;
   transition-duration: var(--apparition-duration);
 }
 
 .main-title:has(+ nav:hover) {
-  opacity: var(--low-opacity);
+  opacity: 0;
   transition-duration: var(--apparition-duration);
 }
 
@@ -119,7 +127,7 @@ nav.main-menu:hover {
   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;
 }
@@ -128,6 +136,61 @@ nav.main-menu:hover {
   color: transparent;
 }
 
-[data-template="home"] .main-title span {
+[data-template="home"] header {
-  color: var(--text-color);
+  mix-blend-mode: difference;
+}
+
+[data-template="home"] .main-title span {
+  color: white;
+}
+
+@media (min-width: 1500px) {
+  :root {
+    --main-title-top: -0.4vw;
+  }
+}
+
+/* MOBILE-MENU */
+
+.mobile-menu {
+  display: none;
+  position: fixed;
+  bottom: var(--body-margin);
+  width: 100%;
+  left: 0;
+  box-sizing: border-box;
+  justify-content: center;
+}
+
+.mobile-menu button {
+  pointer-events: all;
+}
+
+.mobile-menu button:has(+ dialog:open) {
+  display: none;
+}
+
+dialog#mobile-menu-content:open {
+  padding: 0;
+  border: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: visible;
+}
+
+dialog#mobile-menu-content::backdrop {
+  background-color: var(--bg-color);
+  opacity: calc(1 - var(--low-opacity));
+}
+
+#mobile-menu-content ul {
+  margin-top: 0;
+  display: flex;
+  text-align: center;
+}
+
+#mobile-menu-content .title-nav {
+  position: fixed;
+  padding: var(--body-margin);
 }

assets/css/src/_reset.scss

@@ -5,4 +5,5 @@ button {
   text-align: inherit;
   font: inherit;
   cursor: pointer;
+  background-color: transparent;
 }

assets/css/style.css

@@ -6,6 +6,7 @@ button {
   text-align: inherit;
   font: inherit;
   cursor: pointer;
+  background-color: transparent;
 }
 
 @font-face {
@@ -31,6 +32,7 @@ button {
   --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;
@@ -40,6 +42,7 @@ button {
   --half-screen: 50vw;
   --index-width: 40rem;
   --close-cursor: url(/assets/images/close-cursor.png), crosshair;
+  --main-title-top: -0.7vw;
 }
 
 body {
@@ -68,10 +71,10 @@ h1 {
 }
 
 p {
-  /*! padding: var(--margin-S); */
   box-sizing: border-box;
   margin: 0;
-  width: 50rem;
+  width: -moz-fit-content;
+  width: fit-content;
   max-width: 100%;
 }
 
@@ -98,12 +101,15 @@ 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));
+  -moz-column-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));
 }
 nav.filter-menu a {
   text-decoration: none;
@@ -173,7 +179,6 @@ button.next {
 
 .toggle {
   display: none;
-  /*! margin-bottom: var(--line-height-S); */
 }
 
 .fix:hover + .toggle {
@@ -208,13 +213,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 {
@@ -250,6 +258,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 {
@@ -294,6 +307,19 @@ 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%;
 }
 
 nav.main-menu {
@@ -335,7 +361,7 @@ nav li a {
   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;
 }
@@ -346,11 +372,14 @@ nav li a {
   /* background-color: yellow; */
 }
 
+.title-nav-mobile {
+  display: none;
+}
+
 .main-title {
   z-index: 2;
   font-size: var(--font-size-S);
   top: var(--body-margin);
-  transition-duration: var(--disparition-duration);
   cursor: pointer;
   width: -moz-fit-content;
   width: fit-content;
@@ -382,13 +411,18 @@ header:hover ~ main {
   transition-duration: var(--apparition-duration);
 }
 
+main {
+  transition-duration: var(--disparition-duration);
+  transition-property: opacity;
+}
+
 .main-title:hover {
-  opacity: var(--low-opacity);
+  opacity: 0;
   transition-duration: var(--apparition-duration);
 }
 
 .main-title:has(+ nav:hover) {
-  opacity: var(--low-opacity);
+  opacity: 0;
   transition-duration: var(--apparition-duration);
 }
 
@@ -417,7 +451,7 @@ nav.main-menu:hover {
   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;
 }
@@ -426,8 +460,61 @@ nav.main-menu:hover {
   color: transparent;
 }
 
+[data-template=home] header {
+  mix-blend-mode: difference;
+}
+
 [data-template=home] .main-title span {
-  color: var(--text-color);
+  color: white;
+}
+
+@media (min-width: 1500px) {
+  :root {
+    --main-title-top: -0.4vw;
+  }
+}
+/* MOBILE-MENU */
+.mobile-menu {
+  display: none;
+  position: fixed;
+  bottom: var(--body-margin);
+  width: 100%;
+  left: 0;
+  box-sizing: border-box;
+  justify-content: center;
+}
+
+.mobile-menu button {
+  pointer-events: all;
+}
+
+.mobile-menu button:has(+ dialog:open) {
+  display: none;
+}
+
+dialog#mobile-menu-content:open {
+  padding: 0;
+  border: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: visible;
+}
+
+dialog#mobile-menu-content::backdrop {
+  background-color: var(--bg-color);
+  opacity: calc(1 - var(--low-opacity));
+}
+
+#mobile-menu-content ul {
+  margin-top: 0;
+  display: flex;
+  text-align: center;
+}
+
+#mobile-menu-content .title-nav {
+  position: fixed;
+  padding: var(--body-margin);
 }
 
 #home-slideshow {
@@ -483,11 +570,11 @@ nav.main-menu:hover {
 }
 
 @media screen and (max-width: 1000px) {
-  * {
+  :root {
     --slider-height: 50vh;
-  }
+    --font-size-XL: 12.5vw;
-  body {
+    --font-size-L: 1.5rem;
-    background-color: red;
+    --font-size-S: 0.75rem;
   }
   .project-slideshow {
     position: fixed;
@@ -508,14 +595,15 @@ nav.main-menu:hover {
     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;
   }
-  .fix {
-    display: block;
-  }
   .project-toggler.grid {
+    grid-template-columns: 2fr 2fr 1fr;
+    width: 100%;
+  }
+  .fix {
     display: block;
   }
   main {
@@ -524,26 +612,75 @@ nav.main-menu:hover {
     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%;
   }
   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));
+  }
 }/*# sourceMappingURL=style.css.map */

site/snippets/nav.php

@@ -7,11 +7,6 @@
             <span>Hic&nbsp;et&nbsp;Nunc&nbsp;Studio</span>
         </a>
     </h1>
-    <h1 class="title-nav-mobile">
-        <a href="">
-            <span>menu</span>
-        </a>
-    </h1>
     <ul>
         <li>
             <a class="nav-item-home" href="<?= page('home')->url() ?>"><?= page('home')->title() ?></a>,&nbsp;
@@ -23,4 +18,36 @@
             <a class="nav-item-about" href="<?= page('infos')->url() ?>"><?= page('infos')->title() ?></a>
         </li>
     </ul>
+</nav>
+
+<nav class="mobile-menu">
+
+    <button command="show-modal" commandfor="mobile-menu-content">
+        <h1 class="title-nav">
+                <span>Menu</span>
+        </h1>
+    </button>
+
+    <dialog id="mobile-menu-content" closedby="any">
+        <h1 class="title-nav">
+            <a href="<?= page('home')->url() ?>">
+                <span>Hic&nbsp;et&nbsp;Nunc&nbsp;Studio</span>
+            </a>
+        </h1>
+        <ul>
+            <li>
+                <a class="nav-item-home" href="<?= page('home')->url() ?>"><?= page('home')->title() ?></a>,&nbsp;
+            </li>
+            <li>
+                <a class="nav-item-projects" href="<?= page('index')->url() ?>"><?= page('index')->title() ?></a>,&nbsp;
+            </li>
+            <li>
+                <a class="nav-item-about" href="<?= page('infos')->url() ?>"><?= page('infos')->title() ?></a>
+            </li>
+        </ul>
+        <button commandfor="mobile-menu-content" command="close" class="close-mobile-menu">
+            Fermer
+        </button>
+    </dialog>
+
 </nav>

site/templates/infos.php

@@ -1,24 +1,20 @@
 <?php snippet('header') ?>
 
-<div class="main-infos">
+<section class="main-infos">
     <p>
-        <?= $page->presentation() ?>
+        <?= $page->presentation() ?>     
-        <br>
-        <?= $page->contact() ?>
     </p>
-</div>
+</section>
-
+<section class="secondary-infos">
-<div class="skills">
+    <div class="skills">
-    <p>
+        <p>
-        <?= $page->skills() ?>
+              <?= $page->contact() ?><br>
-    </p>
+            <?= $page->skills() ?>
-</div>
+        </p>
-
+    </div>
-<div class="clients">
+    <div class="clients">
-    <p class="clients">
+            <?= $page->clients() ?>
-        <?= $page->clients() ?>
+    </div>
-    </p>
+</section>
-</div>
-
 
 <?php snippet('footer') ?>