Merge pull request #1129 from edx/talbs/fix-lms-banners

edx.org/LMS: Use/Style Semantic Text in Login and Registration Banners

lms/static/sass/base/_variables.scss

@@ -215,6 +215,10 @@ $action-secondary-active-focused-shadow: $m-pink-d2;
 $action-secondary-disabled-bg: $m-gray-d3;
 $action-secondary-disabled-fg: $white;
 
+// HEADER: graphic-based page titles
+$header-graphic-super-color: $m-blue-d1;
+$header-graphic-sub-color: $m-gray-d2;
+
 // ====================
 
 // MISC: visual horizontal rules
@@ -279,8 +283,8 @@ $footer_margin: ($baseline/4) 0 ($baseline*1.5) 0;
 // IMAGES: backgrounds
 $homepage-bg-image: '../images/homepage-bg.jpg';
 
-$login-banner-image: url(../images/bg-banner-login.png);
-$register-banner-image: url(../images/bg-banner-register.png);
+$login-banner-image: url(../images/bg-banner-account.png);
+$register-banner-image: url(../images/bg-banner-account.png);
 
 $video-thumb-url: '../images/courses/video-thumb.jpg';
 

lms/static/sass/multicourse/_account.scss

@@ -117,11 +117,43 @@
   .introduction {
     padding: ($baseline*2) $baseline 0 $baseline;
 
-    header h1 {
-      @extend %heading-2;
-      margin-bottom: $baseline;
-      padding-bottom: $baseline;
-      text-align: left;
+    header {
+      position: relative;
+
+      // CASE: normal typographical headings
+      h1 {
+        @extend %heading-2;
+        margin-bottom: $baseline;
+        padding-bottom: $baseline;
+        text-align: left;
+      }
+
+      // CASE: marketing/imageery-based headings
+      .title {
+        position: absolute;
+        top: ($baseline*2.5);
+        left:($baseline*1.5);
+
+        .title-super, .title-sub {
+          @extend %t-weight1;
+          display: block;
+          letter-spacing: 0;
+        }
+
+        .title-super {
+          @include font-size(26);
+          @include line-height(18);
+          text-transform: uppercase;
+          color: $header-graphic-super-color;
+        }
+
+        .title-sub {
+          @include font-size(20);
+          margin-left: ($baseline*2);
+          text-transform: lowercase;
+          color: $header-graphic-sub-color;
+        }
+      }
     }
   }
 }

lms/templates/login.html

@@ -94,7 +94,10 @@
 
 <section class="introduction">
   <header>
-    <h1 class="sr">${_("Please log in to access your account and courses")}</h1>
+    <h1 class="title">
+      <span class="title-super">${_("Please log in")}</span>
+      <span class="title-sub">${_("to access your account and courses")}</span>
+    </h1>
   </header>
 </section>
 

lms/templates/register.html

@@ -90,7 +90,10 @@
 
 <section class="introduction">
   <header>
-    <h1 class="sr">${_("Welcome! Register below to create your {platform_name} account").format(platform_name=settings.PLATFORM_NAME)}</h1>
+    <h1 class="title">
+      <span class="title-super">${_("Welcome!")}</span>
+      <span class="title-sub">${_("Register below to create your {platform_name} account").format(platform_name=settings.PLATFORM_NAME)}</span>
+    </h1>
   </header>
 </section>