Deuxfleurs/guide.deuxfleurs.fr
23
4
Fork 10
Code Issues 4 Pull requests 3 Projects Releases Wiki Activity

Tentative 2: navigation sur mobile

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
content/_index.md
View file

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

59
sass/juice.scss
View file

@ -100,6 +100,10 @@ main {
padding: 50px 100px; padding: 50px 100px;
margin: 0; margin: 0;
.toc-homepage {
display: none;
}
.toc { .toc {
max-width: 260px; max-width: 260px;
min-width: 240px; min-width: 240px;
@ -253,25 +257,12 @@ main details#navigation-toggle summary {
/* *********** */ /* *********** */
.menu-button-container {
display: none;
}
#menu-toggle { #menu-toggle {
display: none; display: none;
} }
.menu-button, .menu-button {
.menu-button::before, display: none;
.menu-button::after {
display: block;
background-color: #fff;
position: absolute;
height: 4px;
width: 30px;
transition: transform 400ms ease;
border-radius: 2px;
} }
.menu-button::before { .menu-button::before {
@ -299,18 +290,40 @@ main details#navigation-toggle summary {
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.menu-button-container { main .toc-homepage {
position: absolute;
display: block; 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; display: none;
} }
#menu-toggle:checked ~ .toc { #menu-toggle:checked ~ .toc-item {
display: block; display: block;
} }
} }

8
templates/_nav.html
View file

@ -133,9 +133,15 @@
{% set root_path = hierarchy | nth(n=0) %} {% set root_path = hierarchy | nth(n=0) %}
{% set root = get_section(path=root_path) %} {% 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"> <div class="toc-item toc-section">
<a class="subtext" href="{{root.permalink | safe}}">{{ root.title }}</a> <a class="subtext" href="{{root.permalink | safe}}">{{ root.title }}</a>
</div> </div>
{{ nav::navsection(hierarchy=hierarchy,level=0,current=current) }} {{ nav::navsection(hierarchy=hierarchy,level=0,current=current) }}
{% endmacro %} {% endmacro %}

22
templates/index.html
View file

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