fanstuff.garden/sonicgarden
1
0
Fork 0
Code Issues 17 Pull requests Projects Releases Packages Wiki Activity

feat: version mobile

Browse source
This commit is contained in:
Kazhnuz 2024-09-06 14:22:00 +02:00
parent 82d79360cd
commit 580bda4f27
7 changed files with 134 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
_includes/layouts/base-subpages.njk
View file

@ -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 -%}

4
_includes/layouts/base-toppages.njk
View file

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

4
_includes/layouts/base.njk
View file

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

2
_includes/layouts/home.njk
View file

@ -1,7 +1,7 @@
---
layout: layouts/parent.njk
---
<main id="skip">
<main id="skip" class="visible">
<div>
{{ content | safe }}
</div>

3
_includes/layouts/parent.njk
View file

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

77
public/css/index.css
View file

@ -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;
}
}

48
public/js/mobile-sidebar.js Normal file
View 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');
});
});