alexohneander/alexohneander-zola
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

🐛 fix: remove flash when navigating in dark-mode

Browse Source 
The `initialize-theme.js` script takes care of the following:

  1. If there is a stored theme value in the localStorage, set the theme
 based on that value.
  2. If there is no stored theme value, check the  user's system
  preference (dark or light) and set the theme accordingly.

The new `main.js` takes care of the actual theme switching and listening
to system preference changes (if the user has not manually set a theme).

Now the icons are stored in CSS, and are set according to the current
theme. This allows for having different icons that dynamically switch.

Additionally, wraps social and navigation elements in ul/li.

Fixes #76
This commit is contained in:
welpo
2023-04-28 16:20:42 +02:00
parent eb63718bbf
commit 1efb0330e3
15 changed files with 64 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
templates/partials/footer.html
View File

@@ -2,18 +2,19 @@
<section>
<nav class="socials nav-navs">
{%- if config.extra.socials %}
{% for social in config.extra.socials %}
<a rel="noopener noreferrer" target="_blank" class="nav-links no-hover-padding social" href={{ social.url | safe | replace(from="$BASE_URL", to=config.base_url) }}>
<img alt={{ social.name }} title={{ social.name }} src="{{config.base_url}}/social_icons/{{ social.icon }}.svg">
</a>
{% endfor %}
<ul>
{% for social in config.extra.socials %}
<li>
<a rel="noopener noreferrer" target="_blank" class="nav-links no-hover-padding social" href={{ social.url | safe | replace(from="$BASE_URL", to=config.base_url) }}>
<img alt={{ social.name }} title={{ social.name }} src="{{config.base_url}}/social_icons/{{ social.icon }}.svg">
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</nav>
<div class="credits">
<small>Powered by <a href="https://www.getzola.org" target="_blank">Zola</a> & <a href="https://github.com/welpo/tabi" target="_blank">tabi</a></small>
</div>
</section>
{%- if config.extra.theme_switcher == true -%}
<script src="{{ get_url(path='js/main.js', trailing_slash=false) | safe }}"/></script>
{%- endif -%}
</footer>

5
templates/partials/header.html
View File

@@ -55,4 +55,9 @@
{%- endfor -%}
{%- endif -%}">
{%- if config.extra.theme_switcher == true -%}
<script type="text/javascript" src="{{ get_url(path='js/initialize_theme_min.js') | safe }}"></script>
<script defer src="{{ get_url(path='js/main_min.js', trailing_slash=false) | safe }}"/></script>
{%- endif -%}
</head>

24
templates/partials/nav.html
View File

@@ -6,23 +6,19 @@
{%- if config.extra.menu %}
<div class="nav-navs">
<div>
<ul>
{% for menu in config.extra.menu %}
<a class="nav-links no-hover-padding" href={{ menu.url | safe | replace(from="$BASE_URL" , to=config.base_url) }}>{{ menu.name
}}</a>
<li>
<a class="nav-links no-hover-padding" href={{ menu.url | safe | replace(from="$BASE_URL" , to=config.base_url) }}>{{ menu.name }}</a>
</li>
{% endfor %}
</div>
{%- if config.extra.theme_switcher == true -%}
<label class="theme-switcher" for="themeswitch">
<input type="checkbox" id="themeswitch">
<div class="switch">
<img alt="set dark theme" class="moon" src="{{ config.base_url }}/menu_icon/moon.svg">
<img alt="set light theme" class="sun" src="{{ config.base_url }}/menu_icon/sun.svg">
</div>
{%- endif -%}
</label>
{%- if config.extra.theme_switcher == true -%}
<li class="theme-switcher-wrapper">
<div class="theme-switcher"></div>
</li>
{%- endif -%}
</ul>
</div>
{% endif %}
</nav>
</header>