From 20e566f58fba1b0f0e34e08e14704b2b1edadf6a Mon Sep 17 00:00:00 2001 From: "MORITA Hajime (omo)" Date: Mon, 24 Oct 2011 02:22:46 -0700 Subject: [PATCH] Makes font-family names customizable. This chagne instroduces following variables that allows authors to customize a font family for each class. - $serif - $sans - $heading-font-family - $header-title-font-family This change also adds anotehr custom scss file named "_fonts.scss". We can use it to override these newly introduced variables. --- .themes/classic/sass/base/_typography.scss | 13 +++++++++---- .themes/classic/sass/custom/_fonts.scss | 9 +++++++++ .themes/classic/sass/screen.scss | 1 + 3 files changed, 19 insertions(+), 4 deletions(-) create mode 100644 .themes/classic/sass/custom/_fonts.scss diff --git a/.themes/classic/sass/base/_typography.scss b/.themes/classic/sass/base/_typography.scss index 6055675..8ef3958 100644 --- a/.themes/classic/sass/base/_typography.scss +++ b/.themes/classic/sass/base/_typography.scss @@ -1,17 +1,22 @@ $blockquote: $type-border !default; -$mono: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; +$sans: "PT Sans", "Helvetica Neue", Arial, sans-serif !default; +$serif: "PT Serif", Georgia, Times, "Times New Roman", serif !default; +$mono: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace !default; +$heading-font-family: "PT Serif", "Georgia", "Helvetica Neue", Arial, sans-serif !default; +$header-title-font-family: $heading-font-family !default; // Fonts .heading { - font-family: "PT Serif", "Georgia", "Helvetica Neue", Arial, sans-serif; + font-family: $heading-font-family; } -.sans { font-family: "PT Sans", "Helvetica Neue", Arial, sans-serif; } -.serif { font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; } +.sans { font-family: $sans; } +.serif { font-family: $serif; } .mono { font-family: $mono; } body > header h1 { font-size: 2.2em; @extend .heading; + font-family: $header-title-font-family; font-weight: normal; line-height: 1.2em; margin-bottom: 0.6667em; diff --git a/.themes/classic/sass/custom/_fonts.scss b/.themes/classic/sass/custom/_fonts.scss new file mode 100644 index 0000000..073c2be --- /dev/null +++ b/.themes/classic/sass/custom/_fonts.scss @@ -0,0 +1,9 @@ +// Here you can easily change font faces which are used in your site. +// To give it a try, uncomment some of the lines below rebuild your blog, and see how it works. your sites's. +// If you love to use Web Fonts, you also need to add some lines to source/_includes/custom/head.html + +//$sans: "Optima", sans-serif; +//$serif: "Baskerville", serif; +//$mono: "Courier", monospace; +//$heading-font-family: "Verdana", sans-serif; +//$header-title-font-family: "Futura", sans-serif; diff --git a/.themes/classic/sass/screen.scss b/.themes/classic/sass/screen.scss index f08da4c..1899f60 100644 --- a/.themes/classic/sass/screen.scss +++ b/.themes/classic/sass/screen.scss @@ -3,6 +3,7 @@ @include reset-html5; @import "custom/colors"; +@import "custom/fonts"; @import "custom/layout"; @import "base"; @import "partials";