/**

* Site header
*/

.site-header {

border-top: 5px solid;
border-bottom: 1px solid;
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;

}

.site-title {

@include relative-font-size(1.625);
font-family: $title-font-family;
letter-spacing: -1px;
margin-bottom: 0;
float: left;

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

}

.site-nav {

position: absolute;
top: 9px;
right: $spacing-unit / 2;
border: 1px solid;
border-radius: 0.4em;
text-align: right;

.nav-trigger {
  display: none;
}

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

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

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

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

.page-link {
  line-height: $base-line-height * $base-font-size * 1.15;
  display: block;
  padding: 5px 5px;

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

.current-page {
  text-decoration: line-through;
}

@media screen and (min-width: $on-medium) {
  position: static;
  float: right;
  border: none;
  background-color: inherit;

  label[for="nav-trigger"] {
    display: none;
  }

  .menu-icon {
    display: none;
  }

  input ~ .trigger {
    display: block;
  }

  .page-link {
    display: inline;
    padding: 0;

    &:not(:last-child) {
      margin-right: 10px;
    }
    margin-left: auto;
  }
}

}

/**

* Homepage
*/

.home {

margin-top: $spacing-unit;

}

.post-list-heading {

@include relative-font-size(1.75);

}

.post-list {

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

li {
  padding-bottom: $spacing-unit / 2;
  border-bottom: 1px solid;
  margin-bottom: 2 * $spacing-unit;
}

}

.post-link {

display: block;
line-height: $base-line-height * $base-font-size * 1.75;
@include relative-font-size(1.75);

@media screen and (min-width: $on-large) {
  @include relative-font-size(2.5);
}

}

/**

* Pagination
*/

.pagination {

list-style: none;
margin: 0 auto;
margin-bottom: $spacing-unit;
display: table;

li {
  float: left;
  margin: 5px 15px 5px 0;

  &:last-of-type { margin-right: 0 }

  a, div {
    display: block;
    padding: $spacing-unit / 4;
    border: 1px solid;
    min-width: 41px;
    text-align: center;
    box-sizing: border-box;
  }
}

}

/**

* Page content
*/

.page-content {

flex: 1 0 auto;

}

/**

* Posts
*/

.post-header {

padding-top: $spacing-unit * 3;
padding-bottom: $spacing-unit * 3;
margin-bottom: $spacing-unit * 2;

}

.post-meta {

font-size: $small-font-size;
margin-bottom: $spacing-unit / 2;

}

.post-tag {

margin-right: $spacing-unit / 2;

}

.post-body-wrapper {

display: flex;
justify-content: space-between;

.post-content {
  width: 100%;
}

.post-aside {
  @include relative-font-size(0.8);
  max-width: 30%;
  min-width: 20%;
  height: 100vh;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  margin-left: $spacing-unit / 2;

  @include media-query($on-medium) {
    visibility: hidden;
    max-width: 0%;
    min-width: 0%;
    margin-left: 0;
  }
}

}

.post-toc-title {

@include relative-font-size(0.95);
padding: $spacing-unit / 2;
margin-top: $spacing-unit / 2;
margin-bottom: 0;
border: 1px solid;
border-top-left-radius: 0.3em;
border-top-right-radius: 0.3em;

@include media-query($on-medium) {
  padding: 0;
  border: 0;
  margin: 0;
}

}

.post-toc-container {

max-height: 60vh;
overflow-y: scroll;
border: 1px solid;
border-bottom-left-radius: 0.3em;
border-bottom-right-radius: 0.3em;

/* Hide scrollbar for Chrome, Safari and Opera */
&::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE and Edge */
-ms-overflow-style: none;

@include media-query($on-medium) {
  border: 0;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

a {
  display: block;
  padding: 0.25rem 0.75rem;
  font-weight: bold;
  border-bottom: 1px solid;
}

li ul > li a {
  padding-left: 1.25rem;
  font-weight: normal;
}

li ul li ul > li a {
  padding-left: 1.75rem;
}

li ul li ul li ul > li a {
  padding-left: 2.25rem;
}

li ul li ul li ul li ul > li a {
  padding-left: 2.75rem;
}

li ul li ul li ul li ul li ul > li a {
  padding-left: 3.25rem
}

}

.post-title, .post-content h1 {

@include relative-font-size(2);
font-weight: bold;
letter-spacing: -1px;
line-height: $base-line-height * $base-font-size * 2;

@media screen and (min-width: $on-large) {
  @include relative-font-size(2.75);
}

}

.post-content {

font-family: $reading-font-family;
margin-bottom: $spacing-unit;

h1, h2, h3 { margin-top: $spacing-unit * 1.5 }
h4, h5, h6 { margin-top: $spacing-unit }

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

  @media screen and (min-width: $on-large) {
    @include relative-font-size(2.15);
  }
}

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

  @media screen and (min-width: $on-large) {
    @include relative-font-size(1.75);
  }
}

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

h5 {
  @include relative-font-size(1.125);
}

h6 {
  @include relative-font-size(1.085);
}

}

/**

* Taxonomies
*/

.taxonomies {

list-style: none;
display: grid;
grid-column-gap: 2em;
grid-template-columns: repeat(3, 1fr);
margin: 0;
padding: 0;
font-weight: bold;

@include media-query($on-medium) {
  grid-template-columns: repeat(2, 1fr);
}

.taxonomy {
  display: flex;
  padding: 0.25em 0;
  justify-content: space-between;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid;
  margin-bottom: $spacing-unit / 3;
}

}

.post-list-by-taxonomy {

time {
  font-family: $code-font-family;
}

}

.back-to-top {

display: block;
font-size: $base-font-size * 0.8;
text-transform: uppercase;
text-align: right;
text-decoration: none;

}

/**

* Alignment
*/

.align-right {

margin-bottom: 1rem;
margin-left: 1rem;
float: right;

}

.align-left {

margin-right: 1rem;
margin-bottom: 1rem;
float: left;

}

.align-center {

display: block;
margin-right: auto;
margin-left: auto;

}

figcaption.align-right {

text-align: right;

}

figcaption.align-left {

text-align: left;

}

figcaption.align-center {

text-align: center;

}

/**

* Site footer
*/

.site-footer {

border-top: 1px solid;
padding: $spacing-unit 0;
text-align: center;
font-size: $small-font-size;

.feed-subscribe {
  font-weight: bold;
  text-align: left;
  .feed-icon {
    margin-right: 0.3em;
  }
}

.social-icons {
  padding: $spacing-unit 0;

  .social-icon {
    margin: 0.3em;
  }
}

}