/**

* Site header
*/

.site-header {

border-bottom: 1px solid $grey-color-light;
min-height: $header-height;

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

}

.site-title {

@include relative-font-size(1.625);
font-weight: bold;
line-height: $base-line-height * $base-font-size * 2.25;
letter-spacing: -1px;
margin-bottom: 0;
float: left;

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

}

.site-logo {

height: 30px;
width: auto;

}

.site-nav {

float: right;
line-height: $base-line-height * $base-font-size * 2.25;

.nav-trigger {
    display: none;
}

.menu-icon {
  display: none;
}

.page-link {
  color: $text-color;
  line-height: $base-line-height;
  font-weight: bold;

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

@include media-query($on-palm) {
  position: absolute;
  top: 9px;
  right: $spacing-unit / 2;
  background-color: $background-color;
  border: 1px solid $grey-color-light;
  text-align: right;

  label[for="nav-trigger"] {
    display: block;
    float: right;
    width: 36px;
    height: 36px;
    z-index: 2;
    cursor: pointer;
  }

  .menu-icon {
    display: block;
    float: right;
    width: 36px;
    height: 26px;
    line-height: 0;
    padding-top: 10px;
    text-align: center;

    > svg path {
      fill: $grey-color-dark;
    }
  }

  input ~ .trigger {
    clear: both;
    display: none;
  }

  input:checked ~ .trigger {
    display: block;
    padding-bottom: 5px;
  }

  .page-link {
    display: block;
    padding: 5px 10px;

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

}

.pagination {

text-align: center;
margin: $spacing-unit 0;

div {
  display: inline-block;
  width: 6px;
  height: 100%;
}

a:hover { text-decoration: none; }

& > a { color: $grey-color-dark; }
.disabled { color: $grey-color-light; }

.fa-caret-left, .fa-caret-right { transform: translateY(2px); }

.page-number {
  color: $grey-color !important;
  @include relative-font-size(.8);
}

.previous, .next { @include relative-font-size(1.25); }
.previous {
  margin-right: $spacing-unit;
}

.next {
  margin-left: $spacing-unit;
}

}

/**

* Site footer
*/

.site-footer {

background: $background-dark;
padding: $spacing-unit 0;
height: $footer-height;
text-align: center;

}

.contact-icons {

list-style: none;
margin: 0;
text-align: center;

li > a { border: 0; height: 100%; width: 100%; }

li, li + li {
  margin: 0 7px;
  padding: 0;
  text-align: center;
  display: inline-block;
}

li:first-child { margin-left: 0; }
li:last-child { margin-right: 0; }
@include media-query($on-palm) {
  li:first-child, li:last-child { margin: 0 7px; }
}

.icon {
  padding: 0;
}

}

.page-content .icon {

color: #111;

}

.landing-content .contact-icons {

@include media-query($on-palm) {
  text-align: left;
}

}

.landing-content .contact-icons a, .site-footer .contact-icons a {

  color: #FFF;
  &:hover {
    color: $pastel-red;
  }
  .keybase-icon {
    fill: #FFF;
    &:hover {
      fill: $pastel-red;
    }
  }
}

/**

* About/landing content
*/

.landing-content {

padding: $spacing-unit 0;
min-height: $content-height;
background: $background-dark;
display: -webkit-flex;
display: -moz-flex;
display: flex;
-webkit-flex-direction: column;
-moz-flex-direction: column;
flex-direction: column;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;

a {
  color: #EEE;
  &:hover {
    color: $pastel-red;
  }
}

}

contact-content {

min-height: $content-height;
background: #FFF;

.contact { transform: translateY(-50px); }
.contact-icons .icon {
  color: #111;
  &:hover {
    color: $pastel-red;
  }
}
.contact-icons .icon .keybase-icon {
  fill: #111;
  &:hover {
    fill: $pastel-red;
  }
}

}

.made-by {

font-size: .85em;
color: #AAA;
vertical-align: middle;
-webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 3s; /* Firefox < 16 */
-ms-animation: fadein 3s; /* Internet Explorer */
-o-animation: fadein 3s; /* Opera < 12.1 */
animation: fadein 3s;

a { color: #EEE; }

.heart {
  color: red;
  display: inline;
  height: 1em;
  width: 1em;
  vertical-align: -0.1em;
}

}

.about, .contact {

p, ul {
  font-size: 18px;
}

}

.about, .splash { color: #AAAAAA; }

splash {

min-height: 100vh;
padding: 0;

}

/**

* Page content
*/

.page-content {

padding: $spacing-unit 0;
min-height: $content-height;

& > .wrapper > h1 {
  margin-top: $spacing-unit / 2;
}

}

.page-heading {

@include relative-font-size(1.25);

} @for $i from 1 through 15 {

.blog li:nth-child(#{$i}),
.contact .contact-icons li:nth-child(#{$i}),
.splash p:nth-child(#{$i}),
.splash .contact-icons li:nth-child(#{$i}),
.landing-content .about p:nth-child(#{$i}),
.pagination span:nth-child(#{$i}) {
  -webkit-animation: fadein .5s + $i/2; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein .5s + $i/2; /* Firefox < 16 */
  -ms-animation: fadein .5s + $i/2; /* Internet Explorer */
  -o-animation: fadein .5s + $i/2; /* Opera < 12.1 */
  animation: fadein .5s + $i/2;
}

}

.post {

-webkit-animation: fadein .5s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein .5s; /* Firefox < 16 */
-ms-animation: fadein .5s; /* Internet Explorer */
-o-animation: fadein .5s; /* Opera < 12.1 */
animation: fadein .5s;

}

.contact a, .post a {

color: $text-color;
font-weight: bold;
border-bottom: 1px solid $grey-color;
&:hover {
  color: $grey-color;
  text-decoration: none;
}

}

.post-list {

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

> li h2 {
  margin: 0 0 $spacing-unit / 4 0;
  line-height: 1em;
}

}

.post-meta {

font-size: $small-font-size;
color: $grey-color;

}

.post-author {

font-style: italic;

}

.post-link {

display: block;
@include relative-font-size(1.5);

}

/**

* Posts
*/

.post-header {

margin-bottom: $spacing-unit;

}

.post-title {

margin-top: $spacing-unit / 2;
@include relative-font-size(2.625);
letter-spacing: -1px;
line-height: 1;

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

}

.post-content {

margin-bottom: $spacing-unit;

h1 {
  @include relative-font-size(2);

  @include media-query($on-laptop) {
    @include relative-font-size(1.8);
  }
  display: block;
  border-bottom: 1px solid #eaecef;
}

h2 {
  @include relative-font-size(1.85);

  @include media-query($on-laptop) {
    @include relative-font-size(1.7);
  }
}

h3 {
  @include relative-font-size(1.625);

  @include media-query($on-laptop) {
    @include relative-font-size(1.375);
  }
}

h4 {
  @include relative-font-size(1.25);

  @include media-query($on-laptop) {
    @include relative-font-size(1.125);
  }
}

}

.fa-external-link {

font-size: .7rem;
margin-left: 5px;
margin-right: 2px;
color: lighten($grey-color-dark, 10%);

}

.tags .fa-tags { color: $grey-color-dark; }

.tag {

@include relative-font-size(.8);
color: $text-color;
background-color: $grey-color-light;
font-weight: normal;
padding: 2px 5px;
&:hover {
  color: $grey-color-light;
  background-color: $grey-color-dark;
  text-decoration: underline;
}

} .tag-count {

margin-left: 3px;

}