<!DOCTYPE html>

<html lang="en">
  <head>
    {% for url in VENDORED_CSS %}
    <link rel="stylesheet" type="text/css" href="{{ url }}" />
    {% endfor %}
    <style>
      @page {
        size: A4 portrait;
      }
      body {
        font-family: Roboto, -apple-system, Helvetica Neue, Helvetica, Arial,
          sans-serif;
      }
    </style>
    {% block styles %}{% endblock %}
    <title>{% block title %}{{ SITE_TITLE }}{% endblock %}</title>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    {% block head_scripts %}{% endblock %}
  </head>

  <body>
    <q-layout id="vue" view="hHh lpR lfr" v-cloak>
      <q-page-container>
        <q-page class="q-px-md q-py-lg" :class="{'q-px-lg': $q.screen.gt.xs}">
          {% block page %}{% endblock %}
        </q-page>
      </q-page-container>
    </q-layout>

    {% for url in VENDORED_JS %}
    <script src="{{ url }}"></script>
    {% endfor %}
    <!---->
    {% block scripts %}{% endblock %}
  </body>
</html>
