/* ==========================================================================

Layout
========================================================================== */

.canvas {

position: relative;
width: 100%;
overflow: hidden;

}

.wrapper {

position: relative;
width: 100%;
height: 100%;
min-height: 100vh;
transform: translateX(0);
transition: $global-transition;
background-color: $background-color;
z-index: 100;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;

}

.intro, main {

> .inner {
  padding: 0 0.5rem;

  @include breakpoint($small) {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  @include breakpoint($medium) {
    padding-right: 2rem;
    padding-left: 2rem;
  }

  @include breakpoint($large) {
    padding-right: 3rem;
    padding-left: 3rem;
  }

  @include breakpoint($xlarge) {
    padding-right: 4rem;
    padding-left: 4rem;
  }
}

}

main {

section {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

}

.inner {

max-width: $large;

}

/*

Layout specific adjustments
========================================================================== */

.layout–post, .layout–page {

.entry-content {
  @include breakpoint($large) {
    width: span(14 of 16);
  }
}

}

.layout–about {

.entry-wrap {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;

  @include breakpoint($medium) {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
}

.entry-content {
  @include breakpoint($medium) {
    -ms-flex: 1;
    flex: 1;
  }
}

.entry-sidebar {
  order: -1;
  -ms-flex-order: -1;

  @include breakpoint($medium) {
    order: initial;
    -ms-flex-order: initial;
  }

  .author-picture {
    margin: 0 0 2rem;
    border-radius: 2 * $border-radius;

    @include breakpoint($medium) {
      margin: 0 0 0 2rem;
    }
  }
}

}

.layout–cv {

.entries {
  .entry-header {
    @include breakpoint($medium) {
      width: span(5 of 16);
      padding-right: gutter(1 of 16);

      /* remove space after last child element */
      > *:last-child {
        margin-bottom: 0;
      }
    }
  }

  .entry-content {
    @include breakpoint($medium) {
      float: right;
      width: span(11 of 16);
    }
  }
}

.entry {
  a {
    color: $accent-color;
  }

  address {
    font-style: normal;
  }

  .title,
  .position,
  .institution,
  .language {
    margin-bottom: 0;
  }

  .date {
    margin-bottom: 1rem;
    color: tint($text-color, 40%);
    font-family: $monospace-font-family;
    font-size: 80%;
  }

  .courses-title,
  .awarder,
  .publisher,
  .level {
    margin: 1rem 0 0;
  }

  .courses,
  .keywords {
    @include list-unstyled;
  }
}

.taxonomy {
  + .taxonomy {
    margin-top: 0.5rem;
  }

  .title {
    display: inline-block;
    margin-right: 1rem;
  }

  .keywords {
    display: inline-block;
  }
}

}