{% extends "_layout.html" %}

{% block title %}banhus{% endblock %}

{% block content %}
  <main class="page hero-main">
    <section class="hero-logo">
      {% include "_banhus/logo.html" %}
    </section>
    <section class="hero-copy">
      <div class="hero-copy-top">
        <h1>bānhūs</h1>
        <div class="hero-subtitles">
          <span><em>"bone house"</em></span>
        </div>
      </div>
      <p>an ultra lightweight, ultra expressive SSG</p>
      <div class="install-wrap" onclick="copyInstall()" title="click to copy">
        <code>cargo install banhus</code>
        {% include "_svg/copy_icon.html" %}
        {% include "_svg/check_icon.html" %}
      </div>
    </section>
  </main>
<script>
  function copyInstall() {
    navigator.clipboard.writeText('cargo install banhus');
    document.getElementById('copy-icon').style.display = 'none';
    var check = document.getElementById('check-icon');
    check.style.display = 'block';
    setTimeout(function() {
      check.style.display = 'none';
      document.getElementById('copy-icon').style.display = '';
    }, 1500);
  }
</script>
{% endblock %}