/**

* Site layout settings
* Adapted from https://github.com/aweekj/Kiko-plus/blob/master/_sass/_site.scss
* and https://github.com/jekyll/minima/blob/master/_sass/minima/_layout.scss
*/

/**

* Main wrapper
*/

.main-wrapper {

max-width: 48rem;
padding: 2rem 1.3rem;
margin-left:  auto;
margin-right: auto;

@include media-query($on-desktop) {
  padding: 5rem 1rem 2rem;
}

}

/**

* Page header
*/
.header {
 &-title {
   margin: 0.3em 0;
   @include relative-font-size(2.25);
   line-height: 1.2em;
   font-weight: 600;

   a {
     color: $base-font-color;
     &:hover,
     &:focus {
       text-decoration: none;
     }
   }

   span {
     color: $oc-gray-5;
   }
 }

 &-nav {
   a {
     color: $oc-gray-7;
     text-transform: lowercase;
     margin-right: .3rem;

     &:hover,
     &:focus {
       text-decoration: none;
     }
   }
 }

}

.header-small {

text-align: left;
margin-bottom: .75rem;
@include relative-font-size(0.7);
font-weight: 600;
text-transform: uppercase;

a {
  color: $base-font-color;

  &:hover,
  &:focus {
    text-decoration: none;
  }
}

}

.page {

&-title {
  margin-bottom: 0.5rem;
  @include relative-font-size(1.9);
  line-height: 1.2em;
  font-weight: 600;

  @include media-query($on-desktop) {
    @include relative-font-size(2.25);
  }
}

&-date {
  margin-bottom: .5rem;
  @include relative-font-size(0.7);
}

&-tags {
  margin-top: 1.5rem;
  @include relative-font-size(0.8);
  color: lighten($base-font-color, 10%);
}

}

/**

* Post list
*/

.post-list {

&-item {
  padding: 4% 0;

  &:hover a {
    color: lighten($base-font-color, 10%);
  }

  a {
    color: $base-font-color;

    &:hover,
    &:focus {
      text-decoration: none;
    }
  }

  &-title {
    margin-bottom: .3rem;
    @include relative-font-size(1.6);
    font-weight: 600;
  }

  &-date {
    @include relative-font-size(.75);
  }

  &-desc {
    color: $base-font-color;
    margin-bottom: .25rem;
    font-size: 1rem;
  }
}

&-pagination {
  padding-top: 2rem;
  padding-bottom: 2rem;
  text-transform: lowercase;

  &-previous {
    float: left;
    padding-left: 2%;

    a {
      color: $base-font-color;

      &:hover,
      &:focus {
        color: lighten($base-font-color, 10%);
        text-decoration: none;
      }
    }
  }

  &-next {
    float: right;
    padding-right: 2%;
    a {
      color: $base-font-color;

      &:hover {
        color: lighten($base-font-color, 10%);
        text-decoration: none;
      }
    }
  }
}

}

/**

* Archive list
*/

.archive {

&-list {
  &-item {
    padding: 0.1rem;

    &:hover a {
      color: lighten($base-font-color, 10%);
    }

    a {
      color: $base-font-color;

      &:hover,
      &:focus {
        text-decoration: none;
      }
    }

    &-title {
      @include relative-font-size(1.1);
      font-weight: 400;
    }

    &-date {
      @include relative-font-size(.7);
    }
  }
}

}

/**

* Comments
*/

.comments-content {

padding: 1rem;
@include relative-font-size(0.9);

}

/**

* Footer
*/

.footer {

text-align: center;
@include relative-font-size(0.8);

}