{% extends "_layout.html" %}

{% block title %}about - banhus{% endblock %}

{% block extra_head %}
  {{ super() }}
  <style>
    .about-page {
      padding: 1rem;
      display: grid;
      gap: 2.5rem;
    }

    .about-intro h1 {
      font-size: 1.75rem;
      margin-bottom: 0.4rem;
    }

    .about-intro p {
      color: var(--muted);
      max-width: 66ch;
    }

    .about-grid {
      display: grid;
      gap: 6rem;
    }

    .about-section {
      display: grid;
      gap: 1.25rem;
    }

    .about-row {
      display: grid;
      gap: 1.25rem;
    }

    .about-media {
      order: 1;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }

    .about-media img {
      display: block;
      width: 100%;
      max-width: 220px;
      image-rendering: pixelated;
    }

    .about-content {
      order: 2;
    }

    .about-content h2 {
      margin: 0 0 0.6rem;
    }

    .about-content p,
    .about-content ol {
      color: var(--muted);
    }

    .about-content p + p {
      margin-top: 0.65rem;
    }

    .about-content ol {
      margin-top: 0.55rem;
      padding-left: 1.3rem;
      list-style-position: outside;
    }

    .about-content li + li {
      margin-top: 0.35rem;
    }

    @media (min-width: 760px) {
      .about-row {
        grid-template-columns: minmax(140px, 190px) minmax(0, 1fr);
        gap: 1.5rem;
        align-items: start;
      }

      .about-media {
        align-self: center;
      }

      .about-grid .about-section:nth-child(odd) .about-row {
        grid-template-columns: minmax(0, 1fr) minmax(140px, 190px);
      }

      .about-grid .about-section:nth-child(odd) .about-media {
        order: 2;
        justify-content: flex-end;
      }

      .about-grid .about-section:nth-child(odd) .about-content {
        order: 1;
      }
    }
  </style>
{% endblock %}

{% block content %}
<main class="about-page">
  <header class="about-intro">
    <h1>about banhus</h1>
    <p>
      <em>
        Markdown isn't cool. You know what's cool? Hyper Text Markup Language.
      </em>
    </p>
  </header>

  <div class="about-grid">
    <section class="about-section">
      <div class="about-row">
        <div class="about-media">
          {% include "_banhus/logo.html" %}
        </div>
        <div class="about-content">
        <h2>spec</h2>
        <ol>
          <li>
            banhus renders html and xml files using
            <a href="https://docs.rs/minijinja/latest/minijinja/">Jinja</a>
          </li>
          <li>
            md files are rendered to html using the nearest <code>_md.html</code> jinja template.
          </li>
          <li>
            banhus ignores files that are marked by an underscore
            <code>_like_this.txt</code> or <code>_like/this.txt</code>.
          </li>
          <li>
            all other files get copied straight from <code>src/</code> to <code>dist/</code>
          </li>
        </ol>
        </div>
      </div>
    </section>

    <section class="about-section">
      <div class="about-row">
        <div class="about-media">
          {% include "_banhus/logo.html" %}
        </div>
        <div class="about-content">
        <h2>themes</h2>
        <p>
          banhus makes no distinction between theme and content, it's all just simple webfiles in <code>src/</code>.
          Built-in themes are just starter templates.
          Run <code>banhus themes</code> to list them and <code>banhus init [theme]</code> to create a site.
        </p>
        </div>
      </div>
    </section>

    <section class="about-section">
      <div class="about-row">
        <div class="about-media">
          {% include "_banhus/logo.html" %}
        </div>
        <div class="about-content">
        <h2>the name</h2>
        <p>
          banhus is an
          <a href="https://en.wikipedia.org/wiki/List_of_kennings">Old English</a>
          poetic term for the human body.
          The literal meaning is "bone house".
        </p>
        </div>
      </div>
    </section>
  </div>
</main>
{% endblock %}