fix: responsive css & iframe

_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>

content/about.md

@@ -28,6 +28,7 @@ L'idée de ce site est donc d'être un site permettant de trouver des infos pour
 - En français, pour les personnes ne lisant pas l'anglais
 - Subjectif mais sans le cacher, sans tenter de fausse objectivité
 - Gardant les informations et les contenus de certains vieux sites non-maintenus
+- Référançant les autres sites et contenus en français quand pertinent.
 
 
 ## Y'a quoi ?

content/univers/chronology/index.md

@@ -30,8 +30,11 @@ Il y aura sans doute une division à un moment des jeux se produisant à partir
 
 ## Sonic Chronicles
 
-Sonic Chronicles a été *explicitement indiqué comme n'étant pas canon* par la Sonic Team à plusieurs reprise. Cependant, à l'heure actuelle rien dans Sonic Chronicles ne contredit réellement les jeux précédants.
+Sonic Chronicles n'est pas inclu dans cette chronologie, parce qu'il est l'un des rares jeux que la Sonic Team a déclaré non-canon. Cependant, il n'y a pas encore de (trop) grosse contradiction entre Sonic Chronicles et les jeux précédant.
 
-Les plus grosses différences étant le fait que Chronicles traite les Gizoids comme une série de robot là ou dans Battle Gizoid était un robot unique, et que maintenant l'idée d'échidnés comme étant une civilisation technologie est devenu bien moins importante avec la découverte que les technologies d'Angel Island semblent plus venir des anciens.
+Il reste cependant deux différences qui ont de l'impact selon moi :
 
-Si vous voulez voir Sonic Chronicles comme canon, vous pouvez voir le jeu comme se passant continuellement deux ans dans le futur du jeu Sonic le plus récent.
+- La première est que les technologies d'Angel Island étaient plus ou moins insinuée d'être liées aux Nocturnus dans Sonic Chronicles, là où elles sont maintenant insinuées d'être liées aux Anciens.
+- Chronicles traite les Gizoids comme une série de robots là où dans Battle Gizoid était un robot unique
+
+Si vous voulez voir Sonic Chronicles comme étant canon, vous pouvez positionner le jeu continuellement deux ans dans le futur du jeu Sonic le plus récent.

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;
@@ -257,3 +257,91 @@ iframe {
   border: none;
 }
 
+p img:only-child {
+  display:block;
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+  max-width: 100%;
+}
+
+.mobile-buttons {
+  display: none;
+}
+
+.youtube-video {
+  aspect-ratio: 16 / 9;
+  width: 100%;
+}
+
+
+@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');
+    });
+});