ttimsmith/theboldreport.net

@import '_redbat/mixins';
$primary-color: #392C3E;
$secondary-color: #DD2F4A;
$jazz-color: #2D4B67;
$text-color: rgba(white, .8);
$secondary-text-color: lighten($primary-color, 40%);

.site__header {
  background: $primary-color;
  border-bottom: 1px solid lighten($primary-color, 5%);
  margin-bottom: 0;
  position: relative;
  z-index: 1;
}

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

.site__author {
  color: $secondary-text-color;
}

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

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

.content__main-content {
  background: $primary-color;
}

.post {
  border-left: 20px solid $secondary-color;
  padding: 2rem 0;
  @media #{$medium-up} {
    margin: 0 auto;
    max-width: 1260px;
    width: 98%;
  }
}

a {
  color: $secondary-text-color;
  &:hover,
  &:focus {
    color: $secondary-color;
  }
}

.post__meta,
.post__meta a,
.post__meta a:hover,
.post__meta a:focus {
  color: $secondary-text-color;
}

.post__header {
  float: left;
  margin-bottom: 2rem;
  padding-left: 2rem;
  width: 98%;
  @media #{$medium-up} {
    max-width: 640px;
    position: relative;
    width: 80vw;
  }
  h1 {
    color: white;
  }
}

.post__title {
  font-size: 3rem;
}

.post__lead {
  color: $text-color;
  font-size: 2rem;
  font-weight: 300;
}

.post__entry {
  padding-left: 2rem;
  width: 98%;
  @media #{$medium-up} {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 40px;
    -moz-column-gap: 40px;
    column-gap: 40px;
  }
  @media #{$large-up} {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 40px;
    -moz-column-gap: 40px;
    column-gap: 40px;
  }
  h2,
  h3,
  p {
    width: 100%;
  }
  p {
    color: $text-color;
    margin-bottom: 0;
    + p {
      text-indent: 1.5rem;
    }
  }
  > p:nth-child(2) {
    text-indent: 0;
  }
}

.format-post .post__entry > p:first-child {
  display: none;
}

.post__closer .svg-icon path {
  fill: $secondary-text-color;
}

.site__footer {
  background: darken($primary-color, 10%);
  margin-top: 0;
  .icon {
    fill: $secondary-color;
  }
}

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

.footer__logo .bold__second {
  fill: $secondary-color;
}