alterNERDtive.github.io/_layouts/sidebar.html

{% include header.html %}

<div class="d-md-flex" style="height: 100vh">
  <div class="flex-self-stretch {% if site.style == 'dark' %}bg-gray-dark{% else %}border-bottom border-md-none border-md-right border-gray-light bg-white{% endif %} col-md-5 col-lg-4 col-xl-3 px-4 px-md-6 px-lg-7 py-6">
    <img src="{{ user.avatar_url }}" class="circle mb-3" style="max-width: 150px;">
    <h1 class="{% if site.style == 'dark' %}text-white{% endif %} mb-2 lh-condensed">{% if user.name %}{{ user.name }}{% else %}{{ user.login }}{% endif %}</h1>
    <p class="mb-3 f4 {% if site.style == 'dark' %}text-white{% else %}text-gray{% endif %}">
      {{ user.bio }}
    </p>
    <div class="f4 mb-6">
      {% if user.name %}
        <div class="d-flex flex-items-center mb-3">
          {% octicon mark-github height:20 class:"mr-2 v-align-middle" fill:{{ icon_color }} aria-label:GitHub %}
          <a href="https://github.com/{{ user.login }}" {% if site.style == 'dark' %}class="text-white"{% endif %}>
            @{{ user.login }}
          </a>
        </div>
      {% endif %}
      {% if user.email %}
        <div class="d-flex flex-items-center mb-3">
          {% octicon mail height:20 class:"mr-2 v-align-middle" fill:{{ icon_color }} aria-label:email %}
          <a href="mailto:{{ user.email }}" {% if site.style == 'dark' %}class="text-white"{% endif %}>
            {{ user.email }}
          </a>
        </div>
      {% endif %}
      {% if user.location %}
        <div class="d-flex flex-items-center {% if site.style == 'dark' %}text-white{% endif %} mb-3">
          {% octicon location height:20 class:"mr-2 v-align-middle" fill:{{ icon_color }} aria-label:Location %}
          {{ user.location }}
        </div>
      {% endif %}
      {% if user.hireable %}
        <span title="Hire me" class="d-inline-block f5 rounded-2 text-white bg-green py-1 px-2">Available for hire</span>
      {% endif %}
    </div>
  </div>

  <div class="col-md-7 col-lg-8 col-xl-9 px-4 py-6 px-lg-7">
    <div class="mx-auto" style="max-width: 900px;">

      <div class="f4 {% if site.style == 'dark' %}text-white{% endif %} mb-6">
        {% if page.is_post %}
          <div class="f4 {% if site.style == 'dark' %}text-white{% endif %}">
            <p class="f5"><a href="/" class="d-flex flex-items-center {% if site.style == 'dark' %}text-white{% endif %}">{% octicon chevron-left height:16 class:"mr-2 v-align-middle" fill:{{ icon_color }} aria-label:Home %}Home</a></p>
            <h1 class="f00-light lh-condensed">{{ page.title }}</h1>
            <p class="mb-5">Published {{ page.date | date: "%b %d, %Y"}}</p>
            {{ content }}
          </div>
        {% else %}
          {{ content }}
        {% endif %}
      </div>

      {% unless page.is_post %}
        {% include projects.html %}

        {% include interests.html %}

        {% unless post_size == 0 %}
          {% include thoughts.html %}
        {% endunless %}
      {% endunless %}
    </div>
  </div>
</div>

{% include footer.html %}