jimeh.github.io/_sass/_layout.scss

.site-header {
  font-family: $heading-font-family;
  font-weight: bold;
  position: fixed;
  top: 0px;
  text-align: center;

  bottom: 0px;
  width: 100%;

  a:hover {
    text-decoration: none;
  }

  .site-header-container {
    width: 580px;
    position: absolute;
    top: 50%;
    left: 50%;
    @include transform(translate(-50%, -50%));
  }
}

.site-avatar {
  width: 128px;
  height: 128px;
  float: left;
  @include border-radius(400px);
}

.content {
  display: block;
  padding: 9px 0px 0px 155px;
  position: relative;
  text-align: left;
}

.site-title {
  font-size: 3.36em;
  position: relative;

  .site-name {
    color: $name-color;
    text-transform: uppercase;
  }

  .site-nickname {
    color: $nickname-color;
    text-transform: lowercase;
  }

  .site-description {
    font-size: 0.383em;
    color: $sub-title-color;
    text-transform: uppercase;
    position: absolute;
    top: 49px;
    left: 11px;
  }
}

.site-links {
  font-size: 22px;
  padding: 6px 0px 0px 6px;

  a {
    float: left;
    color: $link-color;
    position: relative;
    padding: 0px 7px;
    white-space: nowrap;

    .link-text {
      visibility: hidden;
      font-size: $base-font-size;
      position: absolute;
      top: 30px;
      left: 50%;
      @include transform(translate(-50%, 0%));
    }
    &:hover {
      color: $brand-color-light;
      .link-text {
        visibility: visible;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .site-links {
    padding: 6px 0px 0px 0px;
    margin-left: -2px;

    a {
      float: none;
      line-height: 22px;
      padding: 0px;
      margin: 0px 10px 0px 0px;

      .link-text {
        margin-left: 4px;
        visibility: visible;
        position: static;
        display: inline-block;
        @include transform(translate(0%, -11%));
      }
    }
  }
}

@media screen and (max-width: 615px) {
  .site-header {
    .site-header-container {
      width: 410px;
    }
  }

  .site-avatar {
    width: 80px;
    height: 80px;
  }

  .content {
    padding: 4px 0px 0px 98px;
  }

  .site-title {
    font-size: 2.43em;

    .site-description {
      top: 36px;
      left: 9px;
    }
  }

  .site-links {
    font-size: 16px;

    a {
      .link-text {
        @include transform(translate(0%, 0%));
      }
    }
  }
}

@media screen and (max-width: 419px) {
  .site-header {
    .site-header-container {
      width: 320px;
    }
  }

  .site-avatar {
    width: 128px;
    height: 128px;
    float: none;
  }

  .content {
    padding: 0px 10px 0px 10px;
    text-align: center;
  }

  .site-title {
    font-size: 2.14em;

    .site-description {
      top: 32px;
      left: 7px;
    }
  }

  .site-links {
    font-size: 14px;
    padding: 6px 0px 0px 0px;
    margin-left: 0px;
    text-align: center;

    a {
      padding: 0px;
      margin: 0px 5px;

      .link-text {
        @include transform(translate(0%, 0%));
      }
    }
  }
}