index.html

---
layout: default
---

<div class="hero-cover container d-flex flex-row p-5 mb-4 rounded-3 justify-content-between">
  <div class="col-lg-6 justify-content-center">
    <h1 class="display-5 text-white" style="font-weight: 500;">{{ site.greeting }}</h1>
    <p class="col-md-8 fs-4 mb-4 text-white">{{ site.description }}</p>
    <a href="{{ "/datasets" | relative_url }}" class="btn btn-primary btn-lg" role="button">Browse available open data</a>
  </div>
  <!--<img alt="Example homepage hero image" class="d-none d-md-block img-responsive rounded-circle" src="{{ site.baseurl }}{{ site.hero_image }}" style="max-height: 300px" />-->
</div>

<h3>Browse by Category</h3>
<div class="card-grid">
{% for category in site.dataset_categories %}
{% assign dataset_count = site.datasets | where:"category", category.name | size %}
  {% if category.featured == true %}
    {% capture logo_alt %}{{ category.name }}{% if category.logo_credit and category.logo_credit != empty %} logo by {{ category.logo_credit }}{% endif %}{% endcapture %}
    <a class="card border card-grid-item hover-overlay" href="{{ site.baseurl }}/categories/{{ category.name | slugify }}" title="{{ logo_alt }}">
            <div class="d-flex flex-row justify-content-end">
        <span class="badge bg-primary rounded-pill me-1">{{ dataset_count }}</span>
      </div>
      {% if category.logo and category.logo != empty %}
        <img class="card-img-top" src="{{ site.baseurl }}{{ category.logo }}" alt="{{ logo_alt }}">
      {% endif %}
      {{ category.name }}
    </a>
  {% endif %}
{% endfor %}
</div>