From 6cbfb6c9f58a50fa62461c029e8dc2fd8bee292c Mon Sep 17 00:00:00 2001
From: Harry Rein <hrein@edx.org>
Date: Tue, 13 Jun 2017 14:07:37 -0400
Subject: [PATCH] 1) Updating version two of styling variables to use a file
 layout similar to the initial version. 2) Updating the course experience sass
 file to use variables it can reference in the version two variable sass file.
 3) Updating date styling on course home page as explained in LEARNER-1297. 4)
 Expanding side outline panel to take up a third and not a quarter of the
 content size.

---
 .../sass/features/_course-experience.scss     | 19 +++++---------
 lms/static/sass/shared-v2/_variables.scss     | 26 +++++++++++++++++--
 .../course-home-fragment.html                 |  2 +-
 3 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/lms/static/sass/features/_course-experience.scss b/lms/static/sass/features/_course-experience.scss
index 6920862c58..0337bf41d3 100644
--- a/lms/static/sass/features/_course-experience.scss
+++ b/lms/static/sass/features/_course-experience.scss
@@ -7,7 +7,7 @@
 
   h1, h2, h3 {
     font-size: font-size(large);
-    font-weight: bold;
+    font-weight: $font-bold;
     color: $black;
   }
 }
@@ -42,7 +42,7 @@
         padding: 0;
 
         h3 {
-          font-weight: bold;
+          font-weight: $font-bold;
           font-size: 1.1rem;
           margin: 0;
         }
@@ -120,8 +120,10 @@
     @include border-left(3px solid $gray-l3);
 
     .heading {
-      @extend %t-title7;
-      color: $gray-d2;
+      font-size: 1.1rem;
+      line-height: 1;
+      font-weight: $font-bold;
+      color: $lms-gray;
     }
 
     .description {
@@ -129,29 +131,22 @@
       margin-bottom: $baseline/2;
       display: inline-block;
       color: $gray-d1;
-      @extend %t-title8;
     }
 
     .date-summary-link {
-      @extend %t-title8;
       font-weight: $font-semibold;
       a {
         color: $link-color;
-        font-weight: normal;
+        font-weight: $font-regular;
       }
     }
 
     .date {
       color: $gray-d1;
-      @extend %t-title9;
     }
 
     &-todays-date {
       @include border-left(3px solid $blue);
-
-      .heading {
-        @extend %t-title8;
-      }
     }
 
     &-verified-upgrade-deadline {
diff --git a/lms/static/sass/shared-v2/_variables.scss b/lms/static/sass/shared-v2/_variables.scss
index 9d09fa220e..503efd066b 100644
--- a/lms/static/sass/shared-v2/_variables.scss
+++ b/lms/static/sass/shared-v2/_variables.scss
@@ -1,7 +1,19 @@
-// LMS variables
+// lms - utilities - variables
+// ====================
 
+// #GRID:           Grid and layout variables
+// #COLORS:         Base, palette and theme color definitions + application
+// #TYPOGRAPHY:     Font definitions and scales
+// #ICONS:          Icon specific colors + other styling
+
+// ----------------------------
+// #GRID
+// ----------------------------
 $lms-max-width: 1180px;
 
+// ----------------------------
+// #COLORS
+// ----------------------------
 $lms-gray: palette(grayscale, base);
 $lms-background-color: palette(grayscale, x-back);
 $lms-container-background-color: $white;
@@ -19,7 +31,17 @@ $white-opacity-80: rgba(255, 255, 255, 0.8);
 $light-grey-transparent: rgba(200,200,200, 0);
 $light-grey-solid: rgba(200,200,200, 1);
 
-// Icons
+// ----------------------------
+// #TYPOGRAPHY
+// ----------------------------
+$font-light: 300 !default;
+$font-regular: 400 !default;
+$font-semibold: 600 !default;
+$font-bold: 700 !default;
+
+// ----------------------------
+// #ICONS
+// ----------------------------
 $lms-dark-icon-color: $white;
 $lms-dark-icon-background-color: palette(grayscale, black);
 
diff --git a/openedx/features/course_experience/templates/course_experience/course-home-fragment.html b/openedx/features/course_experience/templates/course_experience/course-home-fragment.html
index b6d0ea2646..85ce1b1bd9 100644
--- a/openedx/features/course_experience/templates/course_experience/course-home-fragment.html
+++ b/openedx/features/course_experience/templates/course_experience/course-home-fragment.html
@@ -55,7 +55,7 @@ from openedx.features.course_experience import UNIFIED_COURSE_TAB_FLAG
         </div>
     </header>
     <div class="page-content">
-        <div class="layout layout-1q3q">
+        <div class="layout layout-1t2t">
             <main class="layout-col layout-col-b">
                 % if welcome_message_fragment and UNIFIED_COURSE_TAB_FLAG.is_enabled(course.id):
                     <div class="section section-dates">