---
layout: default
sitemap: false
author_profile: false
---

<style>

  .name {
    a { 
      color:  #222831;
    }
  }

  .link-style{
    a:link {
      text-decoration: none;
      /* color: "{{link-color}}"; */
    }

    a:visited {
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }

    a:active {
      text-decoration: underline;
    }
  }


  .center {
    margin:auto;
    max-height:250px; 
    place-items: center;
    text-align: center;
    max-width: 280px;
    align-items: center;
    list-style-type: none;
  }

  .extra-margin {
     margin-bottom: 1em;
  }

  .avatar {
    display: inline;
    float: center;
    margin-left: auto;
    margin-right: auto;
    width: 48px;
    height: 48px;
    margin-bottom: 1em;
    margin-top: auto;

    img {
      max-width: 130px;
      border-radius: 50%;

      @include breakpoint($large) {
        padding: 5px;
        border: 1px solid $border-color;
      }
    }
  }
  
</style>


{% assign author = page.author | default: page.authors[0] | default: site.author %}
{% assign author = site.data.authors[author] | default: author %}

<div class="center">

  <br>

  {% if author.avatar %}
    <div class="avatar">
      <a href="{{ author.home | default: '/' | absolute_url }}">
        <img src="{{ author.avatar | relative_url }}" alt="{{ author.name }}" itemprop="image" class="u-photo">
      </a>
    </div>
  {% endif %}

  <h3 class="name p-name link-style" itemprop="name">
    <a class="name u-url" rel="me" href="{{ author.home | default: '/' | absolute_url }}" itemprop="url">{{ author.name }}</a>
  </h3>
  {% if author.bio %}
    <div class="author__bio p-note link-style" itemprop="description">
      {{ author.bio | markdownify }}
    </div>
  {% endif %}


  {{ content }}

    {% if site.footer.links %}
      {% for link in site.footer.links %}
        {% if link.label and link.url %}
          <li class="link-style name"><a href="{{ link.url }}" rel="nofollow noopener noreferrer"><i class="{{ link.icon | default: 'fas fa-link' }} extra-margin link-style" aria-hidden="true"></i> {{ link.label }}</a></li>
        {% endif %}
      {% endfor %}
    {% endif %}
    <br>
    <a style="text-align: center;" href="/assets/images/qr.png" class="btn btn--success image-popup">Display QR Code</a>
    <br>
    <br>
    <a style="text-align: center;" href="/" class="btn btn--primary">Back to the home</a>


</div>