/**

* Site header
*/

.site-header {

height: 44px;
line-height: 44px;

background: $dark-background-color;
background: rgba(0, 0, 0, 0.8);

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

// Fancy affect
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);

// Positioning context for the mobile navigation icon
position: relative;

}

.site-title {

color: $light-text-color !important;
font-size: 22px;
font-weight: 300;
letter-spacing: -1px;
margin-bottom: 0;
float: left;

:hover {
  opacity: $a-hover-opacity; 
  text-decoration: none;
}

}

.site-nav {

float: right;
font-size: $nav-font-size;

a:hover {
  opacity: $a-hover-opacity; 
  text-decoration: none;
}

.page-link {
  color: $light-text-color;
  line-height: $base-line-height;

  // Gaps between nav items, but not on the last one
  &:not(:last-child) {
    margin-right: 20px;
  }
}

@include media-query($on-palm) {
  .page-link {
    padding: 20px 0;

    &:not(:last-child) {
      margin-right: 0;
    }
    margin-left: 20px;
  }
}

}

/**

* Site footer
*/

.site-footer {

position: absolute;
bottom: 0;
width: 100%;
height: 20px;
line-height: 20px;
padding: 20px 0;
font-size: 15px;
color: $grey-color;
background-color: $footer-background-color;
text-align: center;

}

/**

* Page content
*/

.page-content {

padding-top: 50px;

@include media-query($on-medium) {
  padding-top: 40px;
}

@include media-query($on-small) {
  padding-top: 30px
}

}

.page-heading {

font-size: 20px;

}

.post-list {

margin-left: 0;
list-style: none;

.post-link:hover {
  text-decoration: none;
}

> li {
  padding-bottom: 0;

  &:not(:first-child) {
    padding-top: 50px;
  }
}

}

.post-archives {

margin-left: 0;
list-style: none;

.post-link {
  font-size: 24px;
}

> li {
  margin-bottom: $spacing-unit;
}

}

.post-meta {

font-size: 21px;
line-height: 1.19048;
font-weight: 400;
letter-spacing: .011em;
color: $grey-color;

margin-top: .4em;

@include media-query($on-medium) {
  font-size: 19px;
  line-height: 1.21053;
  letter-spacing: .012em;
}

@include media-query($on-small) {
  font-size: 19px;
  line-height: 1.21053;
  letter-spacing: .012em;
}

}

.post-link {

&,
&:visited {
  color: $text-color;
}

}

.post-continue {

a {
  text-decoration: none;
  color: $a-color;

  &:hover {
    text-decoration: underline;
  }
}

}

/**

* Posts
*/

.post {

margin-left: auto;
margin-right: auto;

width: 100%;

@include media-query($on-small) {
  width: 83.33333%;
}

}

.post-header {

margin-bottom: $spacing-unit;

}

.post-title {

font-size: 40px;
line-height: 1.1;
font-weight: 600;
letter-spacing: 0em;
margin-bottom: 0px;

@include media-query($on-medium) {
  font-size: 32px;
  line-height: 1.125;
  letter-spacing: .004em;
}

@include media-query($on-small) {
  font-size: 27px;
  line-height: 1.14815;
  letter-spacing: .008em;
}

}

.post-content {

margin-bottom: $spacing-unit;

// First paragraph is the lead
p:first-of-type {
  font-size: 20px;
  line-height: 1.5;
  font-weight: 300;
  letter-spacing: .017em;
}

// Headers

h1 {
  font-size: 32px;
  line-height: 1.09375;
  font-weight: 500;
  letter-spacing: .011em;

  @include media-query($on-medium) {
    font-size: 28px;
    line-height: 1.1073;
    letter-spacing: .012em;
  }
}

h2 {
  font-size: 24px;
  line-height: 1.20849;
  font-weight: 500;
  letter-spacing: .015em;

  @include media-query($on-medium) {
    font-size: 22px;
    line-height: 1.22739;
    letter-spacing: .016em;
  }
}

// TODO: Revise h3
h3 {
  font-size: 20px;
  line-height: 1.15667;
  font-weight: 500;
  letter-spacing: .016em;

  @include media-query($on-medium) {
    font-size: 18px;
    line-height: 1.18182;
    letter-spacing: .02em;
  }
}

}

/**

* Pagination
*/

.pagination {

padding: $spacing-unit / 2 0;
border-top: 1px solid $grey-color-light;
border-bottom: 1px solid $grey-color-light;
text-align: center;
@extend %clearfix;

a {
  &,
  &:visited {
    color: $grey-color;
  }
}

.previous {
  float: left;
}

.next {
  float: right;
}

}