ttimsmith/theboldreport.net

// -------------------------------
// MAIN CONTENT
// -------------------------------

.home-posts {
  &.type-post {
    margin-bottom: 8rem;
  }
  .post {
    position: static;
  }
}

.post {
  position: relative;
}

.post__header {
  h1,
  h2 {
    width: 100%;
  }
  h1 + h2 {
    margin-top: 0;
  }
}

.post__meta {
  color: lighten($dark-color, 25%);
  display: block;
  font-size: .8rem;
  line-height: 1;
  margin-bottom: .5rem;
  a,
  a:hover,
  a:focus {
    color: lighten($dark-color, 25%);
  }
  @media #{$medium-up} {
    font-size: .75rem;
  }
  .post__lead + & {
    margin-top: .8rem;
  }
}

.post__footer {
  color: lighten($dark-color, 25%);
  font-size: .8rem;
  margin-top: 2rem;
  @media #{$medium-up} {
    font-size: .75rem;
  }
  .author {
    border-top: 1px solid $border-color;
    margin-top: 1.5rem;
    width: 100%;
  }
}

.post__tags {
  display: block;
  a,
  a:hover,
  a:focus {
    color: lighten($dark-color, 25%);
  }
}

// Format Post -------------------

.format-post {
  .post__header {
    margin-bottom: 1.5rem;
  }
  h1 {
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1;
    margin: 0;
    a {
      color: $dark-color;
      text-decoration: none;
      &:hover {
        border-bottom: 0;
        color: $link-color;
      }
    }
  }
}

.post__subtitle {
  color: lighten($dark-color, 20%);
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.1;
}


// Format Link -------------------
.format-link {
  .post__header {
    margin-bottom: 1.2rem;
  }
  h1 {
    font-size: 1.7rem;
    font-weight: normal;
    line-height: 1.1;
    margin-bottom: .3rem;
    a {
      text-decoration: none;
    }
    @media #{$medium-up} {
      font-size: 1.6rem;
    }
  }
  .arrow {
    color: lighten($dark-color, 50%);
    font-size: 1.3rem;
    line-height: 100%;
    margin-left: $spacing-xs;
    vertical-align: middle;
  }
  .post__tags {
    margin-top: 1rem;
  }
}

.post__closer {
  margin: 5rem auto 0;
  width: 50px;
  .svg-icon {
    path {
      fill: lighten($border-color, 1%);
    }
  }
}

// ArtDirect Post ----------------
.format-artdirect {
  background: rgba($slate, .03);
  padding: 10rem 0;
  position: relative;
  transition: box-shadow 500ms ease;
  .post__title {
    font-size: 2.5rem;
    font-weight: 300;
    a {
      text-decoration: none;
    }
  }
  .post__lead {
    @extend %sans;

    color: lighten($dark-color, 20%);
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.4;
  }
}

.type-artdirect {
  h1 {
    font-size: 2.4rem;
    font-weight: 600;
  }
}

.artdirect__type {
  color: white;
  font-size: 1.4rem;
  font-style: italic;
  padding: 30px 45px;
  position: absolute;
  right: 0;
  top: 0;
}

.custom-post__footer {
  margin-top: 1rem;
  text-align: center;
  .post__meta {
    margin: 0;
  }
  .post__tags {
    margin-top: .4rem;
  }
}

// Post Author -------------------

.post__author {
  margin-top: 6rem;
  .author {
    border: 0;
    padding: 0;
    &:before {
      background-color: $border-color;
      content: '';
      display: block;
      height: 2px;
      position: absolute;
      top: -2.5rem;
      width: 40%;
    }
  }
}

.authors {
  .author {
    &:last-child {
      border-bottom: 0;
      padding-bottom: 0;
    }
  }
}

.author {
  align-items: flex-start;
  border-bottom: 1px solid $border-color;
  display: flex;
  padding: 1rem 0;
  position: relative;
  p {
    color: $body-color;
    font-size: .95rem;
    @media #{$medium-up} {
      font-size: .85rem;
    }
  }
}

