{% if site.layout == 'stacked' %}
  {% assign metadata_styles = 'd-md-inline-block mx-3 mb-1 mb-md-0' %}
{% else %}
  {% assign metadata_styles = 'd-flex flex-items-center mb-3' %}
{% endif %}

<a href="https://trnck.dev" aria-label="Back to main site">
  <picture>
    <source class="circle mb-3 logo" width="150" srcset="https://trnck.dev/assets/img/logo.avif" />
    <img class="circle mb-3 logo" width="150" src="https://trnck.dev/assets/img/logo.png" alt="" />
  </picture>
</a>

<h1 class="{% if site.style == 'dark' %}text-white{% endif %} mb-2 lh-condensed"><a href="{{ site.url }}{{ site.baseurl | append:'/' }}">{% if site.title %}{{ site.title }}{% endif %}</a></h1>
<p class="mb-3 f4 {% if site.style == 'dark' %}text-white{% else %}text-gray{% endif %}">
  {{ user.bio }}
</p>

{% if include.metadata %}
  <div class="f4 mb-6">
    {% if site.user.name %}
      <div class="{{ metadata_styles }}">
        {% octicon mark-github height:20 class:"mr-2 v-align-middle" fill:{{ icon_color }} aria-label:GitHub %}
        <a href="https://github.com/{{ site.user.login }}" {% if site.style == 'dark' %}class="text-white"{% endif %}>
          @{{ site.user.login }}
        </a>
      </div>
    {% endif %}
    {% if site.social_media %}
      <div class="d-flex flex-wrap flex-items-start {% if site.layout == 'stacked' %}flex-justify-center mt-1 mt-md-3{% endif %}">
        {% for account in site.social_media %}
          <div class="{% unless forloop.last == true %}mr-3{% endunless %} mb-3">
            {% assign service_shortname = account[0] %}
            {% assign service = site.data.social_media[service_shortname] %}
            <a
              {% if service.profile_url_prefix != "" %}
                href="{{ service.profile_url_prefix }}{{ account[1] }}"
              {% else %}
                href="{{ site.url }}{{ site.baseurl | append:'/' }}{{ account[1] }}"
              {% endif %}
              {% if service.profile_url_prefix != "" %} target="_blank" {% endif %}
              class="tooltipped tooltipped-se"
              aria-label="{{ service.name }}: {{ account[1] }}"
            >
              {{ service.icon_svg }}<span class="d-none">{{ service.name }}</span>
            </a>
          </div>
        {% endfor %}
      </div>
    {% endif %}
  </div>
{% endif %}