📱 Finalisation responsives

Fixes #283
Fixes #282

CHANGELOG.md

@@ -11,6 +11,7 @@ Une version intermédiaire, pour préparer le portage d'Erratum sous Pélican.
 
 ### Corrigé
 
+- [ui] Le site est désormais entièrement responsive !
 - [personnages] Retour de la personnalité Bourrin qui avait été oubliée
 
 ### Ajouté

_includes/layouts/layout.njk

@@ -35,7 +35,7 @@
 		<div class="wrapper">
 			{% if home == true %}
 				<hgroup>
-					<h1><img src="/img/logo.gif" alt="Pélican" width=456></h1>
+					<h1><img src="/img/logo.gif" alt="Pélican" width="456" class="logo"></h1>
 					<p>Version {{ jdr.version }}</p>
 				</hgroup>
 				

content/rules/inventaire.md

@@ -68,6 +68,8 @@ Voici un petit tableau d'armes de bases :
 
 Les boucliers permettent de diminuer les dégats si un jet d'encaissement est réussi, en ajoutant leur puissance de protection à l'armure physique ou magique du personnage.
 
+<div class="dataTable">
+
 | Nom | Type | Mains | Effet | Force | Prix |
 |:------:|:------:|:------:|:------:|:------:|:------:|
 | Bouclier simple | Bouclier | 1 | | 1 | 100 |
@@ -75,10 +77,14 @@ Les boucliers permettent de diminuer les dégats si un jet d'encaissement est r
 | Bouclier lourd | Bouclier | 1 | -20% pour encaisser/esquiver | 4 | 400 |
 | Pavois | Bouclier | 2 | -30% niveau pour encaisser/esquiver | 6 | 550 |
 
+</div>
+
 ## Effets d'arme et bouclier
 
 Les armes et boucliers peuvent avoir un ou des effet(s) supplémentaire(s).
 
+<div class="table-auto">
+
 | Nom| Effet| Surcout |
 |:------:|:------:|:------:|
 | Améliorée | x1.5 force | +50% |
@@ -96,6 +102,8 @@ Les armes et boucliers peuvent avoir un ou des effet(s) supplémentaire(s).
 | Consolidé | Effet du brise-armure divisé par 2 (bouclier) | +25% |
 | Miroitante | Renvoie la moitié des dégâts spéciaux infligés (bouclier) | +50% |
 
+</div>
+
 ## Tenues et armures
 
 Les tenues sont un équipement offrant protection et effets divers à votre personnage. Les personnages ne peuvent porter qu'une tenues à la fois, il peut être donc intéressant d'adapter sa tenue aux circonstances. Les tenues se divisent principalement en deux types : Les vêtements (qui apportent peu de protection, mais des effets utiles) ou les armures (qui ont moins d'effets, mais plus de protection).

content/rules/niveaux.md

@@ -55,10 +55,14 @@ Pour les êtres mythiques, amélioré au dela de ce que peuvent faire les joueur
 
 Cela donne les aventages suivants :
 
+<div class="table-auto">
+
 | Rang | Max PV/PE | Max Compétence | Classe | Autres bonus |
 |:-----|:---------:|:--------------:|:-----:|:------:|
-| {{ rank.c.nom }} *({{ rank.c.niv }})* | {{ rank.c.pv }} | {{ rank.c.comp }} | {{ rank.c.classe }} | {{ rank.c.effets }} |
+| {{ rank.c.nom }}<br />*({{ rank.c.niv }})* | {{ rank.c.pv }} | {{ rank.c.comp }} | {{ rank.c.classe }} | {{ rank.c.effets }} |
-| {{ rank.b.nom }} *({{ rank.b.niv }})* | {{ rank.b.pv }} | {{ rank.b.comp }} | {{ rank.b.classe }} | {{ rank.c.effets }} |
+| {{ rank.b.nom }}<br />*({{ rank.b.niv }})* | {{ rank.b.pv }} | {{ rank.b.comp }} | {{ rank.b.classe }} | {{ rank.c.effets }} |
-| {{ rank.a.nom }} *({{ rank.a.niv }})* | {{ rank.a.pv }} | {{ rank.a.comp }} | {{ rank.a.classe }} | {{ rank.c.effets }} |
+| {{ rank.a.nom }}<br />*({{ rank.a.niv }})* | {{ rank.a.pv }} | {{ rank.a.comp }} | {{ rank.a.classe }} | {{ rank.c.effets }} |
-| {{ rank.s.nom }} *({{ rank.s.niv }})* | {{ rank.s.pv }} | {{ rank.s.comp }} | {{ rank.s.classe }} | {{ rank.c.effets }} |
+| {{ rank.s.nom }}<br />*({{ rank.s.niv }})* | {{ rank.s.pv }} | {{ rank.s.comp }} | {{ rank.s.classe }} | {{ rank.c.effets }} |
-| {{ rank.x.nom }} *({{ rank.x.niv }})* | {{ rank.x.pv }} | {{ rank.x.comp }} | {{ rank.x.classe }} | {{ rank.c.effets }} |
+| {{ rank.x.nom }}<br />*({{ rank.x.niv }})* | {{ rank.x.pv }} | {{ rank.x.comp }} | {{ rank.x.classe }} | {{ rank.c.effets }} |
+
+</div>

content/rules/vehicules.md

@@ -115,9 +115,13 @@ Les combats d'équipages sont des combats utilisant des équipages d'un bateau,
 
 Comme pour un combat normal, chaque personnage fait *jet d'initiative* pour connaître sa place dans le combat, en utilisant sa statistique d'HAB.
 
+<div class="table-auto">
+
 | Rôle | Compétences | Effets |
 |:----:|:-----------:|:-------|
 | Capitaine | Stratégie, Commandement | Permet d'ajouter des bonus à une action aux autres personnages s'ils obéissent aux ordres. |
 | Réparateur | Mécanique | Permet de réparer le véhicule les niveaux de réussite (voir actions de véhicule) |
 | Pilote | Pilotage | Permet de produire des esquives, et/ou de définir la direction du véhicule |
 | Armes | (dépend de l'arme) | Fait un tir avec les armes (dégats dépendent de l'arme) |
+
+</div>

public/css/index.css

@@ -72,6 +72,11 @@ html {
 	width: 1px;
 }
 
+h1 img.logo {
+  max-width: 100%;
+  height: auto;
+}
+
 a[href] {
 	color: var(--text-color-link);
   text-decoration: underline dashed 1px;
@@ -410,18 +415,30 @@ iframe {
   header h1 a[href] {
     font-size: 5rem;
   }
+
+  h1 {
+    font-size: 3rem;
+  }
 }
 
 @media screen and (max-width: 460px) {
   header h1 a[href] {
     font-size: 4.5rem;
   }
+
+  h1 {
+    font-size: 2.5rem;
+  }
 }
 
 @media screen and (max-width: 390px) {
   header h1 a[href] {
     font-size: 4rem;
   }
+
+  h1 {
+    font-size: 2.25rem;
+  }
 }
 
 hgroup {
@@ -467,4 +484,8 @@ thead tr {
 
 th, td {
   padding:.33rem .66rem;
+}
+
+.table-auto, div.dataTable {
+  overflow-x:auto;
 }