_variables.scss

$custom-font-size: 16px;
$black: #000000;
$white: #ffffff;
$dark_grey: #6c6c6d;
$light_grey: #f3f4f7;
$orange: #ee4c2c;
$medium_grey: #f3f4f7;
$not_quite_black: #262626;
$slate: #262626;
$very_light_grey: #f3f4f7;
$very_dark_grey: #CCCDD1;
$content_text_color: #6c6c6d;
$code_background_color: #f3f4f7;
$dark_blue: #3d5a97;
$quick_start_grey: #6c6c6d;
$command_block_black: #6c6c6d;
$smoky_grey: #CCCDD1;
$medium_smoky_grey: #CCCDD1;
$code_link_color: #4974D1;
$purple: #812CE5;
$light_white: #e2e2e2;
$mid_gray: #979797;

$desktop_header_height: 90px;
$mobile_header_height: 68px;
$desktop_footer_height: 420px;
$site_horizontal_padding: 30px;

@import "../node_modules/bootstrap/scss/variables";

@mixin desktop {
  @media screen and (min-width: 768px) { @content; }
}

@mixin full-nav-menu-desktop {
  @media screen and (min-width: 1100px) { @content; }
}

@mixin max-width-desktop {
  @media screen and (min-width: 1240px) { @content; }
}

@mixin small-desktop {
  @media (min-width: 768px) and (max-width: 1239px) { @content; }
}

@function rem($px) {
  @return ($px / 16px) * 1rem;
}

@mixin code_font_family {
  font-family: IBMPlexMono,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}

@mixin clearfix {
  &:before,
  &:after {
    content: "";
    display: table;
  }
  &:after {
    clear: both;
  }
  & {
    *zoom: 1;
  }
}

@mixin default_link_styles {
  a:link,
  a:visited,
  a:hover {
    color: $orange;
    text-decoration: none;
  }

  @include desktop {
    a:hover {
      text-decoration: underline;
    }
  }
}

@mixin animated_border_hover_state {
  @include desktop {
    &:after {
      content: "";
      display: block;
      width: 0;
      height: 1px;
      position: absolute;
      bottom: 0;
      left: 0;
      background-color: $orange;
      transition: width .250s ease-in-out;
    }

    &:hover:after {
      width: 100%;
    }
    &:hover {
      color: $not_quite_black;
    }
  }
}

@mixin external_link_icon {
    &:after {
      content: url($baseurl + "/assets/images/external-link-icon.svg");
      margin-left: 15px;
    }
}

@mixin blog_date_and_feature {
  font-size: rem(18px);
  letter-spacing: 0;
  line-height: rem(24px);
  margin-bottom: rem(10px);
}