_scss/_tools.scss


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

// 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;
}