datat.fi/_sass/basically-basic/_layout.scss

/* ==========================================================================
   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 {
    @include container;
  }
}

.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) {
        @include span(5 of 16);
        @include suffix(1 of 16);

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

    .entry-content {
      @include breakpoint($medium) {
        @include span(11 of 16 last);
      }
    }
  }

  .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;
    }
  }
}