Additional tools

_scss/_tools.scss

@@ -7,10 +7,36 @@
 // 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;
+}