popov.link/_scss/_tools.scss

// Box Sizing
//
// The box-sizing property in CSS controls how the box model
// is handled for the element it applies to.
//
// Values: content-box | border-box
// Default: content-box
//
// https://www.w3.org/TR/css-ui-3/#box-sizing
@mixin borderbox($value: content-box) {
  -webkit-box-sizing: $value;
     -moz-box-sizing: $value;
      -ms-box-sizing: $value;
          box-sizing: $value;
}

// Targeting media types
//
// The @media rule is used in media queries to apply different styles for
// different media types/devices.
//
// https://www.w3.org/TR/css3-mediaqueries/
@mixin mobile-screen() {
  @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    @content;
  }
}

// Calculates the font size for the title.
//
// Default: 1
@function get-font-size-for-pc($heading: 1) {
  @return 1.4rem + ($heading * .3rem);
}

// Calculates the size of the mobile font for the title.
//
// Default: 1
@function get-font-size-for-phone($heading: 1) {
  $pc: get-font-size-for-pc($heading);
  @return $pc - .4rem;
}