alex.racine/themes/portfoliGor/assets/scss/_header.scss

///////////////////
//               //
//    HEADER     //
//               //
///////////////////

.main-header-full {
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  background: $dark-polar;
  height: 3em;
  line-height: 3em;
  box-shadow: 0 0 0.15em 0 rgba(0, 0, 0, 0.1);
}

.main-header {
  .avatar {
    height: 2rem;
    margin: auto 0.5rem auto auto;
    border-radius: 35%;

    @include breakpoint(tablet) {
      display: none;
    }

    @include breakpoint(mobile) {
      display: none;
    }
  }

  .avatar.hidden {
    display:none;
  }

  @include header-title-mobile

  @include breakpoint(laptop) {
    @include header-title-full
  }

  @include breakpoint(desktop) {
    @include header-title-full
  }

  article {
    flex-grow: 1;
  }

  .title {
  }

  nav.full {
    
    @include breakpoint(mobile) {
      display: none;
    }

    @include breakpoint(tablet) {
      display: none;
    }

    ul {
      display: flex;
      margin: 0 auto 0 auto;
      padding: 0 0 0 3rem;
      justify-content: flex-end;

      li {
        margin-right: .5rem;
        @include breakpoint(desktop) {
          margin-right: 1.5rem;
        }
      }
    }

    @include inline-list;

    .rss-icon {
      max-width: 18%;
    }
  }

  nav.mobile {
    @include breakpoint(desktop) {
      display: none;
    }

    @include breakpoint(laptop) {
      display: none;
    }
  }
  @include breakpoint(tablet) {
    @include mobile-nav;
  }
  @include breakpoint(mobile) {
    @include mobile-nav;
  }
}