diff --git a/lms/static/images/bg-banner-example.png b/lms/static/images/bg-banner-example.png new file mode 100644 index 0000000000..a52ffb6ef2 Binary files /dev/null and b/lms/static/images/bg-banner-example.png differ diff --git a/lms/static/images/header-logo.png b/lms/static/images/header-logo.png index f1d2357e6b..df8cb13233 100644 Binary files a/lms/static/images/header-logo.png and b/lms/static/images/header-logo.png differ diff --git a/lms/static/sass/base/_base.scss b/lms/static/sass/base/_base.scss index 653e7c4759..b819776890 100644 --- a/lms/static/sass/base/_base.scss +++ b/lms/static/sass/base/_base.scss @@ -1,3 +1,7 @@ +// html { +// overflow-y: scroll; +// } + body { background: rgb(250,250,250); font-family: $sans-serif; diff --git a/lms/static/sass/base/_variables.scss b/lms/static/sass/base/_variables.scss index f30a6ca576..ddbd930323 100644 --- a/lms/static/sass/base/_variables.scss +++ b/lms/static/sass/base/_variables.scss @@ -14,7 +14,6 @@ $monospace: Monaco, 'Bitstream Vera Sans Mono', 'Lucida Console', monospace; $body-font-family: $sans-serif; $serif: $georgia; - $white: rgb(255,255,255); $black: rgb(0,0,0); $blue: rgb(29,157,217); @@ -31,12 +30,21 @@ $outer-border-color: rgb(170, 170, 170); // old variables $light-gray: #ddd; $dark-gray: #333; + // edx.org-related -$m-gray-l: rgb(247, 247, 247); -$m-gray: rgb(67,67,67); -$m-blue: rgb(23,174,223); -$m-blue-s: rgb(2,159,211); -$m-base-font-size: em(16); +$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(85, 151, 221); +$m-blue-l1: rgb(230,245,252); +$m-blue-d1: shade($m-blue,15%); +$m-blue-s1: saturate($m-blue,15%); +$m-pink: rgb(204,51,102); + +$m-base-font-size: em(15); $base-font-color: rgb(60,60,60); diff --git a/lms/static/sass/multicourse/_account.scss b/lms/static/sass/multicourse/_account.scss index 2be5f4ad45..d027da0250 100644 --- a/lms/static/sass/multicourse/_account.scss +++ b/lms/static/sass/multicourse/_account.scss @@ -1,3 +1,6 @@ +// plus on button +// border radius on inputs + // Account-Centric (Login/Register) // ===== @@ -5,8 +8,121 @@ .view-register, .view-login, .view-passwordreset { background: $white; + + + // edx.org - marketing typography + .heading-1, .heading-2, .heading-3, .heading-4, .heading-5, .body-text-emphasized, .body-text, .button-primary, .button-secondary { + display: block; + font-family: $sans-serif; + line-height: lh(1); + } + + .heading-2 { + font-size: 25px; + margin: 0 0 $baseline 0; + font-weight: 300; + text-transform: uppercase; + color: $m-blue; + } + + .heading-3 { + font-size: 21px; + margin: 0 0 $baseline 0; + font-weight: 300; + color: $m-gray-d2; + } + + .heading-4 { + font-size: 14px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0 !important; + color: $m-blue-s1; + } + + .heading-5 { + } + + // specific examples - body + .body-text-emphasized { + font-size: 18px; + margin: 0 0 $baseline 0; + font-weight: 300; + color: $m-gray-a1; + font-family: 'Open Sans', sans-serif; + line-height: lh(1.1); + } + + .body-text { + font-size: 15px; + margin: 0 0 $baseline 0; + color: $m-gray-a1; + line-height: lh(1); + } + + // specific examples - buttons + .button-primary { + @include border-radius(0); + @include linear-gradient($m-blue-s1 5%, $m-blue-d1 95%); + display: inline-block; + padding: $baseline/2 $baseline*2.5; + text-transform: lowercase; + color: $white; + letter-spacing: 0.1rem; + font-weight: 500; + cursor: pointer; + text-align: center; + border: none !important; + text-shadow: none; + letter-spacing: 0; + font-size: 16px; + box-shadow: none !important; + } + + .button-secondary { + @include linear-gradient($m-gray 5%, $m-gray-d1 95%); + display: inline-block; + padding: $baseline/2 $baseline*2.5; + text-transform: lowercase; + color: $white; + letter-spacing: 0.1rem; + font-weight: 600; + cursor: pointer; + text-align: center; + border: none !important; + text-shadow: none; + letter-spacing: 0; + font-size: 16px; + box-shadow: 0 !important; + } + + // layout .content-wrapper { - background: $m-gray-l; + background: $m-gray-l2; + padding-bottom: 0; + } + + .container, .introduction { + @include box-sizing(border-box); + @include clearfix; + margin: 0 auto; + width: 960px; + background: $white; + } + + .container { + padding: $baseline $baseline ($baseline*2) $baseline; + } + + .introduction { + padding: ($baseline*2) $baseline 0 $baseline; + + header h1 { + @extend .heading-2; + margin-bottom: $baseline; + padding-bottom: $baseline; + text-align: left; + } } } @@ -27,13 +143,10 @@ // shared .login, .register, .passwordreset, #forgot-password-modal #password-reset { - padding: ($baseline*1.5); - @include clearfix; // reset - horrible, but necessary p, ol, ul, h1, h2, h3, h4, h5, h6, label, input, textarea { - color: $m-gray; - font-family: $sans-serif; + @extend .body-text; } h1, h2, h3, h4, h5, h6 { @@ -50,8 +163,8 @@ } &:hover, &:active { - border-bottom: 1px dotted $m-blue-s; - color: $m-blue-s; + border-bottom: 1px dotted $m-blue-s1; + color: $m-blue-s1; } } @@ -59,72 +172,29 @@ font-weight: 600; } - p, ul, ol, dl, blockquote { - font-size: $m-base-font-size; - } - // basic layout - .introduction { - width: flex-grid(8); - } - .content, aside { @include box-sizing(border-box); + margin: $baseline 0 0 0; } .content { - margin-right: flex-gutter(); - width: flex-grid(8); + margin-right: ($baseline*2); + width: 660px; float: left; } aside { - margin: 0; - width: flex-grid(4); + width: 220px; float: left; - } - // introduction - .introduction { - - header { - @include clearfix(); - - h1 { - float: left; - width: flex-grid(5,8); - margin-right: flex-gutter(0); - font-family: $sans-serif; - font-size: em(36); - font-weight: 700; - text-align: left; - } - - .wrapper-action { - display: block; - float: right; - width: flex-grid(3,8); - margin-top: $baseline; - font-size: em(14); - text-align: right; - - .action { - @include button(simple, $m-gray-l); - @include box-sizing(border-box); - @include border-radius(3px); - padding: ($baseline/4) ($baseline/2); - font-size: em(16); - font-weight: 700; - letter-spacing: 0; - text-align: center; - } - } + p, ol, ul { + font-size: 14px !important; } } // content .content { - background: $white; } // aside @@ -138,53 +208,24 @@ } h3 { + @extend .heading-4; margin: 0 0 ($baseline/4) 0; - color: tint($black, 20%); - font-size: em(16); - font-weight: 600; - text-transform: uppercase; - } - - p, ul, ol, dl, blockquote { - color: tint($m-gray, 30%); - font-size: em(14); - } - - ol, ul { - margin: 0; - padding: 0; - list-style: none; - - li { - margin: 0 0 ($baseline/2); - line-height: 1.6em; - } } } } // forms form { - border: 1px solid tint($m-gray,70%); - @include border-radius(3px); - @include box-shadow(0 1px 2px 0 rgba(0,0,0, 0.3)); - - .instructions, fieldset, .form-actions, .status { - padding: ($baseline*1.5); - } .instructions { - padding-bottom: 0; - color: tint($m-gray, 30%); - font-size: em(14); + @extend .body-text-emphasized; + margin-bottom: $baseline; } fieldset { margin: 0; - padding-top: $baseline; + padding-top: 0; padding-bottom: $baseline; - // border-bottom: 1px solid rgba(216, 223, 230, 0.50); - } .list-input { @@ -222,9 +263,12 @@ // elements label, input, textarea { + @include border-radius(0); display: block; font-family: $sans-serif; font-style: normal; + font-weight: 500; + color: $m-gray-d2; } label { @@ -243,6 +287,7 @@ input, textarea { width: 100%; + margin: 0; padding: $baseline ($baseline*.75); &.long { @@ -308,11 +353,11 @@ &.is-focused { label { - color: $m-blue-s; + color: $m-blue-s1; } .tip { - color: $m-blue-s; + color: $m-blue-s1; } } @@ -358,14 +403,7 @@ @include clearfix(); button[type="submit"] { - @include button(simple, $m-blue-s); - @include box-sizing(border-box); - @include border-radius(3px); - padding: ($baseline*0.75) $baseline; - font-size: em(16); - font-weight: 700; - letter-spacing: 0; - text-align: center; + @extend .button-primary; &:disabled { opacity: 0.3; @@ -395,21 +433,23 @@ // forms - messages/status .status { @include box-sizing(border-box); - @include box-shadow(inset 0 -1px 2px 0 tint($yellow, 85%)); - border-top: 2px solid $yellow; - border-bottom: 1px solid tint($m-gray,70%); - background: tint($yellow,70%); + margin: 0 0 $baseline 0; + border-bottom: 3px solid shade($yellow, 10%); + padding: $baseline $baseline; + background: tint($yellow,20%); .message-title { + @extend .heading-4; margin: 0 0 ($baseline/4) 0; font-size: em(14); font-weight: 600; + color: $m-gray-d2 !important; } .message-copy { - margin: 0; + @extend .body-text; + margin: 0 !important; padding: 0; - font-size: em(14); list-style: none; li { @@ -420,13 +460,19 @@ .submission-error, .system-error { @include box-shadow(inset 0 -1px 2px 0 tint($red, 85%)); - border-top: 2px solid tint($red,65%); - background: tint($red,98%); + border-bottom: 3px solid shade($red, 10%); + background: tint($red,80%); .message-title { color: shade($red, 10%); } } + + // misc + .orn-plus { + color: $white; + padding: 0 $baseline/4; + } } // ===== @@ -434,24 +480,35 @@ // login .view-login { - .group-form-accountpreferences { - padding-top: 0; - padding-bottom: 0; + .introduction { + padding: 0; + + header { + height: 120px; + background: transparent url("../images/bg-banner-example.png") 0 0 no-repeat; + } } } // register .view-register { - .group-form-accountacknowledgements { - padding-top: 0; - padding-bottom: 0; + .introduction { + padding: 0; + + header { + height: 120px; + background: transparent url("../images/bg-banner-example.png") 0 0 no-repeat; + } } } // password reset .view-passwordreset { + .introduction { + + } } // modal password reset form @@ -461,7 +518,7 @@ .inner-wrapper { @include border-radius(2px); - background: $m-gray-l; + background: $m-gray-l1; padding-bottom: 0 !important; } @@ -483,14 +540,6 @@ } } - .instructions { - - p { - color: $m-gray; - font-size: em(14); - } - } - fieldset { padding: 0 !important; margin: ($baseline*1.25) 0 !important; diff --git a/lms/static/sass/shared/_footer.scss b/lms/static/sass/shared/_footer.scss index de084963ec..d891ff408b 100644 --- a/lms/static/sass/shared/_footer.scss +++ b/lms/static/sass/shared/_footer.scss @@ -26,8 +26,8 @@ } &:hover, &:active { - border-bottom: 1px dotted $m-blue-s; - color: $m-blue-s; + border-bottom: 1px dotted $m-blue-s1; + color: $m-blue-s1; } } @@ -49,7 +49,7 @@ color: tint($black, 20%); &:hover, &:active { - color: $m-blue-s; + color: $m-blue-s1; } } @@ -143,4 +143,20 @@ } } +} + +// marketing site design syncing +.view-register, .view-login { + + .wrapper-footer footer { + width: 960px; + + .colophon-about img { + margin-top: ($baseline*1.5); + } + + .colophon-about p { + width: 360px; + } + } } \ No newline at end of file diff --git a/lms/static/sass/shared/_header.scss b/lms/static/sass/shared/_header.scss index 4a31416ed7..5eb453448c 100644 --- a/lms/static/sass/shared/_header.scss +++ b/lms/static/sass/shared/_header.scss @@ -1,5 +1,5 @@ header.global { - border-bottom: 1px solid tint($m-gray,50%); + border-bottom: 1px solid $m-gray; @include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1)); background: $white; height: 76px; @@ -19,32 +19,9 @@ header.global { h1.logo { float: left; - margin: 0px 15px 0px 0px; - padding-right: 20px; + margin: -2px 39px 0px 0px; position: relative; - &::before { - @extend .faded-vertical-divider; - content: ""; - display: block; - height: 50px; - position: absolute; - right: 1px; - top: -8px; - width: 1px; - } - - &::after { - @extend .faded-vertical-divider-light; - content: ""; - display: block; - height: 50px; - position: absolute; - right: 0px; - top: -12px; - width: 1px; - } - a { display: block; } @@ -253,16 +230,16 @@ header.global { } .nav-global { - margin-top: ($baseline/4); + margin-top: ($baseline/2); list-style: none; li { display: inline-block; - margin: 0 ($baseline/4) 0 0; - font-size: em(16); + margin: 0 $baseline+1 0 0; + font-size: em(14); font-weight: 600; text-transform: uppercase; - letter-spacing: 0.5px; + letter-spacing: 0 !important; &:last-child { margin-right: 0; @@ -271,11 +248,12 @@ header.global { a { display:block; padding: ($baseline/4); - color: tint($black, 20%); + color: $m-gray-d1; + font-weight: 600; &:hover, &:active { text-decoration: none; - color: $m-blue-s; + color: $m-blue-s1; } } @@ -283,7 +261,7 @@ header.global { a { text-decoration: none; - color: $m-blue-s; + color: $m-blue-s1; } } } @@ -296,22 +274,28 @@ header.global { .nav-courseware { float: right; - margin-top: ($baseline/2); + margin-top: ($baseline/4); list-style: none; li { display: inline-block; a { - @include button(simple, $m-blue); - @include box-sizing(border-box); - @include border-radius(3px); - padding: ($baseline/4) ($baseline/2); - font-size: em(15); - font-weight: 500; - letter-spacing: 1px; + @include border-radius(0); + @include linear-gradient($m-blue-s1 5%, $m-blue-d1 95%); + display: inline-block; + padding: $baseline/2 $baseline*2.5; + text-transform: lowercase; + color: $white; + letter-spacing: 0.1rem; + font-weight: 300; + cursor: pointer; text-align: center; - text-transform: uppercase; + border: none !important; + text-shadow: none; + letter-spacing: 0.1rem; + font-size: 14px; + box-shadow: none !important; &:hover { text-decoration: none; @@ -324,19 +308,24 @@ header.global { } } +} +// marketing site design syncing +.view-register, .view-login { -// ===== - -// page-based nav states - .view-howitworks .nav-global-01, - .view-courses .nav-global-02, - .view-schools .nav-global-03, - .view-register .nav-global-04 { - - a { - text-decoration: none; - color: $m-blue-s !important; - } + header.global nav { + width: 960px; } } + +// page-based nav states +.view-howitworks .nav-global-01, +.view-courses .nav-global-02, +.view-schools .nav-global-03, +.view-register .nav-global-04 { + + a { + text-decoration: none; + color: $m-blue-s1 !important; + } +} \ No newline at end of file diff --git a/lms/templates/login.html b/lms/templates/login.html index d0e2f11eed..ad5c81b4eb 100644 --- a/lms/templates/login.html +++ b/lms/templates/login.html @@ -53,16 +53,13 @@ -
-
-
-

