diff options
| -rw-r--r-- | _scss/_tools.scss | 28 |
1 files changed, 27 insertions, 1 deletions
diff --git a/_scss/_tools.scss b/_scss/_tools.scss index dd9d0f5..e6f27c2 100644 --- a/_scss/_tools.scss +++ b/_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; +} |