modules boilerplate

_modules.scss

////////////////////////////// 
//@group global styling
//////////////////////////////
  .canvas {
    background-color: $blue;
    header { //background information
      background-image: url(../assets/images/header-bg.svg);
      background-position: center -123px;
      background-repeat: no-repeat;
      background-size: auto;
      display: block;
      height: 156px;
      width: 100%;
    }
    nav {
      background-color: $purple;
      border-bottom: 8px solid #A65FD1;
      .uilist {
        text-align: center;
      }
      .list-item {
        display: inline-block;
        
        a {
          @include font-size(1.175);
          color: #fff;
          display: block;
          font-family: 'Shadows Into Light Two', cursive;
          padding: 10px 20px;
          text-decoration: none;
          &:hover {
            border-bottom: none;
            background-color: #A65FD1;
          }
        }
      }
    }
  }
  .page {
    .logo {
      position: relative;
      text-align: center;
      @include old-ie {
        top: 24px;
      }
      @include modern {
        top: 1.5rem;
      }
    }
    &.body {
      background-color: $page;
      padding: 10px;
    }
    .bold {
      font-weight: 600;
    }
  }
// @end global styling

////////////////////////////// 
//@group layout styles
//////////////////////////////
  .jrj-row {
    display: block;
    text-align: justify;
    &:after {
      content: '';
      display: inline-block;
      width: 100%;
    }
  }
  .jrj-panel {
    border: 1px solid $blue;
    border-radius: 3px;
    padding: 10px;
    margin: 20px 0;
    h2 {
      line-height: 48px;
      line-height: 1.5rem;
      padding: 10px 0 15px;
      padding: .625rem 0 .9375rem;
    }
    &.callout {
      background-color: #A65FD1;
      color: #fff;
      h2 {
        color: #fff;
      }
    }
  }
  .jrj-media {
    display: block;
    &:after {
      content: '';
      display: inline-block;
      width: 100%;
    }
  }
  .jrj-media__title {
    padding-bottom: 15px;
    padding-top: 10px;
  }
  .jrj-media--left, .jrj-media--right {
    .jrj-media__image, .jrj-media__body {
      display: inline-block;
    }
    .jrj-media__image {
      vertical-align: top;
      height: auto;
      max-height: 300px;
      width: 34.5%;
    }
    .jrj-media__body {
      width: 64.5%;
    }
  }
  .jrj-media--left {
    .jrj-media__body {
      padding-left: 10px;
    }
  }
  .jrj-media--right {
    .jrj-media__image {
      position: relative;
      left: 64.5%;
    }
    .jrj-media__body {
      position: relative;
      left: -35%;
      padding-right: 10px;
    }
  }
  .jrj-media--top {
    margin: 0 auto;
    width: 85%;

    .jrj-media__image, .jrj-media__body {
      display: block;
      width: 100%; 
    }
    .jrj-media__image {
      height: auto;
      max-height: 300px;
    }
    .jrj-media__body {
      padding-top: 10px;
    }
  }
// @end layout styles