{% import "_macros.html" as macros %} {% import "_nav.html" as nav %} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>{% block title %}{{ config.title }}{% endblock title %}</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> {% block favicon %} <link rel="icon" type="image/png" href="/favicon.ico"> {% endblock favicon %} {% include "_variables.html" %} <link rel="stylesheet" href="/normalize.css"> <link rel="stylesheet" href="{{ get_url(path="juice.css") }}"> {% block head %} {% endblock head %} </head> <body> {% block header %} <header class="box-shadow top-nav"> {{ macros::render_header() }} </header> {% endblock header %} <main> {% block mainnav %} <div class="toc {% if page.ancestors or section.ancestors %}{% else %}toc-homepage{% endif %}"> <div class="toc-sticky"> {% if page %} {{ nav::page(target=page) }} {% else %} {{ nav::section(target=section) }} {% endif %} </div> </div> {% endblock mainnav %} <div class="content text"> {% block content %} <div id="features" class="heading-text">{{ section.title }} </div> {{ section.content | safe }} {% endblock content %} </div> {% block sidebar %} {% endblock sidebar %} </main> {% block footer %} <footer> <small class="subtext"> Édité et hébergé par <a href="https://deuxfleurs.fr">Deuxfleurs</a>, généré par <a href="https://www.getzola.org">Zola</a>, thème dérivé de <a href="https://github.com/huhu/juice">Juice</a>, servi par <a href="https://garagehq.deuxfleurs.fr/">Garage</a>. </small> <small class="subtext">Dernière mise à jour le {{ now() | date(format="%A %-d %B %Y", locale="fr_FR") }}.</small> </footer> {% endblock footer %} </body> <script> function highlightNav(heading) { let pathname = location.pathname; document.querySelectorAll(".toc a").forEach((item) => { item.classList.remove("active"); }); document.querySelector(".toc a[href$='" + pathname + "#" + heading + "']").classList.add("active"); } let currentHeading = ""; window.onscroll = function () { let h = document.querySelectorAll("h1,h2,h3,h4,h5,h6"); let elementArr = []; h.forEach(item => { if (item.id !== "") { elementArr[item.id] = item.getBoundingClientRect().top; } }); elementArr.sort(); for (let key in elementArr) { if (!elementArr.hasOwnProperty(key)) { continue; } if (elementArr[key] > 0 && elementArr[key] < 300) { if (currentHeading !== key) { highlightNav(key); currentHeading = key; } break; } } } </script> </html>