Change fonts to link to our server

2012-01-27 16:05:17 -05:00
parent e0299cd6de
commit 0dc1465248
9 changed files with 162 additions and 131 deletions
--- 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>
--- 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
--- 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 {
--- 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;
+
+}
+
--- 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;
--- 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) {
--- 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;
--- 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";
--- 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>