<!DOCTYPE html>
<html lang="en">
  <head>
    {% include header.html %}
    <style>
      @import "/css/paramount-dark.css";
    </style>
    <style>
      @import "/css/paramount-light.css" (prefers-color-scheme: light);
    </style>
    <link rel="stylesheet" href="/css/page.css" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/katex@0.15.3/dist/katex.min.css"
      integrity="sha256-TThEtR+XalhWKkfF383YLOrI50NGNeIqrzS+q08afrY="
      media="print"
      onload="this.media='all'"
      crossorigin="anonymous"
    />

    <title>{{ page.title }}</title>
  </head>

  <body>
    <div class="vertical">
      <div class="contents">
        {% if page.title%}
        <h1 id="mainheader">{{page.title}}</h1>
        {% endif %} {{ content | safe | inject_anchors }}
      </div>
      <footer>
        <p>
          Agatha Valentine Lovelace<br />{{ page.date | date_to_string:
          "ordinal", "US" }}
        </p>
        <div>
          <a href="/">Main Page</a>
          <a href="/pages">All Pages</a>
        </div>
      </footer>
    </div>
    <div class="side">
      {% capture toc %} {% toc %} {% endcapture %}
      <!-- Only show table of contents if not empty -->
      {% if toc contains "toc-entry" %}
      <div class="toc-full">
        <p><i>Contents</i></p>
        {{ toc }}
      </div>
      {% endif %}
      <div class="navigation">
        <p><i>Other Pages</i></p>
        <ul>
          {% for page in site.pages %} {% if page.hide != true %}
          <li>
            <a href="{{ page.url }}">{{ page.title }}</a>
          </li>
          {% endif %} {% endfor %}
        </ul>
      </div>
    </div>
  </body>
</html>
