From 0dc1465248bbd6570ecde8f4e2b0b3c036e98be1 Mon Sep 17 00:00:00 2001
From: Kyle Fiedler <kfiedler@thoughtbot.com>
Date: Fri, 27 Jan 2012 16:05:17 -0500
Subject: [PATCH] Change fonts to link to our server

---
 navigation.html            |   6 +-
 sass/_base-variables.scss  |   2 +-
 sass/_base.scss            |   1 -
 sass/_font-face.scss       | 129 ++++++++++++++++++++++++++++++++++---
 sass/_index-variables.scss |   2 +-
 sass/_index.scss           | 106 +-----------------------------
 sass/_layout.scss          |  40 ++++++++----
 sass/marketing.scss        |   3 +-
 video.html                 |   4 +-
 9 files changed, 162 insertions(+), 131 deletions(-)

diff --git a/navigation.html b/navigation.html
index 8f1114c867..278a560af9 100644
--- a/navigation.html
+++ b/navigation.html
@@ -1,11 +1,13 @@
 <div class="header-wrapper">
   <header>
-    <h1><em>MITx</em> Circuits and Electronics</h1>
+    <h1><em>MITx</em></h1>
 
     <nav>
+      <h2><a href="/courseware">Circuits and Electronics</a></h2>
+
       <ul class="coursenav">
-        <li><a href="/info">Course Info</a></li>
         <li><a href="/courseware">Courseware</a></li>
+        <li><a href="/info">Course Info</a></li>
         <li><a href="/book">Textbook</a></li>
         <li><a href="/discussion">Discussion</a></li>
         <li><a href="/wiki">Wiki</a></li>
diff --git a/sass/_base-variables.scss b/sass/_base-variables.scss
index 6f96fd715e..c89d62b3f2 100644
--- a/sass/_base-variables.scss
+++ b/sass/_base-variables.scss
@@ -24,7 +24,7 @@
 // ---------------------------------------- //
 
 // fonts
-$body-font-family: "Droid Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;;
+$body-font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;;
 $body-font-size: 14px;
 
 // grid
