next-static-site/styles/_mixins.scss

/******************************************************************************
 * Mixins
*******************************************************************************/
@mixin font-bold() {
  font-family: 'objectivitybold';
  font-weight: normal;

  em {
    font-family: 'objectivitybold_slanted';
  }
}

@mixin font-medium() {
  font-family: 'objectivitymedium';

  em {
    font-family: 'objectivitymedium_slanted';
  }
}

@mixin h1() {
  font-size: $h1-size;
  line-height: 1.33;
  letter-spacing: -0.06px;
  @include font-bold();

  @media (max-width: $width-tablet-1) {
    font-size: $h2-size;
  }

  @media (max-width: $width-tablet-2) {
    font-size: $h3-size;
  }

  @media (max-width: $width-mobile) {
    font-size: $h4-size;
  }
}

@mixin h2() {
  font-size: $h2-size;
  line-height: 1.35;
  letter-spacing: -0.05px;
  @include font-bold();

  @media (max-width: $width-tablet-1) {
    font-size: $h3-size;
  }

  @media (max-width: $width-tablet-2) {
    font-size: $h4-size;
  }

  @media (max-width: $width-mobile) {
    font-size: $h5-size;
  }
}

@mixin h3() {
  font-size: $h3-size;
  line-height: 1.33;
  letter-spacing: -0.05px;
  @include font-bold();

  @media (max-width: $width-tablet-1) {
    font-size: $h4-size;
  }

  @media (max-width: $width-tablet-2) {
    font-size: $h5-size;
  }

  @media (max-width: $width-mobile) {
    font-size: $h6-size;
  }
}

@mixin h4 () {
  font-size: $h4-size;
  line-height: 1.5;
  letter-spacing: -0.04px;
  @include font-medium();

  @media (max-width: $width-tablet-1) {
    font-size: $h5-size;
  }

  @media (max-width: $width-tablet-2) {
    font-size: $h6-size;
  }

  @media (max-width: $width-mobile) {
    font-size: $p-size;
  }
}

@mixin h5() {
  font-size: $h5-size;
  line-height: 1.67;
  letter-spacing: -0.03px;
  @include font-medium();

  span {
    color: $jambonz;
  }

  @media (max-width: $width-tablet-1) {
    font-size: $h6-size;
  }

  @media (max-width: $width-tablet-2) {
    font-size: $p-size;
  }

  // @note: Consideration on stopping type reduction here
  // @media (max-width: $width-mobile) {
  //   font-size: $m-size;
  // }
}

@mixin h6() {
  font-size: $h6-size;
  line-height: 1.8;
  letter-spacing: -0.03px;
  @include font-medium();

  @media (max-width: $width-tablet-1) {
    font-size: $p-size;
  }

  @media (max-width: $width-tablet-2) {
    font-size: $m-size;
  }

  // @note: Consideration on stopping type reduction here
  // @media (max-width: $width-mobile) {
  //   font-size: $ms-size;
  // }
}

@mixin p() {
  font-size: $p-size;
  line-height: 1.9;

  @media (max-width: $width-tablet-2) {
    font-size: $m-size;
  }

  // @note: Consideration on stopping type reduction here
  @media (max-width: $width-mobile) {
    font-size: $ms-size;
  }
}

@mixin m() {
  font-size: $m-size;
  line-height: 1.9;

  // @note: Consideration on stopping type reduction here?
  @media (max-width: $width-tablet-1) {
    font-size: $ms-size;
  }
}

@mixin ms () {
  font-size: $ms-size;
  line-height: 2;

  // @note: Consideration on stopping type reduction here
  // @media (max-width: $width-tablet-1) {
  //   font-size: $mxs-size;
  // }
}

@mixin mxs() {
  font-size: $mxs-size;
  line-height: 2;
}

@mixin cta() {
  margin-top: 96px;

  @media (max-width: $width-tablet-1) {
    margin-top: 64px;
  }
}

@mixin flex-cols() {
  display: flex;
  flex-direction: column;
  align-items: center;
}