@import 'anchor';
@import 'colors';

#posts {
  background-color: rgba(0, 0, 0, 0.25);
  padding-bottom: 20px;

  > h1 {
    padding: 20px 0 20px 20px;
  }

  > h2 {
    font-size: 1.25em;
    padding: 10px 0 0 20px;
  }

  .post {
    border-left: 4px solid;

    &:nth-child(7n + 2) {
      border-left-color: $red;
    }

    &:nth-child(7n + 3) {
      border-left-color: $orange;
    }

    &:nth-child(7n + 4) {
      border-left-color: $yellow;
    }

    &:nth-child(7n + 5) {
      border-left-color: $green;
    }

    &:nth-child(7n + 6) {
      border-left-color: $cyan;
    }

    &:nth-child(7n + 7) {
      border-left-color: $purple;
    }

    &:nth-child(7n + 8) {
      border-left-color: $pink;
    }

    > h2 {
      padding-left: 20px;
      margin: 20px 0;
    }
  }
}
