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.

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 {

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);
 

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">