diff --git a/sass/_base.scss b/sass/_base.scss
index 4ceba8b593..4df1d6de88 100644
--- a/sass/_base.scss
+++ b/sass/_base.scss
@@ -21,7 +21,6 @@ p {
 
 em {
   font-style: italic;
-  font-family: Georgia, serif;
 }
 
 #{$all-text-inputs}, textarea {
diff --git a/sass/_font-face.scss b/sass/_font-face.scss
index 132e3a0d75..33162954b8 100644
--- a/sass/_font-face.scss
+++ b/sass/_font-face.scss
@@ -1,12 +1,125 @@
+/* Generated by Font Squirrel (http://www.fontsquirrel.com) on January 25, 2012 05:06:34 PM America/New_York */
+
+
+// Not used in UI
+// @font-face {
+//     font-family: 'Open Sans';
+//     src: url('/static/fonts/OpenSans-Light-webfont.eot');
+//     src: url('/static/fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
+//          url('/static/fonts/OpenSans-Light-webfont.woff') format('woff'),
+//          url('/static/fonts/OpenSans-Light-webfont.ttf') format('truetype'),
+//          url('/static/fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
+//     font-weight: 300;
+//     font-style: normal;
+
+// }
+
+// @font-face {
+//     font-family: 'Open Sans';
+//     src: url('/static/fonts/OpenSans-LightItalic-webfont.eot');
+//     src: url('/static/fonts/OpenSans-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
+//          url('/static/fonts/OpenSans-LightItalic-webfont.woff') format('woff'),
+//          url('/static/fonts/OpenSans-LightItalic-webfont.ttf') format('truetype'),
+//          url('/static/fonts/OpenSans-LightItalic-webfont.svg#OpenSansLightItalic') format('svg');
+//     font-weight: 300;
+//     font-style: italic;
+
+// }
+
 @font-face {
-  font-family: 'Droid Sans';
-  font-style: normal;
-  font-weight: normal;
-  src: local('Droid Sans'), local('DroidSans'), url('http://themes.googleusercontent.com/static/fonts/droidsans/v3/s-BiyweUPV0v-yRb-cjciL3hpw3pgy2gAi-Ip7WPMi0.woff') format('woff');
+    font-family: 'Open Sans';
+    src: url('/static/fonts/OpenSans-Regular-webfont.eot');
+    src: url('/static/fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
+         url('/static/fonts/OpenSans-Regular-webfont.woff') format('woff'),
+         url('/static/fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
+         url('/static/fonts/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
+    font-weight: 600;
+    font-style: normal;
+
 }
+
 @font-face {
-  font-family: 'Droid Sans';
-  font-style: normal;
-  font-weight: bold;
-  src: local('Droid Sans Bold'), local('DroidSans-Bold'), url('http://themes.googleusercontent.com/static/fonts/droidsans/v3/EFpQQyG9GqCrobXxL-KRMXbFhgvWbfSbdVg11QabG8w.woff') format('woff');
+    font-family: 'Open Sans';
+    src: url('/static/fonts/OpenSans-Italic-webfont.eot');
+    src: url('/static/fonts/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
+         url('/static/fonts/OpenSans-Italic-webfont.woff') format('woff'),
+         url('/static/fonts/OpenSans-Italic-webfont.ttf') format('truetype'),
+         url('/static/fonts/OpenSans-Italic-webfont.svg#OpenSansItalic') format('svg');
+    font-weight: 400;
+    font-style: italic;
+
 }
+
+// Not used in UI
+// @font-face {
+//     font-family: 'Open Sans';
+//     src: url('/static/fonts/OpenSans-Semibold-webfont.eot');
+//     src: url('/static/fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
+//          url('/static/fonts/OpenSans-Semibold-webfont.woff') format('woff'),
+//          url('/static/fonts/OpenSans-Semibold-webfont.ttf') format('truetype'),
+//          url('/static/fonts/OpenSans-Semibold-webfont.svg#OpenSansSemibold') format('svg');
+//     font-weight: 600;
+//     font-style: normal;
+
+// }
+
+// @font-face {
+//     font-family: 'Open Sans';
+//     src: url('/static/fonts/OpenSans-SemiboldItalic-webfont.eot');
+//     src: url('/static/fonts/OpenSans-SemiboldItalic-webfont.eot?#iefix') format('embedded-opentype'),
+//          url('/static/fonts/OpenSans-SemiboldItalic-webfont.woff') format('woff'),
+//          url('/static/fonts/OpenSans-SemiboldItalic-webfont.ttf') format('truetype'),
+//          url('/static/fonts/OpenSans-SemiboldItalic-webfont.svg#OpenSansSemiboldItalic') format('svg');
+//     font-weight: 600;
+//     font-style: italic;
+
+// }
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('/static/fonts/OpenSans-Bold-webfont.eot');
+    src: url('/static/fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
+         url('/static/fonts/OpenSans-Bold-webfont.woff') format('woff'),
+         url('/static/fonts/OpenSans-Bold-webfont.ttf') format('truetype'),
+         url('/static/fonts/OpenSans-Bold-webfont.svg#OpenSansBold') format('svg');
+    font-weight: 700;
+    font-style: normal;
+
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('/static/fonts/OpenSans-BoldItalic-webfont.eot');
+    src: url('/static/fonts/OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
+         url('/static/fonts/OpenSans-BoldItalic-webfont.woff') format('woff'),
+         url('/static/fonts/OpenSans-BoldItalic-webfont.ttf') format('truetype'),
+         url('/static/fonts/OpenSans-BoldItalic-webfont.svg#OpenSansBoldItalic') format('svg');
+    font-weight: 700;
+    font-style: italic;
+
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('/static/fonts/OpenSans-ExtraBold-webfont.eot');
+    src: url('/static/fonts/OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'),
+         url('/static/fonts/OpenSans-ExtraBold-webfont.woff') format('woff'),
+         url('/static/fonts/OpenSans-ExtraBold-webfont.ttf') format('truetype'),
+         url('/static/fonts/OpenSans-ExtraBold-webfont.svg#OpenSansExtrabold') format('svg');
+    font-weight: 800;
+    font-style: normal;
+
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('/static/fonts/OpenSans-ExtraBoldItalic-webfont.eot');
+    src: url('/static/fonts/OpenSans-ExtraBoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
+         url('/static/fonts/OpenSans-ExtraBoldItalic-webfont.woff') format('woff'),
+         url('/static/fonts/OpenSans-ExtraBoldItalic-webfont.ttf') format('truetype'),
+         url('/static/fonts/OpenSans-ExtraBoldItalic-webfont.svg#OpenSansExtraboldItalic') format('svg');
+    font-weight: 800;
+    font-style: italic;
+
+}
+
diff --git a/sass/_index-variables.scss b/sass/_index-variables.scss
index 80b1512232..47eb6b9179 100644
--- a/sass/_index-variables.scss
+++ b/sass/_index-variables.scss
@@ -25,5 +25,5 @@ $header-font-family: "Open Sans", Helvetica, Arial, sans-serif;
 $lh: golden-ratio($body-font-size, 1);
 
 // Colors
-$mit-red: #990000;
+$mit-red: #933;
 $cream: #F6EFD4;
diff --git a/sass/_index.scss b/sass/_index.scss
index a441f03738..3718b41ec1 100644
--- a/sass/_index.scss
+++ b/sass/_index.scss
@@ -1,103 +1,3 @@
-@font-face {
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Open Sans'), local('OpenSans'), url('http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff') format('woff');
-}
-
-@font-face {
-  font-family: 'Open Sans';
-  font-style: italic;
-  font-weight: 400;
-  src: local('Open Sans Italic'), local('OpenSans-Italic'), url('http://themes.googleusercontent.com/static/fonts/opensans/v6/xjAJXh38I15wypJXxuGMBrrIa-7acMAeDBVuclsi6Gc.woff') format('woff');
-}
-
-@font-face {
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 800;
-  src: local('Open Sans Extrabold'), local('OpenSans-Extrabold'), url('http://themes.googleusercontent.com/static/fonts/opensans/v6/EInbV5DfGHOiMmvb1Xr-hqRDOzjiPcYnFooOUGCOsRk.woff') format('woff');
-}
-
-@font-face {
-  font-family: 'Open Sans';
-  font-style: italic;
-  font-weight: 800;
-  src: local('Open Sans Extrabold Italic'), local('OpenSans-ExtraboldItalic'), url('http://themes.googleusercontent.com/static/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxsBo4hlZyBvkZICS3KpNonM.woff') format('woff');
-}
-// Extends
-//---------------------------------------- //
-.wrapper {
-  @include box-sizing(border-box);
-  margin: 0 auto;
-  max-width: $fg-max-width;
-  min-width: $fg-min-width;
-  padding: lh();
-  width: flex-grid(12);
-}
-
-.subpage {
-  @extend .clearfix;
-  @extend .wrapper;
-
-  > div {
-    padding-left: flex-grid(4) + flex-gutter();
-
-    p {
-      margin-bottom: lh();
-    }
-
-    h1 {
-      margin-bottom: lh(.5);
-    }
-
-    h2 {
-      font: 18px $header-font-family;
-      color: #000;
-      margin-bottom: lh(.5);
-    }
-
-    ul {
-      list-style: disc outside none;
-
-      li {
-        list-style: disc outside none;
-      }
-    }
-  }
-}
-
-.clearfix:after {
-  content: ".";
-  display: block;
-  height: 0;
-  clear: both;
-  visibility: hidden;
-}
-
-.button {
-  @include border-radius(3px);
-  @include border-radius(3px);
-  @include inline-block();
-  @include transition();
-  background-color: $mit-red;
-  color: #fff;
-  margin: lh() 0 lh(.5);
-  padding: lh(.25) lh(.5);
-  text-decoration: none;
-  font-style: normal;
-  -webkit-font-smoothing: antialiased;
-
-  &:hover {
-    background-color: darken($mit-red, 10%);
-  }
-
-  span {
-    font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
-    font-style: italic;
-  }
-}
-
 body {
   background-color: #fff;
   color: #444;
@@ -144,17 +44,17 @@ body {
 }
 
 header.announcement {
-  // @include background-size(cover);
+  @include background-size(cover);
   background: #333;
   border-bottom: 1px solid #000;
   color: #fff;
   -webkit-font-smoothing: antialiased;
 
   &.home {
-    background: #e3e3e3 url("/static/images/marketing/shot-1-medium.jpg");
+    background: #e3e3e3 url("/static/images/marketing/shot-5-medium.jpg");
 
     @media screen and (min-width: 1200px) {
-      background: #e3e3e3 url("/static/images/marketing/shot-1-large.jpg");
+      background: #e3e3e3 url("/static/images/marketing/shot-5-large.jpg");
     }
 
     // @media screen and (max-width: 1199px) {
diff --git a/sass/_layout.scss b/sass/_layout.scss
index f1fd1d4395..f4fb52effe 100644
--- a/sass/_layout.scss
+++ b/sass/_layout.scss
@@ -9,8 +9,9 @@ html {
     background: #f3f3f3;
 
     div.header-wrapper {
+      // @include linear-gradient(lighten($mit-red, 5%), darken($mit-red, 5%));
       @include box-shadow(inset 0 1px 0 lighten($mit-red, 10%), 0 1px 1px #ccc);
-      @include linear-gradient(lighten($mit-red, 5%), darken($mit-red, 5%));
+      background: $mit-red;
       border-bottom: 1px solid darken($mit-red, 10%);
 
       header {
@@ -21,37 +22,52 @@ html {
 
         h1 {
           border-right: 1px solid darken($mit-red, 5%);
-          font-size: $body-font-size;
-          font-weight: bold;
-          margin: 0 $gw-gutter 0 0;
-          padding: 15px $gw-gutter 15px 0;
+          color: #000;
           display: block;
           float: left;
-          color: #000;
+          font-size: 20px;
+          font-weight: 800;
+          margin: 0 lh() 0 0;
+          padding: 17px lh() 17px 0;
           text-shadow: 0 1px 0 lighten($mit-red, 10%);
-
-          em {
-            @include inline-block();
-            padding-right: lh();
-          }
+          line-height: lh();
         }
 
         nav {
           float: left;
           display: block;
           margin: 0;
+          padding: 0;
           text-shadow: 0 -1px 0 darken($mit-red, 10%);
+          -webkit-font-smoothing: antialiased;
+
+          h2 {
+            float: left;
+            margin: 0;
+            padding: 19px 15px 12px 0;
+            line-height: lh();
+
+            a {
+              color: #fff;
+
+              &:hover {
+                color: rgba(#fff, .7);
+                text-decoration: none;
+              }
+            }
+          }
 
           ul {
             @extend .clearfix;
             display: inline-block;
-            padding: 15px 0;
+            padding: 19px 0 12px;
             margin: 0;
 
             li {
               margin-right: lh();
               display: inline-block;
               margin-bottom: 0;
+              line-height: lh();
 
               a {
                 color: #fff;
diff --git a/sass/marketing.scss b/sass/marketing.scss
index 545fe122f0..61dff2d197 100644
--- a/sass/marketing.scss
+++ b/sass/marketing.scss
@@ -1,6 +1,7 @@
 @import "bourbon/bourbon";
 @import "reset";
+@import "font-face";
 
 // pages
-@import "index-functions", "index-variables", "index";
+@import "index-functions", "index-variables", "index-extends", "index";
 @import "leanmodal";
diff --git a/video.html b/video.html
index 089dfb74c2..26c0207358 100644
--- a/video.html
+++ b/video.html
@@ -3,12 +3,12 @@
   <div class="video-player">
     <div id="ytapiplayer">
     </div>
-    
+
     <!-- TODO(Ernie/Kyle) move styles to css -->
     <iframe id="html5_player" type="text/html" frameborder="0">
     </iframe>
   </div>
-  
+
   <section class="video-controls">
     <ul>
       <li><span class="ui-icon ui-icon-play" onclick="play();"></span></li>