_includes/layouts/base.njk

@@ -2,7 +2,7 @@
 layout: layouts/parent.njk
 ---
 <div id="core">
-  <main id="skip">
+  <main id="skip"  class="visible">
     <div>
       {{ content | safe }}
     </div>
@@ -18,7 +18,7 @@ layout: layouts/parent.njk
     </div>
   {%- endif -%}
 
-  <div class="card">
+  <div class="card" id="sommaire">
     <h2>Sommaire</h2>
     {{ content | toc | safe }}
   </div>

_includes/layouts/home.njk

@@ -2,7 +2,7 @@
 layout: layouts/parent.njk
 ---
 <div id="core">
-  <main id="skip">
+  <main id="skip"  class="visible">
     <div>
       {{ content | safe }}
     </div>
@@ -18,7 +18,7 @@ layout: layouts/parent.njk
     </div>
   {%- endif -%}
 
-  <div class="card">
+  <div class="card" id="sommaire">
     <h2>Sommaire</h2>
     {{ content | toc | safe }}
   </div>

_includes/layouts/parent.njk

@@ -27,19 +27,6 @@
 		  <h1>
 			  <a href="/" class="home-link"><img src="/img/logo-small.png" alt=""><span class="visually-hidden">{{ metadata.title }}</span></a>
 			</h1>
-
-			<nav>
-				<h2 class="visually-hidden">Top level navigation menu</h2>
-				<ul class="nav">
-				  <li class="nav-item"><a href="/">Accueil</a></li>
-				  <li class="nav-item"><a href="/about/">À propos</a></li>
-					<li class="nav-item"><a href="/tl-dr/">TL; DR</a></li>
-				</ul>
-				<ul class="nav">
-					<li class="nav-item"><a href="/fiches/">Fiches téléchargeables</a></li>
-				  <li class="nav-item"><a href="https://git.kobold.cafe/univers/erratum">Code Source</a></li>
-				</ul>
-			</nav>
 		</header>
 		<div class="wrapper">
 		  <nav id="sidebar">
@@ -56,6 +43,9 @@
 
 		<!-- 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>
+
 		<script>
 			const myTable = document.querySelector("#dataTable table");
 

public/css/index.css

@@ -94,8 +94,10 @@ header h1 a {
 
 h1 img {
   display:block;
-  height:128px;
+  max-height:128px;
+  max-width: 100%;
   width:auto;
+  height:auto;
   margin:auto 0;
 }
 
@@ -294,4 +296,85 @@ th {
 
 tr:nth-child(even) td {
   background-color: rgba(255, 255, 255, 0.03);
-}
+}
+
+p > img:only-child {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+.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');
+    });
+});