/*
 * .post-index (et al) -- utility classes
 */

.post-index
  &
    margin: 0 auto 4em auto
    position: relative
    padding-top: 4em
    font-size: 0.9em

  .container
    overflow: hidden
    max-width: $page-width
    margin: 0 auto

  h3
    +caps-font
    color: $gray
    font-size: 1em

.post-index-item
  display: block
  overflow: hidden
  padding: 6px 20px
  border-top: solid 1px $hairline

  &, &:hover, &:focus
    box-shadow: none

  &:hover, &:focus
    .article
      transition: none

  .date
    display: block

  .date
    width: 100px
    font-size: 0.8em
    color: $gray

  @media (min-width: 768px)
    padding-left: 0
    padding-right: 0

    .date, .tag
      margin-top: 0.2em

    .date, article
      float: left

    .tag
      float: right

  .article
    color: $text
    margin-right: 3px
    transition: all 100ms linear

  &:hover .article
    color: $accent

  &:nth-of-type(1) .article,
  &:nth-of-type(2) .article,
  &:nth-of-type(3) .article,
  &:nth-of-type(4) .article
    +bold-font

  .tag
    color: $gray
    font-weight: normal
    font-size: 0.8em