headless css + cleaner javascript

This commit is contained in:
Speyll
2024-02-29 04:22:04 +01:00
parent 243321205e
commit 67c73978ce
13 changed files with 119 additions and 352 deletions

View File

@@ -5,27 +5,19 @@
{% set current_lang = section.lang %}
{% endif %}
{% if config.extra.header_nav %}
<nav class="navBar">
<nav id="nav-bar">
{% for nav_item in config.extra.header_nav %}
<a href="{{ nav_item.url }}" class="{% if nav_item.url == current_url %}active{% endif %}">
{% set language_key = 'name_' ~ current_lang %}
{{ nav_item[language_key] }}
</a>
{% endfor %}
<div class="themeSwitch">
{% if not config.extra.default_theme %}
<button class="themeButton light" onclick="setTheme('light')" title="Light mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#lightMode', trailing_slash=false) | safe }}"></use></svg></button>
<button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#darkMode', trailing_slash=false) | safe }}"></use></svg></button>
{% elif config.extra.default_theme and config.extra.default_theme == "light" %}
<button class="themeButton light" onclick="setTheme('light')" title="Light mode"><svg class="icons icons__background"> <use href="{{ get_url(path='icons.svg#lightMode', trailing_slash=false) | safe }}"></use></svg></button>
<button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#darkMode', trailing_slash=false) | safe }}"></use></svg></button>
{% elif config.extra.default_theme and config.extra.default_theme == "dark" %}
<button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#darkMode', trailing_slash=false) | safe }}"></use></svg></button>
<button class="themeButton light" onclick="setTheme('light')" title="Light mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#lightMode', trailing_slash=false) | safe }}"></use></svg></button>
{% endif %}
</div>
</nav>
<div>
<input type="checkbox" id="theme-toggle" style="display: none;">
<label for="theme-toggle" id="theme-toggle-label"><svg id="theme-icon" class="icons"><use href="{{ get_url(path='/icons.svg#lightMode', trailing_slash=false) | safe }}"></use></svg></label>
<audio id="theme-sound">
<source src="{{ get_url(path='theme-switch-sound.mp3', trailing_slash=false) | safe }}" type="audio/mp3">
</audio>
</div>
</nav>
{% endif %}