Skip to content

E
edx-platform
Commit 0dc14652 by Kyle Fiedler
Options

Change fonts to link to our server

parent e0299cd6
Showing with 162 additions and 131 deletions
navigation.html
<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>
......
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
......
sass/_base.scss
......@@ -21,7 +21,6 @@ p {
em {
font-style: italic;
font-family: Georgia, serif;
}
#{$all-text-inputs}, textarea {
......
sass/_font-face.scss
/* 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;
}
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;
sass/_index.scss
@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) {
......
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;
......
sass/marketing.scss
@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";
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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment