diff --git a/_sass/base/_global.scss b/_sass/base/_global.scss index 320a37e5d..9d76afd95 100644 --- a/_sass/base/_global.scss +++ b/_sass/base/_global.scss @@ -22,7 +22,7 @@ html { background: $selection-color; } body { - color: $text-color; + color: $brand-black; font-family: $font-family-main; font-size: $font-size; word-wrap: break-word; @@ -32,7 +32,7 @@ h1, h2, h3, h4, h5, h6 { line-height: 1.3; margin: 0.67em 0; a { - color: $text-color; + color: $brand-black; } } h1 { diff --git a/_sass/includes/_footer.scss b/_sass/includes/_footer.scss index 932e9cc9f..177ab6e5f 100644 --- a/_sass/includes/_footer.scss +++ b/_sass/includes/_footer.scss @@ -3,6 +3,6 @@ display: inline-block; text-align: center; width: 100%; - color: lighten($text-color, 30%); + color: lighten($brand-black, 30%); font-size: 0.9em; } diff --git a/_sass/layouts/_posts.scss b/_sass/layouts/_posts.scss index 1e7f2e490..e0d9532d0 100644 --- a/_sass/layouts/_posts.scss +++ b/_sass/layouts/_posts.scss @@ -22,7 +22,7 @@ header { margin: 0; } .meta { - color: rgba($text-color, .5); + color: rgba($brand-black, .5); font-size: 0.9em; letter-spacing: 0.1em; margin: 0; diff --git a/_sass/settings/_fonts.scss b/_sass/settings/_fonts.scss new file mode 100644 index 000000000..2b9ee7376 --- /dev/null +++ b/_sass/settings/_fonts.scss @@ -0,0 +1,15 @@ +@font-face { + font-family: 'din'; + src: url('../fonts/din-light-webfont.woff2') format('woff2'), + url('../fonts/din-light-webfont.woff') format('woff'); + font-weight: lighter; + font-style: normal; +} + +@font-face { + font-family: 'din'; + src: url('../fonts/din_black-webfont.woff2') format('woff2'), + url('../fonts/din_black-webfont.woff') format('woff'); + font-weight: 800; + font-style: normal; +} diff --git a/_sass/base/_variables.scss b/_sass/settings/_variables.scss similarity index 78% rename from _sass/base/_variables.scss rename to _sass/settings/_variables.scss index 7b6bb45fb..e97baaf15 100644 --- a/_sass/base/_variables.scss +++ b/_sass/settings/_variables.scss @@ -1,6 +1,6 @@ // Typography -$font-family-main: 'Cabin', Helvetica, Arial, sans-serif; -$font-family-headings: 'Cabin', Helvetica, Arial, sans-serif; +$font-family-main: Helvetica, Arial, sans-serif; +$font-family-headings: 'din', Helvetica, Arial, sans-serif; $font-size: 1.25em; // Padding @@ -14,7 +14,6 @@ $background-color: #fff; $border-color: rgba(0, 0, 0, 0.1); // rgba recommended if using feature images // Typography colours -$text-color: #383838; $link-color: #0096FB; $selection-color: #D4D4D4; // visible when highlighting text @@ -28,3 +27,7 @@ $feature-image-size: cover; // options include "cover", "contain", "auto" // Header description box $header-desc-background-color: #FBE300; $header-desc-text-color: #FFF; + +// brand colors +$brand-yellow: #FBE300; +$brand-black: #323334; diff --git a/css/main.scss b/css/main.scss index 60cb17f0b..8ea9bf817 100644 --- a/css/main.scss +++ b/css/main.scss @@ -1,11 +1,14 @@ --- --- +// Settings +@import 'settings/fonts'; +@import 'settings/variables'; + // External @import 'external/reset'; @import 'external/syntax'; // Base -@import 'base/variables'; @import 'base/global'; @import 'base/utility'; diff --git a/fonts/din-light-webfont.woff b/fonts/din-light-webfont.woff new file mode 100755 index 000000000..b07e151ac Binary files /dev/null and b/fonts/din-light-webfont.woff differ diff --git a/fonts/din-light-webfont.woff2 b/fonts/din-light-webfont.woff2 new file mode 100755 index 000000000..dbba96cdb Binary files /dev/null and b/fonts/din-light-webfont.woff2 differ diff --git a/fonts/din_black-webfont.woff b/fonts/din_black-webfont.woff new file mode 100755 index 000000000..7b45d154e Binary files /dev/null and b/fonts/din_black-webfont.woff differ diff --git a/fonts/din_black-webfont.woff2 b/fonts/din_black-webfont.woff2 new file mode 100755 index 000000000..7f5ff0d64 Binary files /dev/null and b/fonts/din_black-webfont.woff2 differ