feat: version mobile

_includes/layouts/base-subpages.njk

@@ -1,14 +1,14 @@
 ---
 layout: layouts/parent.njk
 ---
-<main id="skip">
+<main id="skip"  class="visible">
   <div>
     {{ content | safe }}
   </div>
 </main>
 
 <aside id="more-info">
-  <div class="card">
+  <div class="card" id="sommaire">
     <ol>
       {%- for post in collections.all | sort(false, true, "data.eleventySubNavigation.order") -%}
         {%- if post.data.eleventyNavigation.key == eleventySubNavigation.parent -%}

_includes/layouts/base-toppages.njk

@@ -1,14 +1,14 @@
 ---
 layout: layouts/parent.njk
 ---
-<main id="skip">
+<main id="skip"  class="visible">
   <div>
     {{ content | safe }}
   </div>
 </main>
 
 <aside id="more-info">
-  <div class="card">
+  <div class="card" id="sommaire">
     <h2>Sommaire</h2>
     {{ content | toc | safe }}
   </div>

_includes/layouts/base.njk

@@ -1,14 +1,14 @@
 ---
 layout: layouts/parent.njk
 ---
-<main id="skip">
+<main id="skip" class="visible">
   <div>
     {{ content | safe }}
   </div>
 </main>
 
 <aside id="more-info">
-  <div class="card">
+  <div class="card" id="sommaire">
     <h2>Sommaire</h2>
     {{ content | toc | safe }}
   </div>

_includes/layouts/home.njk

@@ -1,7 +1,7 @@
 ---
 layout: layouts/parent.njk
 ---
-<main id="skip">
+<main id="skip" class="visible">
   <div>
     {{ content | safe }}
   </div>

_includes/layouts/parent.njk

@@ -41,5 +41,8 @@
 		<footer><a href="https://fanstuff.garden/"><img src="/img/fanstuffgarden.gif" alt="" /><span class="visually-hidden">Site hébergé par Fanstuff Garden.</span></a>  <a href="https://creativecommons.org/licenses/by-sa/4.0/"><img src="/img/cc-by-sa.png" alt="" /><span class="visually-hidden">Tout le contenu de cette page est sous licence Creatve Common Attribution - Partage à l'identique.</span></a></footer>
 
 		<!-- Current page: {{ page.url | htmlBaseUrl }} -->
+
+		<div class="mobile-buttons"><button id="menu-button">Menu</button><button id="sommaire-button">Sommaire</button></div>
+		<script src="/js/mobile-sidebar.js"></script>
 	</body>
 </html>

public/css/index.css

@@ -36,7 +36,7 @@ body {
 	min-height:100%;
 	font-family: var(--font-family);
 	color: var(--text-color);
-	width:1280px;
+	max-width:1280px;
 }
 html {
 	overflow-y: scroll;
@@ -263,3 +263,78 @@ p img:only-child {
   margin-right: auto;
   text-align: center;
 }
+
+.mobile-buttons {
+  display: none;
+}
+
+@media screen and (max-width: 1000px) { 
+  html {
+    width: 100%;
+  }
+
+  #more-info,
+  #sidebar {
+    width: 100%;
+  }
+
+
+  #more-info:not(.visible),
+  #sidebar:not(.visible),
+  main:not(.visible) {
+    display:none;
+  }
+
+  main {
+    margin:16px;
+  }
+
+  footer {
+    width: 100%;
+    padding:16px;
+    margin-bottom:48px;
+  }
+
+  .mobile-buttons {
+    display: flex;
+    justify-content: space-around;
+    position: fixed;
+    bottom:0;
+    height:48px;
+    width:100%;
+    background-color: white;
+    box-shadow: 0px -1px 2px 0px rgba(0,0,0,0.4);
+  }
+
+  .mobile-buttons button {
+    border: none;
+    background-color: transparent;
+    margin:3px;
+    padding: 8px 24px;
+    border-radius:999px;
+  }
+
+  .mobile-buttons button:hover {
+    background-color: rgba(0,0,0,0.2)!important;
+  }
+
+  .mobile-buttons button.active {
+    background-color: rgba(0,0,0,0.15);
+  }
+}
+
+@media screen and (max-width: 600px) { 
+ 
+  header h1 a {
+    font-size:4rem;
+  }
+
+}
+
+@media screen and (max-width: 480px) { 
+ 
+  header h1 a {
+    font-size:3rem;
+  }
+
+}

public/js/mobile-sidebar.js

@@ -0,0 +1,48 @@
+const sidebar = document.getElementById('sidebar');
+const sommaire = document.getElementById('more-info');
+const main = document.getElementById('skip');
+const btn_menu = document.getElementById('menu-button');
+const btn_sommaire = document.getElementById('sommaire-button');
+
+btn_menu.addEventListener('click', function () {
+    if (sidebar.classList.contains('visible')) {
+        sidebar.classList.remove('visible');
+        sommaire.classList.remove('visible');
+        main.classList.add('visible');
+        btn_menu.classList.remove('active');
+        btn_sommaire.classList.remove('active');
+    } else {
+        sidebar.classList.add('visible');
+        sommaire.classList.remove('visible');
+        main.classList.remove('visible');
+        btn_menu.classList.add('active');
+        btn_sommaire.classList.remove('active');
+    }
+});
+
+btn_sommaire.addEventListener('click', function () {
+    
+    if (sommaire.classList.contains('visible')) {
+        sidebar.classList.remove('visible');
+        sommaire.classList.remove('visible');
+        main.classList.add('visible');
+        btn_menu.classList.remove('active');
+        btn_sommaire.classList.remove('active');
+    } else {
+        sidebar.classList.remove('visible');
+        sommaire.classList.add('visible');
+        main.classList.remove('visible');
+        btn_menu.classList.remove('active');
+        btn_sommaire.classList.add('active');
+    }
+});
+
+document.querySelectorAll('#sommaire a').forEach(function (link) {
+    link.addEventListener('click', function() {
+        sidebar.classList.remove('visible');
+        sommaire.classList.remove('visible');
+        main.classList.add('visible');
+        btn_menu.classList.remove('active');
+        btn_sommaire.classList.remove('active');
+    });
+});