Start to change to ems and remove all of cream

cms/static/sass/_base.scss

@@ -2,6 +2,7 @@ $fg-column: 70px;
 $fg-gutter: 26px;
 $fg-max-columns: 12;
 $body-font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
+$sans-serif: "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
 $body-font-size: 14px;
 $body-line-height: 20px;
 
@@ -12,6 +13,7 @@ $orange: #f96e5b;
 $yellow: #fff8af;
 $cream: #F6EFD4;
 $mit-red: #933;
+$border-color: #ddd;
 
 @mixin hide-text {
   background-color: transparent;

lms/static/sass/application.scss

@@ -2,9 +2,9 @@
 
 @import 'base/reset';
 @import 'base/font_face';
+@import 'base/mixins';
 @import 'base/variables';
 @import 'base/base';
-@import 'base/mixins';
 @import 'base/extends';
 @import 'base/animations';
 

lms/static/sass/base/_mixins.scss

+@function em($pxval, $base: 16) {
+  @return #{$pxval / $base}em;
+}
+
 // Line-height
 @function lh($amount: 1) {
   @return $body-line-height * $amount;

lms/static/sass/base/_variables.scss

@@ -4,6 +4,8 @@ $gw-gutter: 20px;
 $fg-column: $gw-column;
 $fg-gutter: $gw-gutter;
 $fg-max-columns: 12;
+$fg-max-width: 1400px;
+$fg-min-width: 810px;
 
 $sans-serif: 'Open Sans', $verdana;
 $serif: $georgia;
@@ -19,14 +21,10 @@ $border-color: #C8C8C8;
 
 // old variables
 $body-font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
-$body-font-size: 14px;
-$body-line-height: golden-ratio($body-font-size, 1);
-
-$fg-max-width: 1400px;
-$fg-min-width: 810px;
+$body-font-size: em(14);
+$body-line-height: golden-ratio(.875em, 1);
 
 $light-gray: #ddd;
 $dark-gray: #333;
 $mit-red: #993333;
-$cream: #F6EFD4;
 $text-color: $dark-gray;

lms/static/sass/course.scss

@@ -2,9 +2,9 @@
 
 @import 'base/reset';
 @import 'base/font_face';
+@import 'base/mixins';
 @import 'base/variables';
 @import 'base/base';
-@import 'base/mixins';
 @import 'base/extends';
 @import 'base/animations';
 

lms/static/sass/course/_info.scss

@@ -3,6 +3,7 @@ div.info-wrapper {
 
   section.updates {
     @extend .content;
+    line-height: lh();
 
     > h1 {
       @extend .top-header;
@@ -19,26 +20,29 @@ div.info-wrapper {
       > li {
         @extend .clearfix;
         border-bottom: 1px solid #e3e3e3;
-        margin-bottom: lh(.5);
         padding-bottom: lh(.5);
         list-style-type: disk;
 
         &:first-child {
-          background: $cream;
-          border-bottom: 1px solid darken($cream, 10%);
           margin: 0 (-(lh(.5))) lh();
           padding: lh(.5);
         }
 
         ol, ul {
-          margin: lh() 0 0 lh();
-          list-style-type: circle;
+          margin: 0;
+          list-style-type: disk;
+
+          ol,ul {
+            list-style-type: circle;
+          }
         }
 
         h2 {
           float: left;
           margin: 0 flex-gutter() 0 0;
           width: flex-grid(2, 9);
+          font-size: body-font-size;
+          font-weight: bold;
         }
 
         section.update-description {
@@ -94,7 +98,7 @@ div.info-wrapper {
         border-bottom: 1px solid #d3d3d3;
         @include box-shadow(0 1px 0 #eee);
         @include box-sizing(border-box);
-        padding: 7px lh(.75);
+        padding: em(7) lh(.75);
         position: relative;
 
         &.expandable,
@@ -108,13 +112,13 @@ div.info-wrapper {
 
         ul {
           background: none;
-          margin: 7px (-(lh(.75))) 0;
+          margin: em(7) (-(lh(.75))) 0;
 
           li {
             border-bottom: 0;
             border-top: 1px solid #d3d3d3;
             @include box-shadow(inset 0 1px 0 #eee);
-            padding-left: 18px + lh(.75);
+            padding-left: lh(1.5);
           }
         }
 
@@ -150,7 +154,7 @@ div.info-wrapper {
           border-bottom: 0;
           @include box-shadow(none);
           color: #999;
-          font-size: 12px;
+          font-size: $body-font-size;
           font-weight: bold;
           text-transform: uppercase;
         }

lms/static/sass/course/_textbook.scss

@@ -62,7 +62,6 @@ div.book-wrapper {
         @extend .clearfix;
 
         li {
-          background-color: darken($cream, 4%);
 
           &.last {
             display: block;

lms/static/sass/course/discussion/_profile.scss

@@ -72,7 +72,6 @@ body.user-profile-page {
         margin-bottom: 30px;
 
         li {
-          background-color: lighten($cream, 3%);
           background-position: 10px center;
           background-repeat: no-repeat;
           @include border-radius(4px);

lms/static/sass/course/discussion/_question-view.scss

@@ -32,8 +32,6 @@ div.question-header {
 
         &.post-vote {
           @include border-radius(4px);
-          background-color: lighten($cream, 5%);
-          border: 1px solid darken( $cream, 10% );
           @include box-shadow(inset 0 1px 0px #fff);
         }
 
@@ -149,7 +147,7 @@ div.question-header {
 
           &.revision {
             text-align: center;
-            background:lighten($cream, 7%);
+            // background:lighten($cream, 7%);
 
             a {
               color: black;

lms/static/sass/course/old/.gitignore

-*.css

lms/static/sass/course/wiki/_wiki.scss

@@ -24,7 +24,6 @@ div.wiki-wrapper {
       }
 
       p {
-        color: darken($cream, 55%);
         float: left;
         line-height: 46px;
         margin-bottom: 0;
@@ -40,14 +39,12 @@ div.wiki-wrapper {
 
           input[type="button"] {
             @extend .block-link;
-            background-color: darken($cream, 5%);
             background-position: 12px center;
             background-repeat: no-repeat;
             border: 0;
             border-left: 1px solid darken(#f6efd4, 20%);
             @include border-radius(0);
             @include box-shadow(inset 1px 0 0 lighten(#f6efd4, 5%));
-            color: darken($cream, 80%);
             display: block;
             font-size: 12px;
             font-weight: normal;