From 9fde39c2e7d91a94acd4a33b67d48f7b263006ab Mon Sep 17 00:00:00 2001
From: Jason Costello <hello.costello@gmail.com>
Date: Thu, 23 Feb 2017 11:02:48 -0800
Subject: [PATCH] begin implementing Klavika and Open Sans

---
 website/source/assets/stylesheets/_docs.scss       |  6 ++----
 website/source/assets/stylesheets/_global.scss     | 13 +++++++++----
 website/source/assets/stylesheets/_home.scss       |  5 -----
 website/source/assets/stylesheets/_variables.scss  | 14 +++++++-------
 website/source/assets/stylesheets/application.scss |  1 +
 .../hashicorp-shared/_hashicorp-utility.scss       | 11 +++++------
 website/source/layouts/_header.erb                 |  4 ++++
 7 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/website/source/assets/stylesheets/_docs.scss b/website/source/assets/stylesheets/_docs.scss
index 79971b491..f400a828b 100644
--- a/website/source/assets/stylesheets/_docs.scss
+++ b/website/source/assets/stylesheets/_docs.scss
@@ -136,7 +136,6 @@ body.layout-intro {
 
     > a {
       text-transform: uppercase;
-      font-family: $font-family-museo-sans;
       font-weight: $font-weight-museo-sans-sb;
       -webkit-font-smoothing: antialiased;
     }
@@ -151,7 +150,6 @@ body.layout-intro {
 
       > a {
         -webkit-font-smoothing: antialiased;
-        font-family: $font-family-museo-sans;
         padding: 6px 15px;
       }
 
@@ -165,7 +163,6 @@ body.layout-intro {
 
           > a {
             -webkit-font-smoothing: antialiased;
-            font-family: $font-family-museo-sans;
           }
         }
       }
@@ -190,7 +187,7 @@ body.layout-intro {
 
   p, li, .alert {
     font-size: 20px;
-    font-family: $font-family-museo-sans;
+    font-family: $font-family-open-sans;
     font-weight: $font-weight-museo-sans;
     line-height: 1.5em;
     margin: 0 0 18px;
@@ -206,6 +203,7 @@ body.layout-intro {
   }
 
   a {
+    font-family: $font-family-open-sans;
     color: $vagrant-blue;
 
     &:hover{
diff --git a/website/source/assets/stylesheets/_global.scss b/website/source/assets/stylesheets/_global.scss
index d48340381..d6e253e45 100644
--- a/website/source/assets/stylesheets/_global.scss
+++ b/website/source/assets/stylesheets/_global.scss
@@ -13,17 +13,19 @@ body {
   font-weight: 300;
 }
 
+h1, h2, h3, h4, h5 {
+  font-family: $font-family-klavika;
+}
+
 h1 {
   font-size: 42px;
   line-height: 42px;
-  font-family: $font-family-museo-sans;
   font-weight: $font-weight-museo-sans-sb;
   margin-bottom: 24px;
 }
 
 h2 {
   text-transform: uppercase;
-  font-family: $font-family-museo-sans;
   font-weight: $font-weight-museo-sans-sb;
   margin-top: 70px;
 }
@@ -35,10 +37,13 @@ h1 + h2 {
 h3 {
   font-size: 28px;
   line-height: 28px;
-  font-family: $font-family-museo-sans;
   font-weight: $font-weight-museo-sans-sb;
 }
 
+p, a {
+  font-family: $font-family-open-sans;
+}
+
 .highlight{
   margin-bottom: 18px;
 }
@@ -48,7 +53,7 @@ pre {
   color: $white;
   font-size: 14px;
   font-weight: normal;
-  font-family: $font-family-monospace;
+  font-family: $font-family-mono;
   border: none;
   padding: 20px;
   margin-bottom: 0;
diff --git a/website/source/assets/stylesheets/_home.scss b/website/source/assets/stylesheets/_home.scss
index 4fb31adce..64ab2f568 100644
--- a/website/source/assets/stylesheets/_home.scss
+++ b/website/source/assets/stylesheets/_home.scss
@@ -17,7 +17,6 @@
         text-shadow: 0 1px 10px rgba(255, 255, 255, 0.4);
 
         h1 {
-          @include museo-sans-light;
           color: $purple-text;
           font-size: 55px;
           font-weight: 700;
@@ -26,7 +25,6 @@
         }
 
         h2 {
-          @include museo-sans-light;
           color: $blue-text;
           font-size: 28px;
           font-weight: 100;
@@ -68,13 +66,11 @@
         font-size: 40px;
         margin-bottom: $baseline;
         color: $purple-text;
-        @include museo-sans-light;
       }
 
       h4 {
         font-size: 20px;
         line-height: $baseline * 1.5;
-        @include museo-sans-light;
       }
     }
   }
@@ -102,7 +98,6 @@
 
     h1 {
       color: $dark-gray-text;
-      @include museo-sans-light;
     }
 
     .customer-logos {
diff --git a/website/source/assets/stylesheets/_variables.scss b/website/source/assets/stylesheets/_variables.scss
index d1cfd72c9..b3caf6e8b 100644
--- a/website/source/assets/stylesheets/_variables.scss
+++ b/website/source/assets/stylesheets/_variables.scss
@@ -38,11 +38,11 @@ $primary-button-color: #48b4fb;
 
 // Typography
 // -------------------------
-$font-family-museo-sans: "Museo Sans", "Helvetica Neue", helvetica, arial, sans-serif;
-$font-weight-museo-sans-xl: 100;
-$font-weight-museo-sans-reg: 300;
-$font-weight-museo-sans-sb: 500;
-$font-weight-museo-sans-xb: 700;
+$font-family-open-sans:       "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+$font-family-klavika:         "klavika-web", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+$font-family-mono:            "Courier New", Monaco, Menlo, Consolas, monospace;
+$font-weight-museo-sans-xl:   100;
+$font-weight-museo-sans-reg:  300;
+$font-weight-museo-sans-sb:   500;
+$font-weight-museo-sans-xb:   700;
 $font-weight-museo-sans: $font-weight-museo-sans-reg;
-
-$font-family-monospace: "Courier New", monospace;
diff --git a/website/source/assets/stylesheets/application.scss b/website/source/assets/stylesheets/application.scss
index fc8e650d0..43d7006ea 100644
--- a/website/source/assets/stylesheets/application.scss
+++ b/website/source/assets/stylesheets/application.scss
@@ -3,6 +3,7 @@
 @import "bootstrap";
 
 // Remote fonts
+@import url("//fonts.googleapis.com/css?family=Open+Sans:300,400,600");
 @import url("//fonts.googleapis.com/css?family=Inconsolata:400,700");
 
 // Core variables and mixins
diff --git a/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-utility.scss b/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-utility.scss
index 244de1da4..9da04bb32 100644
--- a/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-utility.scss
+++ b/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-utility.scss
@@ -7,8 +7,7 @@
 // --------------------------------------------------
 
 // Variables
-$font-family-museo-sans:  'museo-sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-$header-font-family: $font-family-museo-sans;
+$header-font-family: $font-family-open-sans;
 $header-font-weight: 600; // semi-bold
 
 $header-height: 74px;
@@ -63,22 +62,22 @@ $nav-margin-right: 12px;
 }
 
 @mixin open-light() {
-  font-family: $font-family-museo-sans;
+  font-family: $font-family-open-sans;
   font-weight: 300;
 }
 
 @mixin open() {
-  font-family: $font-family-museo-sans;
+  font-family: $font-family-open-sans;
   font-weight: 400;
 }
 
 @mixin open-sb() {
-  font-family: $font-family-museo-sans;
+  font-family: $font-family-open-sans;
   font-weight: 600;
 }
 
 @mixin open-bold() {
-  font-family: $font-family-museo-sans;
+  font-family: $font-family-open-sans;
   font-weight: 700;
 }
 
diff --git a/website/source/layouts/_header.erb b/website/source/layouts/_header.erb
index df5cbca37..e68944c37 100644
--- a/website/source/layouts/_header.erb
+++ b/website/source/layouts/_header.erb
@@ -29,6 +29,10 @@
     })(window,document,'script','dataLayer','GTM-NR2SD7C');</script>
     <!-- End Google Tag Manager -->
 
+    <!-- Typekit script to import Klavika font -->
+    <script src="https://use.typekit.net/wxf7mfi.js"></script>
+    <script>try{Typekit.load({ async: true });}catch(e){}</script>
+
     <%= yield_content :head %>
   </head>