Tentative 2: navigation sur mobile

This commit is contained in:
Alex 2022-12-22 00:35:27 +01:00
parent 719c8cf493
commit 0e95d0d7b4
No known key found for this signature in database
GPG key ID: 09EC5284AA804D3C
4 changed files with 52 additions and 39 deletions

View file

@ -1,5 +1,5 @@
+++
title = "Manuels Deuxfleurs"
title = "Guide Deuxfleurs"
sort_by = "weight"
+++

View file

@ -100,6 +100,10 @@ main {
padding: 50px 100px;
margin: 0;
.toc-homepage {
display: none;
}
.toc {
max-width: 260px;
min-width: 240px;
@ -253,25 +257,12 @@ main details#navigation-toggle summary {
/* *********** */
.menu-button-container {
display: none;
}
#menu-toggle {
display: none;
}
.menu-button,
.menu-button::before,
.menu-button::after {
display: block;
background-color: #fff;
position: absolute;
height: 4px;
width: 30px;
transition: transform 400ms ease;
border-radius: 2px;
.menu-button {
display: none;
}
.menu-button::before {
@ -299,18 +290,40 @@ main details#navigation-toggle summary {
}
@media (max-width: 768px) {
.menu-button-container {
position: absolute;
main .toc-homepage {
display: block;
height: 32px;
width: 32px;
top: 40px;
right: 24px;
}
#menu-toggle ~ .toc {
.toc-menu-title {
font-weight: 600;
margin-left: 64px;
}
.toc-section {
margin-top: 16px;
}
.menu-button {
top: 28px;
left:24px;
}
.menu-button,
.menu-button::before,
.menu-button::after {
display: block;
background-color: #777;
position: absolute;
height: 4px;
width: 30px;
transition: transform 400ms ease;
border-radius: 2px;
}
#menu-toggle ~ .toc-item {
display: none;
}
#menu-toggle:checked ~ .toc {
#menu-toggle:checked ~ .toc-item {
display: block;
}
}

View file

@ -133,9 +133,15 @@
{% set root_path = hierarchy | nth(n=0) %}
{% set root = get_section(path=root_path) %}
<input id="menu-toggle" type="checkbox" />
<label class='menu-button-container' for="menu-toggle">
<div class="menu-button"></div>
<div class="toc-item toc-menu-title subtext">{{ root.title }}</div>
</label>
<div class="toc-item toc-section">
<a class="subtext" href="{{root.permalink | safe}}">{{ root.title }}</a>
</div>
{{ nav::navsection(hierarchy=hierarchy,level=0,current=current) }}
{% endmacro %}

View file

@ -26,21 +26,15 @@
<main>
{% block mainnav %}
{% if page.ancestors or section.ancestors %}
<input id="menu-toggle" type="checkbox" {% if section.subsections or section.pages %}checked{% endif %} />
<label class='menu-button-container' for="menu-toggle">
<div class='menu-button'></div>
</label>
<div class="toc" id="navigation">
<div class="toc-sticky">
{% if page %}
{{ nav::navmenu(current=page) }}
{% else %}
{{ nav::navmenu(current=section) }}
{% endif %}
</div>
<div class="toc {% if page.ancestors or section.ancestors %}{% else %}toc-homepage{% endif %}">
<div class="toc-sticky">
{% if page %}
{{ nav::navmenu(current=page) }}
{% else %}
{{ nav::navmenu(current=section) }}
{% endif %}
</div>
{% endif %}
</div>
{% endblock mainnav %}
<div class="content text">