Version 2.6.1 #113
5 changed files with 140 additions and 19 deletions
|
@ -2,7 +2,7 @@
|
||||||
layout: layouts/parent.njk
|
layout: layouts/parent.njk
|
||||||
---
|
---
|
||||||
<div id="core">
|
<div id="core">
|
||||||
<main id="skip">
|
<main id="skip" class="visible">
|
||||||
<div>
|
<div>
|
||||||
{{ content | safe }}
|
{{ content | safe }}
|
||||||
</div>
|
</div>
|
||||||
|
@ -18,7 +18,7 @@ layout: layouts/parent.njk
|
||||||
</div>
|
</div>
|
||||||
{%- endif -%}
|
{%- endif -%}
|
||||||
|
|
||||||
<div class="card">
|
<div class="card" id="sommaire">
|
||||||
<h2>Sommaire</h2>
|
<h2>Sommaire</h2>
|
||||||
{{ content | toc | safe }}
|
{{ content | toc | safe }}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
layout: layouts/parent.njk
|
layout: layouts/parent.njk
|
||||||
---
|
---
|
||||||
<div id="core">
|
<div id="core">
|
||||||
<main id="skip">
|
<main id="skip" class="visible">
|
||||||
<div>
|
<div>
|
||||||
{{ content | safe }}
|
{{ content | safe }}
|
||||||
</div>
|
</div>
|
||||||
|
@ -18,7 +18,7 @@ layout: layouts/parent.njk
|
||||||
</div>
|
</div>
|
||||||
{%- endif -%}
|
{%- endif -%}
|
||||||
|
|
||||||
<div class="card">
|
<div class="card" id="sommaire">
|
||||||
<h2>Sommaire</h2>
|
<h2>Sommaire</h2>
|
||||||
{{ content | toc | safe }}
|
{{ content | toc | safe }}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -27,19 +27,6 @@
|
||||||
<h1>
|
<h1>
|
||||||
<a href="/" class="home-link"><img src="/img/logo-small.png" alt=""><span class="visually-hidden">{{ metadata.title }}</span></a>
|
<a href="/" class="home-link"><img src="/img/logo-small.png" alt=""><span class="visually-hidden">{{ metadata.title }}</span></a>
|
||||||
</h1>
|
</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>
|
</header>
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<nav id="sidebar">
|
<nav id="sidebar">
|
||||||
|
@ -56,6 +43,9 @@
|
||||||
|
|
||||||
<!-- Current page: {{ page.url | htmlBaseUrl }} -->
|
<!-- 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>
|
<script>
|
||||||
const myTable = document.querySelector("#dataTable table");
|
const myTable = document.querySelector("#dataTable table");
|
||||||
|
|
||||||
|
|
|
@ -94,8 +94,10 @@ header h1 a {
|
||||||
|
|
||||||
h1 img {
|
h1 img {
|
||||||
display:block;
|
display:block;
|
||||||
height:128px;
|
max-height:128px;
|
||||||
|
max-width: 100%;
|
||||||
width:auto;
|
width:auto;
|
||||||
|
height:auto;
|
||||||
margin:auto 0;
|
margin:auto 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -295,3 +297,84 @@ th {
|
||||||
tr:nth-child(even) td {
|
tr:nth-child(even) td {
|
||||||
background-color: rgba(255, 255, 255, 0.03);
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
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