<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="{{ get_url(path="css/index.css") }}" rel="stylesheet" />
    <link href="{{ get_url(path="css/extra.css") }}" rel="stylesheet" />
    <script defer data-domain="polynom.me" src="https://plausible.polynom.me/js/script.js"></script>

    {% if page %}
    <meta property="og:title" content="{{ page.title }}" />
  	<meta property="og:description" content="{{ page.description }}" />
  	<title>{{ page.title }}</title>
    {% else %}
    <meta property="og:title" content="{{ config.title }}" />
  	<meta property="og:description" content="{{ config.description }}" />
  	<title>{{ config.title }}</title>
    {% endif %}
  </head>
  <body>
    <div class="flex flex-col p-2 md:p-8 items-start md:w-4/5 mx-auto">
      <!-- Header -->
      <div class="flex flex-row self-center">
        <img
          class="w-12 h-12 md:w-24 md:h-24 rounded-lg"
          src="/img/avatar.jpg"
          alt="Profile picture"
          integrity="sha386-{{ get_hash(path="img/avatar.jpg", sha_type=384, base64=true) | safe }}" />
        <div class="ml-4 self-center">
          <a class="self-center text-2xl font-bold" href="/">PapaTutuWawa's Website</a>

            <ul class="list-none">
              <li class="inline mr-8"><a href="https://blog.polynom.me">Blog</a></li>
              <li class="inline mr-8"><a href="{{ get_url(path="@/code.md" ) }}">Code</a></li>
              <li class="inline mr-8"><a href="{{ get_url(path="@/contact.md" ) }}">Contact</a></li>
            </ul>
        </div>
      </div>

      {% block content %}{% endblock %}
    </div>
  </body>
</html>
