<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ metaTitle or title }} - {{ site.name }}</title>
    <meta name="description" content="{{ metaDescription or site.metaDescription }}">
    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 105 55%22><text y=%22.9em%22 font-size=%2275%22>🍽️</text></svg>">
    
    <style>
      :root {
        --color-primary: {{ site.primaryColor }};
        --color-secondary: {{ site.secondaryColor }};
      }
      {% include "css/main.css" %}
    </style>

    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
    <script src="https://identity.netlify.com/v1/netlify-identity-widget.js" defer></script>
  </head>
  <body class="{{bodyClass}}">
    <header class="l-header">
        {% include "components/navigation.njk" %}
    </header>

    <main>
        {% block content %}
            <div class="l-container">
                <h1>{{title}}</h1>
                {{content | safe}}
            </div>
        {% endblock content %}
    </main>

    <footer class="l-footer">
      {% include "components/footer.njk" %}
    </footer>
  </body>
</html>