edx.org: adds in variables/mixins to support edx.org visual changes

lms/static/sass/base/_mixins.scss

-@function em($pxval, $base: 16) {
-  @return #{$pxval / $base}em;
+// mixins - font sizing
+@mixin font-size($sizeValue: 16){
+  font-size: $sizeValue + px;
+  font-size: ($sizeValue/10) + rem;
 }
 
-// Line-height
-@function lh($amount: 1) {
-  @return $body-line-height * $amount;
+// mixins - line height
+@mixin line-height($fontSize: auto){
+  line-height: ($fontSize*1.48) + px;
+  line-height: (($fontSize/10)*1.48) + rem;
 }
 
 // image-replacement hidden text
@@ -31,6 +34,15 @@
   display: block;
 }
 
+@function em($pxval, $base: 16) {
+  @return #{$pxval / $base}em;
+}
+
+// Line-height
+@function lh($amount: 1) {
+  @return $body-line-height * $amount;
+}
+
 
 //-----------------
 //  Theme Mixin Styles

lms/static/sass/base/_variables.scss

@@ -39,19 +39,33 @@ $outer-border-color: rgb(170, 170, 170);
 $light-gray: #ddd;
 $dark-gray: #333;
 
-// edx.org-related
-$m-gray-l1: rgb(203,203,203);
-$m-gray-l2: rgb(246,246,246);
-$m-gray: rgb(153,153,153);
-$m-gray-d1: rgb(102,102,102);
-$m-gray-d2: rgb(51,51,51);
-$m-gray-a1: rgb(80,80,80);
-$m-blue: rgb(65, 116, 170);
-// $m-blue: rgb(85, 151, 221); (used in marketing redesign)
-$m-blue-l1: rgb(85, 151, 221);
-$m-blue-d1: shade($m-blue,15%);
-$m-blue-s1: saturate($m-blue,15%);
-$m-pink: rgb(204,51,102);
+// edx.org marketing site variables
+$m-gray: #8A8C8F;
+$m-gray-l1: #97999B;
+$m-gray-l2: #A4A6A8;
+$m-gray-l3: #B1B2B4;
+$m-gray-l4: #F5F5F5;
+$m-gray-d1: #7D7F83;
+$m-gray-d2: #707276;
+$m-gray-d3: #646668;
+$m-gray-d4: #050505;
+
+$m-blue: #1AA1DE;
+$m-blue-l1: #2BACE6;
+$m-blue-l2: #42B5E9;
+$m-blue-l3: #59BEEC;
+$m-blue-d1: #1790C7;
+$m-blue-d2: #1580B0;
+$m-blue-d3: #126F9A;
+$m-blue-d4: #0A4A67;
+
+$m-pink: #B52A67;
+$m-pink-l1: #CA2F73;
+$m-pink-l2: #D33F80;
+$m-pink-l3: #D7548E;
+$m-pink-d1: #A0255B;
+$m-pink-d2: #8C204F;
+$m-pink-d3: #771C44;
 
 $m-base-font-size: em(15);