diff options
Diffstat (limited to 'plugins/jetpack/scss/atoms/typography')
-rw-r--r-- | plugins/jetpack/scss/atoms/typography/_functions.scss | 12 | ||||
-rw-r--r-- | plugins/jetpack/scss/atoms/typography/_variables.scss | 31 |
2 files changed, 43 insertions, 0 deletions
diff --git a/plugins/jetpack/scss/atoms/typography/_functions.scss b/plugins/jetpack/scss/atoms/typography/_functions.scss new file mode 100644 index 00000000..878bc05e --- /dev/null +++ b/plugins/jetpack/scss/atoms/typography/_functions.scss @@ -0,0 +1,12 @@ +// ========================================================================== +// em() +// +// Convert px to em in a readable fashion. +// ========================================================================== + +// Examples: +// 1. font-size: em(14px); +// 2. font-size: em(30px/14px); +@function em($value, $context: map-get($root-font, font-size)) { + @return ($value / $context * 1em); +} diff --git a/plugins/jetpack/scss/atoms/typography/_variables.scss b/plugins/jetpack/scss/atoms/typography/_variables.scss new file mode 100644 index 00000000..e1a912b1 --- /dev/null +++ b/plugins/jetpack/scss/atoms/typography/_variables.scss @@ -0,0 +1,31 @@ +// ========================================================================== +// Typography variables +// ========================================================================== + +$normal: normal; // Change these values when using custom fonts +$bold: bold; // For example, bold could change to 400; + +$root-font:( + color: #222, + font-size: 14px, + line-height: 1.4 +); + +$pre__background: #eee; +$mark__background: #fff9c0; + +// ========================================================================== +// Typefaces +// ========================================================================== + +$monospace: 'courier new', monospace; +$serif: Georgia, "Times New Roman", Times, serif; +$sans: Helvetica, Arial, sans-serif; // 400i,400,600,700,800 +$calluna: 'calluna', $sans; // 400 +$gill: "Gill Sans", "Gill Sans MT", $sans; + +// ========================================================================== +// Icons +// ========================================================================== + +$genericons: 'genericons'; |