ttimsmith/theboldreport.net

View on GitHub
_assets/stylesheets/on-inspiration.css.scss

Summary

Maintainability
Test Coverage
@import '_redbat/mixins';
$primary-color: #022A41;
$secondary-color: #CCA874;
$jazz-color: #E4097F;

.site__header {
  background-color: $primary-color;
  border-bottom: 1px solid rgba(white, .15);
  margin-bottom: 0;
  a {
    color: $secondary-color;
    &:hover {
      color: lighten($secondary-color, 10%);
    }
  }
}

.logo {
  .bold__first,
  .bold__third {
    fill: white;
  }
  .bold__second {
    fill: $secondary-color;
  }
}

.site__navigation {
  @media #{$small-only} {
    background-color: darken($primary-color, 3%);
  }
}

.header__search {
  .search-input {
    background-color: darken($primary-color, 3%);
    &:focus {
      background-color: darken($primary-color, 6%);
    }
  }
}

.post__header {
  background-color: $primary-color;
  margin-bottom: 1.5rem;
  padding: 1.2rem;
  width: 100%;
  @media #{$large-up} {
    margin-bottom: 3rem;
    padding: 2.5rem;
  }
}

.post__title {
  color: $secondary-color;
  font-size: 20vw;
  line-height: 60%;
  text-indent: 7vw;
}

.post__entry {
  position: relative;
  z-index: 1;
  @media #{$medium-up} {
    margin-left: auto;
    margin-right: auto;
    max-width: 768px;
  }
  @media #{$large-up} {
    max-width: 1000px;
  }
  @media #{$xxlarge-up} {
    -webkit-column-width: 34rem;
    -moz-column-width: 34rem;
    column-width: 34rem;
    max-width: none;
  }
}

.type-post .post__entry > p {
  margin-bottom: 0;
  text-indent: 1.5rem;
  &:first-child {
    margin-bottom: 0;
    text-indent: 0;
    &:first-letter {
      color: $jazz-color;
      float: left;
      font-size: 4.7rem;
      font-weight: 600;
      line-height: 1;
      margin: 0 .7rem .3rem 0;
    }
  }
}

.site__footer {
  background-color: $primary-color;
  .footer__logo {
    .bold__second {
      fill: $jazz-color;
    }
  }
  a {
    color: lighten($primary-color, 20%);
    &:hover,
    &:focus {
      color: $jazz-color;
    }
  }
  .icon {
    fill: $jazz-color;
  }
}

.button--primary {
  background: $jazz-color;
  &:hover,
  &:focus {
    background: darken($jazz-color, 5%);
  }
}