<!DOCTYPE html>
<html lang="{{ .Site.Language.Lang }}">
  {{ partial "head.html" . -}}
  <body>
  <header>
    <div class="site-header">
      <span class="site-header__icon"><i class="fas fa-flask"></i></span>
      <span class="site-header__title">{{ .Site.Title }}</span>
      <span class="site-header__description">{{ .Site.Params.longTitle }}</span>
    </div>

    <div class="site-nav__mobile">
      <span class="site-nav__button" onclick="toogleClass('js-site-nav');">Menu</span>
    </div>

    <nav id="js-site-nav" class="site-nav">
      <ul class="site-nav__list">
        {{ $currentPage := .Permalink }}
        <li><a class="site-nav__button {{- if eq $currentPage (printf "%s" .Site.BaseURL) }} is-active {{- end }}" href="{{ .Site.BaseURL }}">Blog</a></li>
        {{ range $name, $taxonomy := .Site.Taxonomies.categories }}
          {{ with $.Site.GetPage (printf "/categories/%s" $name) }}
            <li><a class="site-nav__button {{ if eq $currentPage .Permalink }} is-active {{ end }}" href="{{ .Permalink }}">{{ .Title }}</a></li>
          {{ end }}
        {{ end }}
      </ul>
    </nav>
  </header>

  <div class="site-wrapper">
    <main class="site-content">
      {{ block "main" . }}{{ end }}
    </main>
    {{ partial "footer.html" . -}}
  </div>

  <link rel="stylesheet" type="text/css" href="{{ "default.min.css" | relURL }}" />
  <link rel="stylesheet" type="text/css" href="{{ "_tool/fontawesome/css/all.min.css" | relURL }}" />

  <script type="text/javascript">
    function toogleClass(id) {
      document.getElementById(id).classList.toggle("is-visible");
    }
  </script>
  </body>
</html>
