{% extends 'base_layout.html' %}

{% block head_extra %}{% endblock %}

{% block content %}

<div class="container-fluid p-3">
  <div class="row align-items-center" id="welcome-row">
    <div class="col-md-6">
      <h1 class="text-primary text-center mb-3">Cartograms</h1>
      <h3 class="text-success text-center mb-3">Maps and data reimagined</h3>
      <div class="text-center mb-3">
        <div><a href="/cartogram/create" class="btn btn-lg btn-primary">Make Your Cartogram</a></div>
        or
        <div><a href="/cartogram" class="btn btn-lg btn-secondary">View Examples</a></div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="w-100 text-center">
        <img src="{{ url_for('static', filename='img/worldcartogram.png') }}" class="img-fluid" />
        <p class="mt-1">A world population cartogram<a href="#disclaimer">*</a></p>
      </div>
    </div>
  </div>

  <div class="d-none d-md-block">
    <img src="{{ url_for('static', filename='img/infographic.svg') }}" class="img-fluid" />
  </div>

  <div class="text-center d-sm-block d-md-none">
    <img src="{{ url_for('static', filename='img/infographic-mobile.svg') }}" class="img-fluid w-75" />
  </div>

  <p class="small mt-5 text-justify" id="disclaimer">
    *Region boundaries and population data for the world cartogram are sourced directly from
    <a href="https://www.naturalearthdata.com">Natural Earth</a>,
    which adopts boundaries based on defacto status. We do not adopt a political stance on these boundaries.
  </p>
</div>


{% endblock %}

{% block javascript %}

{% endblock javascript %}