{% extends 'base.html' %}

{% block title %}About - MONEYINPOLITICS.wtf{% endblock %}

{% block styles -%}
<link rel="stylesheet" href="{% static 'styles/app.scss' %}">
{% endblock styles -%}

{% block scripts %}
{% script 'about' %}
{% endblock scripts %}

{% block content %}
<article>
  <header>
    <div class="masthead">
      <h1><a href="/">MONEYINPOLITICS.wtf</a></h1>
      <div class="description">
        America’s most comprehensive dictionary of campaign finance jargon
      </div>
    </div>
  </header>
  <section id="card-container" class="card-container"></section>
  <div class="card card--detail card--big card--explainer">
    <div class="card--headline">
      <div class="word">About this site</div>
    </div>
    <div class="card--body">
      <div class="card--definition-list">
        <div class="card--definition">
          <a href="/">MONEYINPOLITICS.wtf</a> is a free resource created by and for data journalists. Anyone is able to <a href="https://github.com/palewire/moneyinpolitics.wtf/issues/new?assignees=palewire&labels=enhancement&template=request-a-word.yaml&title=Request+a+word">request a definition</a>, <a href="https://github.com/palewire/moneyinpolitics.wtf/issues/new?assignees=palewire&labels=bug&template=flag-an-error.yaml&title=Flag+an+error">flag an error</a> or  <a href="https://github.com/palewire/moneyinpolitics.wtf/issues/new?assignees=palewire&labels=enhancement&template=add-a-word.yaml&title=Add+a+word">draft an entry</a>. All of the code that powers the site is available as <a href="https://github.com/palewire/moneyinpolitics.wtf/">open source</a>. Learn more about how you can contribute by reading our <a href="https://github.com/palewire/moneyinpolitics.wtf/blob/main/CONTRIBUTING.md">guide</a> to the site’s design.
        </div>
      </div>
    </div>
  </div>
  <section class="card--detail maintainers">
    <h3>Maintainers</h3>
    <div class="card-list">
    {% for obj in meta.byline %}
    <div class="card">
        <div class="card--headline">{{ obj.name }}</div>
        <div class="card--body">
        <div class="card--definition-list">
            <div class="card--definition">
                <div class="card--definition-text">
                    {{ obj.title }}
                </div>
            </div>
        </div>
        </div>
        <div class="card--actions">
        <div class="card--actions-border">
            <div class="card--action-item card--expand">
                <a href="{{ obj.url }}">Bio</a>
            </div>
        </div>
        </div>
    </div>
    {% endfor %}
    </div>
  </section>
</article>
{% endblock content %}