Log Into Your Account

- - Not enrolled? Sign up - -
-
+
+
+

Log Into Your Account

+
+
+

Login Form

@@ -117,7 +114,7 @@
- +
@@ -136,6 +133,9 @@ % endif
+

Not Enrolled?

+

Sign up for edX today!

+

Need Help?

Looking for help in logging in or with your edX account? View our help section for answers to commonly asked questions

diff --git a/lms/templates/navigation.html b/lms/templates/navigation.html index 945a54124e..0824ed3408 100644 --- a/lms/templates/navigation.html +++ b/lms/templates/navigation.html @@ -88,7 +88,7 @@ site_status_msg = get_site_status_msg(course_id)
  1. % if not settings.MITX_FEATURES['DISABLE_LOGIN_BUTTON']: - + % endif
diff --git a/lms/templates/register.html b/lms/templates/register.html index 3cd543fb90..636435444b 100644 --- a/lms/templates/register.html +++ b/lms/templates/register.html @@ -36,16 +36,13 @@ -
-
-
-

Register for edX

- - - -
-
+
+
+

Register for edX

+
+
+

Registration Form

@@ -186,7 +183,7 @@
- +
@@ -198,26 +195,17 @@

Welcome to edX

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. [Matt to provide copy]

-
- -
-

What an edX Account Gives You

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes. [Matt to provide copy]

+

Registering with edX gives you access to all of our current and future free courses. Not ready to take a course just yet? Registering puts you on our mailing list – we will update you as courses are added.

Next Steps

-
    -
  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    2. -
  2. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.
    3. -
  3. Donec quam felis, ultricies nec, pellentesque eu, pretium quis. [Matt to provide copy]
    4. -
+

As part of joining edX, you will receive an activation email. You must click on the activation link to complete the process. Don’t see the email? Check your spam folder and mark edX emails as ‘not spam’. At edX, we communicate mostly through email.

Need Help?

-

Looking for help in registering with edX? View our help section for answers to commonly asked questions

+

Need help in registering with edX? View our FAQs for answers to commonly asked questions. Once registered, most questions can be answered in the course specific discussion forums or through the FAQs.