hyperscript toggle for body

This commit is contained in:
gws 2024-11-08 13:10:54 +01:00
parent e28058040c
commit 587877a3fb
3 changed files with 146 additions and 143 deletions

View file

@ -40,6 +40,11 @@
src="/flag-for-united-kingdom-svgrepo-com.svg"></a> src="/flag-for-united-kingdom-svgrepo-com.svg"></a>
{% endif %} {% endif %}
<button _="on click toggle .dark on the closest <body/>"> toggle </button>
</nav> </nav>

View file

@ -1,5 +1,5 @@
<style> <style>
:not(.dark) { :root {
/* Primary theme color */ /* Primary theme color */
--primary-color: #FED43F; --primary-color: #FED43F;
/* Primary theme text color */ /* Primary theme text color */

View file

@ -29,16 +29,14 @@
<title>Software, Product Developement and IT consulting</title> <title>Software, Product Developement and IT consulting</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
{% endblock head %} <script src="https://unpkg.com/hyperscript.org@0.9.13"></script>{% endblock head %}
{% block header %}
<body hx-boost="false" class="dark"> <header class="pos-absolute" style="background-color: transparent">
{% block header %}
<header class="pos-absolute" style="background-color: transparent">
{{ macros::render_header(path="/") }} {{ macros::render_header(path="/") }}
</header> </header>
<div class="hero"> <div class="hero">
{% block hero %} {% block hero %}
@ -81,22 +79,22 @@
{% endblock hero %} {% endblock hero %}
</div> </div>
{% endblock header %} {% endblock header %}
{% block toc %} {% block toc %}
{% if section.toc %} {% if section.toc %}
{% set toc = section.toc %} {% set toc = section.toc %}
{% elif page.toc %} {% elif page.toc %}
{% set toc = page.toc %} {% set toc = page.toc %}
{% endif %} {% endif %}
{% if toc %} {% if toc %}
{% if page.extra.disable_toc %} {% if page.extra.disable_toc %}
{% else %} {% else %}
<div class="toc"> <div class="toc">
<div class="toc-sticky"> <div class="toc-sticky">
{% for h in toc %} {% for h in toc %}
<div class="toc-item"> <div class="toc-item">
@ -111,23 +109,23 @@
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
{% endif %} {% endif %}
{% endif %} {% endif %}
{% endblock toc %} {% endblock toc %}
{% block sidebar %} {% block sidebar %}
<!-- <div> --> <!-- <div> -->
<!-- Your cool sidebar --> <!-- Your cool sidebar -->
<!-- </div> --> <!-- </div> -->
{% endblock sidebar %} {% endblock sidebar %}
{% block footer %} {% block footer %}
<footer> <footer>
<!-- <small class="subtext"> --> <!-- <small class="subtext"> -->
<!-- <a href="https://huhu.io">Huhu.io</a> © 2021 --> <!-- <a href="https://huhu.io">Huhu.io</a> © 2021 -->
<!-- </small> --> <!-- </small> -->
@ -182,5 +180,5 @@
{% endif %} {% endif %}
</div> </div>
</footer> </footer>
{% endblock footer %} {% endblock footer %}