.site-header {
  min-height: $spacing-unit * 1.865;
  line-height: $base-line-height * $base-font-size * 2.25;

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

  .blinking_cursor {
    animation: blinker 1s none infinite;
    font-size: $base-font-size;
  }

  .command_prompt {
    color: $color-blue;
    font-size: $base-font-size;
  }
}

.site-title {
  @include relative-font-size(1.625);
  font-weight: 300;
  margin-bottom: 0;
  float: left;

  @include media-query($on-palm) {
    padding-right: 45px;
  }

  &,
  &:visited,
  &:hover {
    color: $color-foreground;
    text-decoration: none;
  }
}

.site-footer {
  margin-bottom: 2em
}

.wrapper {
  text-align: justify;
}

/**
 * Author box
 */

 .author-box {
   margin-bottom: 1em;
   text-align: left;
   min-height: 72px;
   font-style: italic;
   & > .author-avatar {
     float: left;
     white-space: pre-line;
     margin-right: 1em;
     width: 72px;
     height: 72px;
     border-radius: 0.3em;
   }
 }

.site-header {
  margin-bottom: 1em;
}


.post-title {
    color: $color-foreground;
    text-align: left;
}

.post-description {
  margin-top: 1em;
  color: $color-pink;
  font-style: italic;
}

.post {
  margin-bottom: 2em;
  .post-date {
    margin-top: 1em;
    color: $color-foreground-dark;
    font-size: 12px;
    margin-top: 1em;
    margin-left: 0.5em;
  }

  strong {
    color: white;
  }

  img {
    border-radius: 0.3em;
    width: 100%;
  }

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

    svg {
      color: $color-green;
      margin-right: 0.5em;
    }

    &:before {
      content: "\f14a";
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      font-style: normal;
      font-variant: normal;
      text-rendering: auto;
      font-weight: 900;

      display: none;
      -webkit-font-smoothing: antialiased;
    }
  }

  ul {
    padding: 0;
    margin-left: 0.5em;
  }



  & > blockquote {
    margin-top: 2em;
    margin-bottom: 2em;
    margin-left: 0.5em;
    font-style: italic;
    color: lighten($color-yellow, 20%);

    &:before {
      content: "\f10e";
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      font-style: normal;
      font-variant: normal;
      text-rendering: auto;
      font-weight: 900;

      display: none;
      -webkit-font-smoothing: antialiased;
    }

    & > svg.svg-inline--fa {
      float: left;
      width: 3em;
      height: 3em;
      margin-right: 1em;
    }

    svg {
      color: lighten($color-yellow, 20%);
    }

    li {
      color: $color-yellow;
      &:before {
        content: "\f068";
      }

      & > svg {
        margin-left: 2em;
      }
    }
  }
}

.post-link-wrapper {
   margin-bottom: 1.1em;
   & > .post-link {
     font-size: $base-font-size;
     font-size: $post-link-font-size;
   }

   & > .post-meta {
     color: $color-foreground-dark;
     font-size: $small-font-size;
   }
 }

 .tag-cloud {
   margin-bottom: 2em;
   text-align: left;
   & > a {
     display: inline-block;
     margin-bottom: 1em;
   }
 }

.tag, .tag-cloud > a {
  color: $color-green;
  background-color: $color-background-dark;
  padding: 0.3em 0.6em;
  border-radius: 0.3em;
  &:hover {
    text-decoration: none;
    color: lighten($color-green, 20%);
    background-color: lighten($color-background-dark, 5%);
  }
}

.post-tags {
  margin-top: 0.3em;
  margin-bottom: 0.5em;
}

.credits {
  font-size: 10px;
  color: lighten($color-background-dark, 5%);

  & > a {
    color: lighten($color-background-dark, 10%);
    text-decoration: underline;
  }
}

.pagination {
  font-size: $post-link-font-size;
  margin: 2em 0;
  & > a, & > span {
    font-weight: normal;
    display: inline-block;
    min-width: 1em;

    padding: 0.3em 0.6em;
    border-radius: 0.3em;
    text-align: center;

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

  & > a {
    color: $color-green;
    background-color: $color-background-dark;
    &:hover {
      color: lighten($color-green, 20%);
      background-color: lighten($color-background-dark, 5%);
    }
  }

  & > span {
    color: darken($color-foreground, 20%);
    background-color: darken($color-background-dark, 3%);
  }
}

.social_links {
  float: right;
  & > a {
    color: darken($color-foreground, 20%);
    display: inline-block;
    margin-left: 0.2em;
    font-size: $post-link-font-size * 1.25;
  }
}

ul.related-posts {

    margin: 0;
    margin-left: 1em;
    padding: 0;

  & > li {
    list-style: none;
    margin-left: 0;

    & > svg.svg-inline--fa {
      color: $color-blue;
      margin-right: 0.5em;
      float: left;
      width: 25px;
      height: 25px;
    }

    &:before {
      content: "\f14b";
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      font-style: normal;
      font-variant: normal;
      text-rendering: auto;
      font-weight: 900;

      display: none;
      -webkit-font-smoothing: antialiased;
    }
  }
}