<!DOCTYPE html>
<html lang="de" dir="ltr" class="h-full">
  <head>    
    <link rel="canonical" href="{{ config.url }}{{ page.url }}">
    <link rel="stylesheet" href="/css/output.css" >

    <title>{% if title and title != 'Home' %}{{title}} - {% endif %}{{ config.title }}</title>

    <!-- Icons -->
    <!-- Enable if favicons installed into the static/img/ directory -->
    {# <link rel="shortcut icon" type="image/png" href="/images/x16-favicon.png" sizes="16x16" />
    <link rel="shortcut icon" type="image/png" href="/images/x32-favicon.png" sizes="32x32" />
    <link rel="shortcut icon" type="image/png" href="/images/x64-favicon.png" sizes="64x64" />#}
    <link rel="shortcut icon" type="image/png" href="/favicon.png" />
    <link rel="apple-touch-icon" type="image/png" href="/favicon.png" />

    <!-- Meta -->
    <meta name="description" content="{% if description %}{{ description }}{% else %}{{ config.description }}{% endif %}">
    <meta name="keywords" content="{% if keywords %}{{ keywords }}{% else %}{{ config.keywords }}{% endif %}">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-Language" content="en">
    <meta name="viewport" content="width=device-width,initial-scale=1">

    <!-- Facebook -->
    <meta property="og:title" content="{% if (title != 'Home') %}{{title}} - {% endif %}{{ config.title }}">
    <meta property="og:type" content="website">
    <meta property="og:description" content="{% if description %}{{ description }}{% else %}{{ config.description }}{% endif %}">
    <meta property="og:url" content="{{ config.url }}{{ page.url }}">
    <meta property="og:image" content="{% if image %}{{ image }}{% else %}{{ config.image }}{% endif %}">

    <!-- Twitter -->
    <meta name="twitter:card" content="{{ card }}">
    <meta name="twitter:site" content="{{ twitter }}">
    <meta name="twitter:title" content="{% if (title != 'Home') %}{{title}} - {% endif %}{{ config.title }}">
    <meta name="twitter:description" content="{% if description %}{{ description }}{% else %}{{ config.description }}{% endif %}">
    <meta name="twitter:creator" content="{{ twitter }}">
    <meta name="twitter:image" content="{{ config.url }}{{ page.url }}">
    <meta name="twitter:domain" content="{% if image %}{{ image }}{% else %}{{ config.image }}{% endif %}">

  </head>
  <body class="w-full h-full">
    <div class="
      max-w-screen-2xl
      mx-auto
      flex flex-row">
      <aside class="shrink-0 grow-0 basis-[26rem] sticky -top-40 flex flex-col">
          {% include "header.njk" %}
          {% include "sidenav.njk" %}
          {% include "footer.njk" %}
      </aside>

      <main class="px-8 pt-[7.5rem] min-h-full">
        <div>
          <h2 class="text-3xl font-bold pb-4">
              {{ title | safe }}
          </h2>
          {{ content | safe }}
        </div>
      </main>

      {# <div class="row-start-3 col-span-6 self-end">
      {% include "footer.njk" %}
      </div> #}
    </div>
  </body>
</html>
