1.8 KiB · text History d4b24c3
<!DOCTYPE html>
<html lang="en" data-theme="{{ config.extra.default_theme }}" data-default-theme="{{ config.extra.default_theme }}">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{% block title %}{{ config.title }}{% endblock title %}</title>
  <meta name="description" content="{% block description %}{{ config.description }}{% endblock description %}">
  {% include "_theme_head.html" %}
  <link rel="stylesheet" href="{{ get_url(path='site.css') }}">
  {% block head %}{% endblock head %}
</head>
<body>
  <header class="site-header">
    <nav class="nav container">
      <a href="{{ get_url(path='@/_index.md') }}" class="nav__logo">{{ config.title }}</a>
    </nav>
  </header>

  <main>
    <div class="container">
      {% block content %}{% endblock content %}
    </div>
  </main>

  <footer class="site-footer">
    <div class="container footer__inner">
      <span class="footer__logo">
        neiam
        <button class="theme-toggle" id="theme-toggle" aria-label="Switch color scheme">
          <span id="theme-label">💜</span>
        </button>
      </span>
      <span class="footer__copy">&copy; {{ now() | date(format="%Y") }} NEIAM</span>
    </div>
  </footer>

  <script src="{{ get_url(path='themes.js') }}"></script>
  <script>
    (function () {
      const btn = document.getElementById("theme-toggle");
      const label = document.getElementById("theme-label");
      const T = window.NeiamThemes;

      // The button previews the theme it will switch *to*.
      function paint() {
        const upcoming = T.themes[(T.themes.indexOf(T.current()) + 1) % T.themes.length];
        label.textContent = T.emoji[upcoming];
      }

      paint();
      window.addEventListener("themechange", paint);
      btn.addEventListener("click", T.next);
    })();
  </script>
</body>
</html>