ttimsmith/theboldreport.net

// -------------------------------
// HEADER
// -------------------------------

.site__header {
  border-bottom: 1px solid $border-color;
  display: flex;
  flex-direction: column;
  margin-bottom: 3rem;
  min-height: 60px;
  @media #{$medium-up} {
    flex-direction: row;
    padding: .4rem 1rem;
  }
}

.site__branding {
  order: 2;
  @media #{$small-only} {
    margin: 1.2rem auto;
    width: 90%;
  }
  @media #{$medium-up} {
    margin: auto 1.5rem auto auto;
    text-align: left;
  }
}

.logo {
  display: block;
  max-height: 27px;
  width: 200px;
  @media #{$medium-up} {
    max-height: 24px;
    width: 180px;
  }
  .bold__first,
  .bold__third {
    fill: $body-color;
  }
  .bold__second {
    fill: $link-color;
  }
}

.site__navigation {
  flex: 1;
  order: 1;
  @media #{$small-only} {
    background-color: $border-color;
    padding: .8rem 0;
  }
  @media #{$medium-up} {
    margin-bottom: auto;
    margin-right: $spacing-m;
    margin-top: auto;
    order: 2;
  }
}

.primary-navigation {
  line-height: 1;
  margin: 0;
  text-align: left;
  width: 100%;
  @media #{$small-only} {
    margin: 0 auto;
    width: 90%;
  }
  li {
    @extend %sans;

    display: inline;
    font-size: .9rem;
    list-style-type: none;
    margin-left: 0;
    margin-right: .8rem;
    padding: 0;
    @media #{$medium-up} {
      font-size: .75rem;
    }
    &:last-child {
      margin-right: 0;
    }
  }
}

// Header Search -----------------
.header__search {
  display: none;
  flex: 0 1 25%;
  margin-bottom: 0;
  order: 3;
  position: relative;
  .search-results-list {
    max-height: 300px;
    overflow-y: scroll;
  }
  .search-results-list--mini {
    h3 {
      font-size: 1rem;
      margin-bottom: .5rem;
    }
    p {
      font-size: .8rem;
      line-height: 1.4;
      width: 100%;
    }
    .pubdate {
      font-size: .7rem;
    }
  }
  @media #{$medium-up} {
    display: block;
  }
}

.header-search__title {
  border-bottom: 1px solid $border-color;
  color: $body-color;
  font-size: 1.1rem;
  margin-bottom: 1rem;
  margin-top: 0;
  padding-bottom: .5rem;
}