<div class="sn-page">
  <header class="sn-head">
    <a class="sn-brand" href="/">
      <img src="/static/img/sticknife-lockup.png" alt="Sticknife" width="760" height="500">
    </a>
  </header>

  <div class="sn-hair"></div>

  <section class="sn-gate">
    <div class="sn-gate-copy">
      <h1>Welcome to Sticknife</h1>
      <p class="sn-eyebrow">A Self-Hosted Pantheon</p>
      <p class="sn-lede">
        Here you will find my collection of tools, all of which are hosted on my own servers. I have built these tools
        to be useful to me, and I hope you will find them useful as well.
      </p>
      <p class="sn-lede">
        Nearly everything here is open source, available in the <a href="Gitknife" target="_blank">Gitknife</a>
        repository.
      </p>

    </div>

    <div class="sn-gate-card">
      $message
      $registration_form
    </div>
  </section>

  <div class="sn-baseline"></div>

  <div class="sn-band">
    <span class="sn-band-label">the pantheon</span>
  </div>
</div>

<div class="sn-field" id="sn-field">
  <svg class="sn-graph" id="sn-graph" aria-hidden="true"></svg>
  <p class="sn-hint" id="sn-hint">
    hover a seal to see its house &middot; click for the detail
  </p>
  <aside class="sn-drawer" id="sn-drawer" role="region" aria-live="polite"></aside>
  <div class="sn-drawers" id="sn-drawers" hidden>
    <div class="sn-rail" id="sn-rail"></div>
  </div>
  <noscript>
    <style>
      .sn-fallback[hidden] {
        display: grid;
      }

      .sn-field {
        height: auto;
      }

      .sn-hint {
        display: none;
      }
    </style>
  </noscript>
  $fallback
</div>

<div class="sn-page">
  <div class="sn-baseline"></div>

  <footer class="sn-foot">
    <div class="sn-maker">
      <p class="sn-thesis">We, the creators of gods.</p>
      <img src="/static/img/sticknife-monkey.png" alt="" width="300" height="440">
    </div>
    <div class="sn-baseline"></div>
    <div class="sn-colophon">
      <span>sticknife.com</span>
      <span>accounts and keys &mdash; charon.sticknife.com</span>
    </div>
  </footer>
</div>

<script type="application/json" id="sn-pantheon">$payload</script>
<script src="/static/js/d3.v7.min.js"></script>
<script src="/static/js/pantheon.js"></script>