{% import "macros.html" as macro %}

<!DOCTYPE html>
<html lang="{% if page.extra.lang %}{{ page.extra.lang }}{% else %}{{ lang }}{% endif %}" itemscope
  itemtype="http://schema.org/Blog">

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{% block title %}{{ config.title }}{% endblock title %}</title>

  {% if config.generate_rss %}
  <link rel="alternate" type="application/rss+xml" title="RSS" href="{{ get_url(path='rss.xml') }}">
  {% endif %}

  <meta name="description" itemprop="about" content="{{ config.description }}">
  <meta name="keywords" itemprop="keywords" content="{{ config.extra.keywords }}">
  <meta name="author" itemprop="author" content="{{ config.extra.author }}">
  <meta itemprop="headline" content="{{ config.title }}">
  <meta itemprop="copyrightYear" content="{{ config.extra.year }}">

  <link rel="icon" href="{{ get_url(path='images/favicon.ico') }}" type="image/x-icon">
  <link rel="manifest" href="{{ get_url(path='images/manifest.json') }}">
  <meta name="msapplication-TileColor" content="{{ config.extra.theme_color }}">
  <meta name="theme-color" content="{{ config.extra.theme_color }}">

  <meta property="og:title" content="{% block ogtitle %}{{ config.title }}{% endblock ogtitle %}">
  <meta property="og:description" content="{% block ogdesc %}{{ config.description }}{% endblock ogdesc %}">
  <meta property="og:url" content="{% block ogurl %}{{ config.base_url }}{% endblock ogurl%}">
  <meta property="og:site_name" content="{{ config.title }}">
  {% if config.extra.image %}
  <meta property="og:image" content="{% block ogimg %}{{ config.extra.image }}{% endblock ogimg %}">
  {% endif %}
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="{{ config.extra.author }}">
  <meta name="twitter:creator" content="{{ config.extra.author }}">
  <meta name="twitter:image:alt" content="{% block ogaltimg %}{{ config.title }}{% endblock ogaltimg %}">

  <style>
    @font-face {
      font-family: "Orbitron";
      font-weight: 700;
      font-display: swap;
      font-style: normal;
      src: url("orbitron-bold-webfont.woff") format("woff");
    }
    body {
      max-width: calc(100vw - 2em);
      width: 40em;
      margin: 0 auto;
      padding: 2em 0;
      background: #221714;
      color: #FEE;
      font: 20px/1.4 mono;
      text-align: center;
    }
    #logo {
      width: 200px;
      height: 200px;
    }
    h1,h2 {
      font: bold 30px/1.4 Orbitron;
    }
    section {
      text-align: justify;
      margin-top: 3em;
    }
    a {
      color: white;
    }
    a::after {
      content: "";
      display: inline-block;
      width: .8em;
      height: .8em;
      margin: 0 0 .2em .2em;
      background: transparent url(link.svg) center no-repeat;
    }
    .day {
      display: inline-block;
      width: 6em;
    }
    li {
      margin: 1em 0;
    }
    footer {
      margin-top: 3em;
    }
    .pagination {
      list-style: none;
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;
      gap: 1em;
    }
    .pagination a {
      text-decoration: none;
    }
    .pagination a.disabled {
      opacity: .6;
      cursor: default;
    }
    @media screen and (max-width: 370px) {
      .day { display: inline; width: auto; }
    }
  </style>
</head>

<body>
  <header>
    <a href="/" title="back to homepage" style="text-decoration: none">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 624 624" version="1.1" id="logo">
        <rect x="1.156" y="-0.188" width="576.313" height="576.343" fill="#000" />
        <rect x="143" y="240" width="97" height="288" style="fill:#001b18" />
        <rect x="528" y="432" width="96" height="192" style="fill:#001b18" />
        <rect x="528" y="47" width="96" height="97" style="fill:#01a08f" />
        <rect x="432" y="47" width="96" height="193" style="fill:#01a08f" />
        <rect x="336" y="47" width="96" height="97" style="fill:#01a08f" />
        <rect x="336" y="432" width="96" height="192" style="fill:#01a08f" />
        <rect x="240" y="336" width="96" height="288" style="fill:#01a08f" />
        <rect x="143" y="528" width="97" height="96" style="fill:#01564d" />
        <rect x="528" y="143" width="96" height="289" style="fill:#01a08f" />
        <rect x="432" y="528" width="96" height="96" style="fill:#01564d" />
        <rect x="240" y="47" width="96" height="289" style="fill:#01564d" />
        <rect x="432" y="240" width="96" height="288" style="fill:#02fae0" />
        <rect x="336" y="143" width="96" height="290" style="fill:#02fae0" />
        <text x="210" y="550" style="font: bold 140px Orbitron" fill="#fff" stroke="#01564d" stroke-width="8">R2C</text>
        <rect fill="none" stroke="#fff" stroke-width="7.63px" x="1.156" y="-0.188" width="576.313" height="576.343" />

        <g fill="none" stroke="#fff" stroke-width="1.2" stroke-linecap="round" style="transform: scale(15) translate(10px, 4px)">
          <!-- coffee icon from https://feathericons.com/ -->
          <path d="M18 8h1a4 4 0 0 1 0 8h-1"></path><path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"></path>
          <line x1="6" y1="1" x2="6" y2="4"></line>
          <line x1="10" y1="1" x2="10" y2="4"></line>
          <line x1="14" y1="1" x2="14" y2="4"></line>
        </g>
      </svg>
    </a>
    {% block header %}
    <h1>The Remote Roast Club</h1>
    {% endblock header %}
  </header>
  <main>
    {% block main %}
    {% for page in paginator.pages %}
    {{ macro::post_max(page=page) }}
    {% endfor %}

    {{ macro::paginator(ref=paginator, extra=config.extra) }}
    {% endblock main %}
  </main>

  <footer>
    {{ config.extra.year }} &copy;
    <a href="{{ config.base_url }}">{{ config.extra.author }}</a>
    |
    Built on <a href="https://getzola.org" rel="noopener" target="_blank">Zola</a>
  </footer>
  <script data-goatcounter="https://remoterost-club.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
</body>
</html>