refactor(settings): add brand colors and fonts

eko · Jun 16, 2017 · fc3f488 · fc3f488
1 parent 8e833b8
commit fc3f488
Show file tree

Hide file tree

Showing 10 changed files with 29 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 → _sass/settings/_variables.scss b/_sass/base/_variables.scss → _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
@@ -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
diff --git a/fonts/din-light-webfont.woff2 b/fonts/din-light-webfont.woff2
diff --git a/fonts/din_black-webfont.woff b/fonts/din_black-webfont.woff
diff --git a/fonts/din_black-webfont.woff2 b/fonts/din_black-webfont.woff2