Merge pull request #15315 from edx/HarryRein/LEARNER-1297-course-date-formatting

LEARNER-1297: Updating date formatting in course home page.

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