feat: responsive design
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
Kazhnuz
parent
390d5385be
commit
667896ab7a
15 changed files with 161 additions and 12 deletions
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: layouts/parent.njk
|
||||
---
|
||||
<main id="skip">
|
||||
<main id="skip" class="visible">
|
||||
<div>
|
||||
{{ content | safe }}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: layouts/parent.njk
|
||||
---
|
||||
<main id="skip">
|
||||
<main id="skip" class="visible">
|
||||
<div>
|
||||
{{ content | safe }}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: layouts/parent.njk
|
||||
---
|
||||
<main id="skip">
|
||||
<main id="skip" class="visible">
|
||||
<div>
|
||||
{{ content | safe }}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: layouts/parent.njk
|
||||
---
|
||||
<main id="skip">
|
||||
<main id="skip" class="visible">
|
||||
<div>
|
||||
{{ content | safe }}
|
||||
<h2 id="liste-des-pages">Liste des pages</h2>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: layouts/parent.njk
|
||||
---
|
||||
<main id="skip">
|
||||
<main id="skip" class="visible">
|
||||
<div>
|
||||
{{ content | safe }}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -42,6 +42,7 @@
|
|||
|
||||
<footer><a href="https://creativecommons.org/licenses/by-sa/4.0/"><img src="/img/cc-by-sa.png" /><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>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: layouts/parent.njk
|
||||
---
|
||||
<main id="skip" class="pokepage">
|
||||
<main id="skip" class="pokepage visible">
|
||||
<div>
|
||||
{{ content | safe }}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: layouts/parent.njk
|
||||
---
|
||||
<main id="skip" class="pokepage">
|
||||
<main id="skip" class="pokepage visible">
|
||||
<div>
|
||||
{{ content | safe }}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: layouts/parent.njk
|
||||
---
|
||||
<main id="skip" class="pokepage">
|
||||
<main id="skip" class="pokepage visible">
|
||||
<div>
|
||||
{{ content | safe }}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: layouts/parent.njk
|
||||
---
|
||||
<main id="skip" class="pokepage">
|
||||
<main id="skip" class="pokepage visible">
|
||||
<div>
|
||||
{{ content | safe }}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: layouts/parent.njk
|
||||
---
|
||||
<main id="skip">
|
||||
<main id="skip" class="visible">
|
||||
<div>
|
||||
{{ content | safe }}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -34,6 +34,19 @@ Les attaques glitchées sont des attaques au dela des attaques prévues par le j
|
|||
|
||||
Les attaques ont des données d'attaques normales, en plus de leur potentiel effet. L'attaque "-" et les attaques "Super Glitch" ont la potentialité de provoquer l'effet éponyme (de manière partielle pour "-").
|
||||
|
||||
### Liste des attaques
|
||||
|
||||
*Note: Ce tableau est basé plus sur la version anglaise*
|
||||
|
||||
| Nom | ID | Effets |
|
||||
|:---:|:--:|:------:|
|
||||
| -- | 00 | Super Glitch Partiel |
|
||||
| Super Glitch | 166-195 | Corruption Super Glitch |
|
||||
| HM01 | 196 | Attaque avec les effets de Choc Mental. Si ne met pas KO, le message "Mais rien ne se passe" apparaitra. |
|
||||
| HM01 | 196 | Attaque avec les effets de Choc Mental. Si ne met pas KO, le message "Mais rien ne se passe" apparaitra. |
|
||||
|
||||
Pour une liste plus complète et liée à la version française, vous pouvez voir celle-ci sur [PRAMA Initiative](https://www.prama-initiative.com/index.php?page=glitchdex-attaques)
|
||||
|
||||
## Super Glitch
|
||||
|
||||
L'effet Super Glitch est une corruption de mémoire provoqué par des attaques ayant un nom qui n'a pas de marqueur de fin. Plus précisément, cela vient du fait que les attaques dites "Super Glitch" et "-" n'ont pas de vrai "nom", mais une série de donnée de la ROM qui va être pris comme si c'était un nom, et qui n'a donc pas forcément le caractère de fin présent.
|
||||
|
|
|
|||
|
|
@ -21,6 +21,10 @@
|
|||
float: right;
|
||||
}
|
||||
|
||||
.datatable-container {
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
.datatable-selector {
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ body {
|
|||
min-height:100%;
|
||||
font-family: var(--font-family);
|
||||
color: var(--text-color);
|
||||
width:1280px;
|
||||
max-width:1280px;
|
||||
}
|
||||
html {
|
||||
overflow-y: scroll;
|
||||
|
|
@ -290,3 +290,86 @@ footer {
|
|||
width:800px;
|
||||
}
|
||||
|
||||
.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: 640px) {
|
||||
|
||||
header h1 a {
|
||||
font-size:4rem;
|
||||
}
|
||||
|
||||
.pokedex td:nth-child(n + 4),
|
||||
.pokedex th:nth-child(n + 4) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
|
||||
header h1 a {
|
||||
font-size:3rem;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display:block!important;
|
||||
}
|
||||
|
||||
}
|
||||
48
public/js/mobile-sidebar.js
Normal file
48
public/js/mobile-sidebar.js
Normal file
|
|
@ -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');
|
||||
});
|
||||
});
|
||||
Loading…
Reference in a new issue