github-style/layouts/partials/user-profile.html

{{ partial "menus.html" . }}
<div class="container-xl px-3 px-md-4 px-lg-5">
  <div class="gutter-condensed gutter-lg flex-column flex-md-row d-flex">
    <div class="flex-shrink-0 col-12 col-md-3 mb-4 mb-md-0">
      <div class="h-card mt-md-n5">
        <div class="user-profile-sticky-bar js-user-profile-sticky-bar d-none d-md-block" id="headerStuck">
          <div class="user-profile-mini-vcard d-table">
            <span class="user-profile-mini-avatar d-table-cell v-align-middle lh-condensed-ultra pr-2">
              {{ with $.Site.Params.avatar }}
              <img class="rounded-1 avatar-user" height="32" width="32" src="{{ $.Site.Params.avatar }}">
              {{ else }}
              <img class="rounded-1 avatar-user" height="32" width="32" src="{{ "images/avatar.png" | absURL }}">
              {{ end }}
            </span>
            <span class="d-table-cell v-align-middle lh-condensed">
              <strong>{{ .Site.Params.author }}</strong>
            </span>
          </div>
        </div>
        <div class="clearfix d-flex d-md-block flex-items-center mb-4 mb-md-0">
          <div class="position-relative d-inline-block col-2 col-md-12 mr-3 mr-md-0 flex-shrink-0" style="z-index:4;">
            {{ with $.Site.Params.avatar }}
            <a href="{{ $.Site.Params.avatar }}">
              <img style="height:auto;" alt="Avatar" width="260" height="260" id="headerImg"
                class="avatar avatar-user width-full border bg-white" src="{{ $.Site.Params.avatar }}">
            </a>
            {{ else }}
            <a href="{{ "images/avatar.png" | absURL }}">
              <img style="height:auto;" alt="Avatar" width="260" height="260" id="headerImg"
                class="avatar avatar-user width-full border bg-white" src="{{ "images/avatar.png" | absURL }}">
            </a>
            {{ end }}
          </div>

          <div
            class="vcard-names-container float-left col-10 col-md-12 pt-1 pt-md-3 pb-1 pb-md-3 js-sticky js-user-profile-sticky-fields"
            data-original-top="0px" style="position: sticky;">
            <h1 class="vcard-names pl-2 pl-md-0">
              <span class="p-name vcard-fullname d-block overflow-hidden">{{ .Site.Params.author }}</span>
              {{ if .Site.Params.github }}
              <span class="p-nickname vcard-username d-block">{{ .Site.Params.github }}</span>
              {{ end }}
            </h1>
          </div>
        </div>

        <div class="p-note user-profile-bio mb-3 js-user-profile-bio f4">
          <div>{{ .Site.Params.Description }}</div>
        </div>

        <div class="d-flex flex-column">
          <div class="js-profile-editable-area d-flex flex-column d-md-block">
            <ul class="vcard-details">
              {{ if .Site.Params.location }}
              <li class="vcard-detail pt-1 css-truncate css-truncate-target hide-sm hide-md">
                <svg class="octicon octicon-location" viewBox="0 0 16 16" version="1.1" width="16" height="16">
                  <path fill-rule="evenodd"
                    d="M11.536 3.464a5 5 0 010 7.072L8 14.07l-3.536-3.535a5 5 0 117.072-7.072v.001zm1.06 8.132a6.5 6.5 0 10-9.192 0l3.535 3.536a1.5 1.5 0 002.122 0l3.535-3.536zM8 9a2 2 0 100-4 2 2 0 000 4z">
                  </path>
                </svg>
                <span class="p-label">{{ .Site.Params.location }}</span>
              </li>
              {{ end }}

              {{ if .Site.Params.email }}
              <li class="vcard-detail pt-1 css-truncate css-truncate-target ">
                <svg class="octicon octicon-mail" viewBox="0 0 16 16" version="1.1" width="16" height="16">
                  <path fill-rule="evenodd"
                    d="M1.75 2A1.75 1.75 0 000 3.75v.736a.75.75 0 000 .027v7.737C0 13.216.784 14 1.75 14h12.5A1.75 1.75 0 0016 12.25v-8.5A1.75 1.75 0 0014.25 2H1.75zM14.5 4.07v-.32a.25.25 0 00-.25-.25H1.75a.25.25 0 00-.25.25v.32L8 7.88l6.5-3.81zm-13 1.74v6.441c0 .138.112.25.25.25h12.5a.25.25 0 00.25-.25V5.809L8.38 9.397a.75.75 0 01-.76 0L1.5 5.809z">
                  </path>
                </svg>
                <a class="u-email link-gray-dark " href="mailto:{{ .Site.Params.Email }}">{{ .Site.Params.Email }}</a>
              </li>
              {{ end }}

              <li class="vcard-detail pt-1 css-truncate css-truncate-target ">
                <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16">
                  <path fill-rule="evenodd"
                    d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z">
                  </path>
                </svg>
                {{ if .Site.Params.url }}
                <a rel="nofollow me" class="link-gray-dark" href="{{ .Site.Params.url }}">{{ .Site.Params.url }}</a>
                {{ else }}
                <a rel="nofollow me" class="link-gray-dark" href="{{ .Site.BaseURL }}">{{ .Site.BaseURL }}</a>
                {{ end }}
              </li>
            </ul>
          </div>
        </div>

        <div class="border-top color-border-secondary pt-3 mt-3 clearfix hide-sm hide-md">
          <h2 class="mb-2 h4">Organizations</h2>
          {{ if .Site.Params.github}}
          <a class="avatar-group-item" href="https://github.com/{{ .Site.Params.github }}">
            <img alt="@github" width="32" height="32" src="{{ "images/github.png" | absURL }}" class="avatar">
          </a>
          {{ end }}

          {{ if .Site.Params.twitter}}
          <a class="avatar-group-item" href="https://twitter.com/{{ .Site.Params.twitter }}">
            <img alt="@twitter" width="32" height="32" src="{{ "images/twitter.png" | absURL }}" class="avatar">
          </a>
          {{ end }}

          {{ if .Site.Params.facebook}}
          <a class="avatar-group-item" href="https://facebook.com/{{ .Site.Params.facebook }}">
            <img alt="@facebook" width="32" height="32" src="{{ "images/facebook.png" | absURL }}" class="avatar">
          </a>
          {{ end }}

          {{ if .Site.Params.linkedin }}
          <a class="avatar-group-item" href="https://linkedin.com/in/{{ .Site.Params.linkedin }}">
            <img alt="@linkedin" width="32" height="32" src="{{ "images/linkedin.png" | absURL }}" class="avatar">
          </a>
          {{ end }}

          {{ if .Site.Params.instagram }}
          <a class="avatar-group-item" href="https://instagram.com/{{ .Site.Params.instagram }}">
            <img alt="@instagram" width="32" height="32" src="{{ "images/instagram.png" | absURL }}" class="avatar">
          </a>
          {{ end }}

          {{ if .Site.Params.tumblr }}
          <a class="avatar-group-item" href="https://{{ .Site.Params.tumblr }}.tumblr.com/">
            <img alt="@tumblr" width="32" height="32" src="{{ "images/tumblr.png" | absURL }}" class="avatar">
          </a>
          {{ end }}

          {{ if .Site.Params.stackoverflow }}
          <a class="avatar-group-item" href="https://stackoverflow.com/u/{{ .Site.Params.stackoverflow }}">
            <img alt="@stackoverflow" width="32" height="32" src="{{ "images/stackoverflow.png" | absURL }}" class="avatar">
          </a>
          {{ end }}

          {{ if .Site.Params.links }}
          {{ range .Site.Params.links }}
          {{ if .icon }}
          <a class="avatar-group-item" href="{{ .href }}">
            <img alt="@{{ .title }}" width="32" height="32" src="{{ .icon }}" class="avatar">
          </a>
          {{ else }}
          <a class="avatar-group-item" href="{{ .href }}">
            <img alt="@{{ .title }}" width="32" height="32" src='{{ "images/link.png" | absURL }}' class="avatar">
          </a>
          {{ end }}
          {{ end }}
          {{ end }}

          {{ if .Site.Params.rss }}
          <a class="avatar-group-item" href="{{ "index.xml" | absURL }}">
            <img alt="@rss" width="32" height="32" src="{{ "images/rss.png" | absURL }}" class="avatar">
          </a>
          {{ end }}
        </div>
      </div>
    </div>

    <div class="flex-shrink-0 col-12 col-md-9 mb-4 mb-md-0">
      {{ partial "mobile-menus.html" . }}
      {{ if .IsHome }}
      {{ block "overview" . }}{{ end }}
      {{ else }}
      {{ block "posts" . }}{{ end }}
      {{ end }}
    </div>
  </div>
</div>
<script>
window.onscroll = function (e) {
  const headerImg = document.querySelector('#headerImg');
  if (headerImg.getBoundingClientRect().bottom <= 0) {
    document.querySelector('#headerStuck').classList.add('is-stuck');
  } else {
    document.querySelector('#headerStuck').classList.remove('is-stuck');
  }
};
</script>