<header class="site-header">
  <div class="wrapper">
    <a class="site-title" href="/"><img src="/images/fun.png" alt="{{ site.title }}" style="border-radius: 12px; margin: 0 0 0 -6px; padding: 0;" title="Fun"></a>
    <nav class="site-nav" style="border-radius:8px;">
      <a href="#" class="menu-icon"><span>&#8801;</span></a>
      <div class="trigger">
      <h2 style="display:none;">Navigation</h2>
        <ul style="list-style: none;">
          <li><a class="page-link" href="/" style="text-decoration:none;" title="Homepage">/</a></li>
          <li><a class="page-link" href="/about/" style="text-decoration:none;" title="About">About</a></li>
          <li><a class="page-link" href="/community/" style="text-decoration:none;" title="Community">Community</a></li>
          <li><a class="page-link" href="/contact/" style="text-decoration:none;" title="Contact">Contact</a></li>
          <li><a class="page-link" href="/documentation/" style="text-decoration:none;" title="Documentation">Documentation</a></li>
          <li><a class="page-link" href="/faq/" style="text-decoration:none;" title="FAQ">FAQ</a></li>
          <li><a class="page-link" href="/features/" style="text-decoration:none;" title="FAQ">Features</a></li>
          <li><a class="page-link" href="/download/" style="text-decoration:none;" title="Download">Download</a></li>
<!--
https://www.w3schools.com/howto/howto_js_toggle_dark_mode.asp
https://dev.to/warish/how-to-create-a-dark-mode-toggle-with-html-css-and-javascript-378m
-->
<!--
          <li><div class="toggle-container" id="themeToggle">
            <svg class="sun-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="5"></circle>
                <line x1="12" y1="1" x2="12" y2="3"></line>
                <line x1="12" y1="21" x2="12" y2="23"></line>
                <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
                <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
                <line x1="1" y1="12" x2="3" y2="12"></line>
                <line x1="21" y1="12" x2="23" y2="12"></line>
                <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
                <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
            </svg>
            <svg class="moon-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
            </svg>
        </div></li>
-->
        </ul>
      </div>
    </nav>
  </div>
</header>

