blog/bonifacelabs/public/scss/_media-queries.scss

// ------------------------------
// MEDIA QUERIES
// ------------------------------


@media all and (min-width: 1300px) {

  .content-wrapper {
    margin-left: 530px;
  }

}

// ------------------------------
// < 1100px
// ------------------------------

@media all and (max-width: 1100px) {

  .panel-cover__logo {
    width: 70px;
  }

  .panel-title {
    font-size: 2em;
  }

  .panel-subtitle {
    font-size: 1em;
  }

  .panel-cover__description {
    margin: 0 10px;
    font-size: .9em;
  }

  .navigation--social {
    margin-top: 5px;
    margin-left: 0;
  }

}

// ------------------------------
// < 960px
// ------------------------------

@media all and (max-width: 960px) {

  .btn-mobile-menu {
    display: block;
  }

  .panel-main {
    display: table;
    position: relative;
  }

    .panel-cover--collapsed {
      width: 100%;
      max-width: none;
    }

  .panel-main__inner {
    display: table-cell;
    padding: 60px 10%;
  }

  .panel-cover__description {
    display: block;
    max-width: 600px;
    margin: 0 auto;
  }

  .panel-cover__divider--secondary {
    display: none;
  }

  .panel-cover {
    width: 100%;
    height: 100%;
    background-position: center center;

    &.panel-cover--collapsed {
      display: block;
      position: relative;
      height: auto;
      padding: 0;
      background-position: center center;

      .panel-main__inner {
        display: block;
        padding: 70px 0 30px 0;
      }

      .panel-cover__logo {
        width: 60px;
        border-width: 2px;
      }

      .panel-cover__description {
        display: none;
      }

      .panel-cover__divider {
        display: none;
        margin: 1em auto;
      }

    }

  }

    .navigation-wrapper {
      display: none;
      position: fixed;
      top: 42px;
      right: 0;
      left: 0;
      width: 100%;
      padding: 20px 0;
      background: rgba($gray-darkest,.98);
      border-bottom: 1px solid rgba(255,255,255,.15);

      &.visible {
        display: block;
      }

    }

    .cover-navigation {
      display: block;
      position: relative;
      float: left;
      clear: left;
      width: 100%;

      .navigation {
        display: block;
        width: 100%;

        li {
          width: 80%;
          margin-bottom: .4em;
        }

      }

      &.navigation--social {
        padding-top: 5px;

        .navigation {

          li {
            display: inline-block;
            width: 25.8%;
          }

        }

      }

    }

    .content-wrapper {
      width: 80%;
      max-width: none;
      margin: 0 auto;
    }

    .content-wrapper__inner {
      margin-right: 0;
      margin-left: 0;
    }

    .navigation__item {
      width: 100%;
      margin: 0 0 .4em 0;
    }

}

// ------------------------------
// < 340px
// ------------------------------

@media all and (max-width: 340px) {

  .panel-main__inner {
    padding: 0 5%;
  }

  .panel-title {
    margin-bottom: .1em;
    font-size: 1.5em;
  }

  .panel-subtitle {
    font-size: .9em;
  }

  .btn {
    display: block;
    margin-bottom: .4em;
  }

}