From 580bda4f277710fded1fb1b4aa007619cd7586e3 Mon Sep 17 00:00:00 2001
From: Kazhnuz <kazhnuz@kobold.cafe>
Date: Fri, 6 Sep 2024 14:22:00 +0200
Subject: [PATCH] feat: version mobile

---
 _includes/layouts/base-subpages.njk |  4 +-
 _includes/layouts/base-toppages.njk |  4 +-
 _includes/layouts/base.njk          |  4 +-
 _includes/layouts/home.njk          |  2 +-
 _includes/layouts/parent.njk        |  3 ++
 public/css/index.css                | 77 ++++++++++++++++++++++++++++-
 public/js/mobile-sidebar.js         | 48 ++++++++++++++++++
 7 files changed, 134 insertions(+), 8 deletions(-)
 create mode 100644 public/js/mobile-sidebar.js

diff --git a/_includes/layouts/base-subpages.njk b/_includes/layouts/base-subpages.njk
index 25c5b50..b50c8fe 100644
--- a/_includes/layouts/base-subpages.njk
+++ b/_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 -%}
diff --git a/_includes/layouts/base-toppages.njk b/_includes/layouts/base-toppages.njk
index 9ba8fc7..da13986 100644
--- a/_includes/layouts/base-toppages.njk
+++ b/_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>
diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
index 1f68dc0..e703bdf 100644
--- a/_includes/layouts/base.njk
+++ b/_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>
diff --git a/_includes/layouts/home.njk b/_includes/layouts/home.njk
index b30f7c2..628b2b2 100644
--- a/_includes/layouts/home.njk
+++ b/_includes/layouts/home.njk
@@ -1,7 +1,7 @@
 ---
 layout: layouts/parent.njk
 ---
-<main id="skip">
+<main id="skip" class="visible">
   <div>
     {{ content | safe }}
   </div>
diff --git a/_includes/layouts/parent.njk b/_includes/layouts/parent.njk
index 91598f9..e06b923 100644
--- a/_includes/layouts/parent.njk
+++ b/_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>
diff --git a/public/css/index.css b/public/css/index.css
index 0e9d3b6..6e05e53 100644
--- a/public/css/index.css
+++ b/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;
@@ -262,4 +262,79 @@ p img:only-child {
   margin-left: auto;
   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;
+  }
+
 }
\ No newline at end of file
diff --git a/public/js/mobile-sidebar.js b/public/js/mobile-sidebar.js
new file mode 100644
index 0000000..aa9a1ea
--- /dev/null
+++ b/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');
+    });
+});
\ No newline at end of file