.author__picture {
  border-radius: 5px;
  float: left;
  margin-right: 1.5rem;
  margin-top: .4rem;
  width: 70px;
  @media #{$medium-up} {
    width: 130px;
  }
}

.author__name {
  color: $body-color;
  font-size: 1.2rem;
  margin: 0;
  position: relative;
  text-transform: none;
  width: 100%;
}

.author__title {
  color: lighten($body-color, 20%);
  font-size: 1rem;
  font-weight: normal;
  margin-left: .3rem;
}

.author--single {
  border-bottom: 1px solid $border-color;
  padding-top: 0;
  .author__name {
    font-size: 1.4rem;
  }
  .author__title {
    font-size: 1.2rem;
  }
  p {
    font-size: .9rem;
  }
}

// -------------------------------
// SOCIAL LINKS
// -------------------------------
$twitter-color: #1DA1F2;
$facebook-color: #3B5998;
$reddit-color: #FF4500;

.social-links {
  display: flex;
  list-style: none;
  margin-bottom: 1rem;
  width: 100%;
  li {
    border-bottom: 1px solid $border-color;
    border-right: 1px solid $border-color;
    border-top: 1px solid $border-color;
    flex: 1;
    font-size: .75rem;
    margin: 0;
    padding: 0;
    &:first-child {
      border-left: 1px solid $border-color;
    }
    &:last-child {
      padding: 0;
    }
  }
  a {
    color: lighten($dark-color, 25%);
    display: inline-block;
    padding: .4rem .7rem;
    text-align: center;
    text-decoration: none;
    width: 100%;
    &:focus {
      outline: 0;
    }
    .icon {
      transition: fill 300ms ease-in-out;
      vertical-align: text-top;
      @media #{$medium-up} {
        fill: lighten($dark-color, 25%);
      }
    }
  }
  .social--twitter:hover,
  .social--twitter:focus {
    color: $twitter-color;
    .icon {
      fill: $twitter-color;
    }
  }
  .social--facebook:hover,
  .social--facebook:focus {
    color: $facebook-color;
    .icon {
      fill: $facebook-color;
    }
  }
  .social--reddit:hover,
  .social--reddit:focus {
    color: $reddit-color;
    .icon {
      fill: $reddit-color;
    }
  }
}

@media #{$small-only} {
  .social--twitter {
    .icon {
      fill: $twitter-color;
    }
  }
  .social--facebook {
    .icon {
      fill: $facebook-color;
    }
  }
  .social--reddit {
    .icon {
      fill: $reddit-color;
    }
  }
}

.social__label {
  display: none;
  @media #{$medium-up} {
    display: inline-block;
    margin-left: .2rem;
  }
}

// Related Posts ----------------
.related-posts {
  .post-list {
    width: 100%;
  }
  .post-list__item {
    font-size: 1rem;
    line-height: 1.2;
    a {
      @extend %sans-con;

      font-weight: 600;
    }
    .pubdate {
      display: block;
      font-size: .8rem;
      margin-top: .3rem;
      @media #{$medium-up} {
        font-size: .75rem;
      }
    }
  }
}

.related-posts__title {
  font-size: 1rem;
  margin-top: 1.5rem;
  width: 100%;
  &:before {
    display: none;
  }
}
// Footnotes ---------------------

.footnotes {
  margin: 2.5rem 0;
  ol {
    margin: 0 0 0 2rem;
    width: 83%;
    li {
      font-size: .9rem;
      margin: 0;
      padding: 0;
      @media #{$medium-up} {
        font-size: .8rem;
      }
      code {
        font-size: .8rem;
      }
    }
  }
  hr {
    background: $border-color;
    display: block;
    margin: 20px 0;
    width: 150px;
  }
}

// Media Queries on Post Type ----

h1,
h2,
h3,
h4,
h5,
ol,
ul,
hr,
.post__header,
.post__footer,
.post__entry > p,
.search-results-list > p,
.page__entry > p,
.highlight,
.extendout figcaption,
.footnotes,
.pagination,
.site__footer small,
.author,
.fullwidth,
.page__search {
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  @media #{$large-up} {
    width: 65%;
  }
}