index.html

---
layout: default
color:
  primary: "#4c158a"
  primary-text: "#fff"
---

{% assign flatpak_apps = site.apps | where:"dist","flatpak" | sort_natural: 'title' %}
<div class="home main constrain">
  <h1>AppCenter</h1>
  <h2>Made for elementary OS</h2>
  <p>Get these {{ flatpak_apps | size }} curated apps and more on elementary AppCenter, the open, pay-what-you-can app store for indie developers. Each is open source and has been reviewed and curated by elementary to ensure a native, privacy-respecting, and secure experience.</p>
</div>

<div class="home apps">
  {% for app in flatpak_apps %}
    {% assign id = app.id | remove: '/' %}
    <a class="app button {{app.dist}}" href="{{site.baseurl}}/{{app.slug}}" title="{{app.summary}}" id="{{id}}" tabindex="0">
      <img width="64" height="64"
        {% for icon in app.icons %}
          {% if icon[0] == "64@2" %}
            srcset="{{icon[1]}} 2x"
          {% elsif icon[0] == "128" %}
            srcset="{{icon[1]}}"
          {% elsif icon[0] == "64" %}
            srcset="{{icon[1]}}"
          {% endif %}
        {% endfor %}
        src="https://cdn.rawgit.com/elementary/icons/c048cf1bdf9d7735638c1cfe1eea64831e46c83f/apps/64/application-default-icon.svg"
      alt="{{app.title}} icon" />

      <span class="title">{{ app.title }}</span>
      <span class="summary">{{ app.summary }}</span>
    </a>

    <style>
      .app[id="{{id}}"]:hover,.app[id="{{id}}"]:focus {
        background-color: {% if app.color.primary != "((color_primary))" %}{{app.color.primary}}{% else %}{{site.color.primary}}{% endif %};
        color: {% if app.color.primary-text != "((color_text))" %}{{app.color.primary-text}}{% else %}{{site.color.primary-text}}{% endif %};
      }
    </style>
  {% endfor %}
</div>

<footer>
  <div class="constrain">
    <a class="button" href="https://developer.elementary.io" target="_blank">Publish on AppCenter</a>
    <a class="button" href="https://elementary.io/" target="_blank">Get elementary OS</a>
  </div>
</footer>