From 71ae45fd0e9e0f871dd02fb6cc30ea5f57ab9554 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Mon, 4 Feb 2013 14:23:44 -0500 Subject: [PATCH] studio - soft landing UI: how it works styling - wip --- cms/static/sass/_header.scss | 7 +- cms/static/sass/_index.scss | 89 ++++++++++++++++++++--- cms/templates/howitworks.html | 16 +++-- cms/templates/index.html | 129 +++++++++++++++------------------- 4 files changed, 151 insertions(+), 90 deletions(-) diff --git a/cms/static/sass/_header.scss b/cms/static/sass/_header.scss index b65d9098e4..85f7f9eb19 100644 --- a/cms/static/sass/_header.scss +++ b/cms/static/sass/_header.scss @@ -40,7 +40,7 @@ .branding { position: relative; - padding-right: 15px; + padding-right: ($baseline*0.75); a { @include text-hide(); @@ -54,7 +54,8 @@ .info-course { position: relative; max-width: 200px; - padding-right: 15px; + margin-top: -3px; + padding-right: $baseline; @include font-size(14); &:before { @@ -94,7 +95,6 @@ text-overflow: ellipsis; @include font-size(16); font-weight: 600; - } } @@ -119,6 +119,7 @@ padding: 5px; text-transform: uppercase; font-weight: 600; + color: $gray-d3; &:hover, &:active { color: $blue; diff --git a/cms/static/sass/_index.scss b/cms/static/sass/_index.scss index f51be52f77..44ceeb538d 100644 --- a/cms/static/sass/_index.scss +++ b/cms/static/sass/_index.scss @@ -39,6 +39,10 @@ } + h1, h2, h3, h4, h5, h6 { + color: $gray-d3; + } + h2 { } @@ -60,6 +64,7 @@ } .content-header { + position: relative; text-align: center; color: $white; @@ -70,6 +75,7 @@ border-bottom: 1px solid $blue-l1; padding: 0; font-weight: 600; + color: $white; } .tagline { @@ -79,11 +85,41 @@ } } + .arrow_box { + position: relative; + background: #fff; + border: 4px solid #000; + } + .arrow_box:after, .arrow_box:before { + top: 100%; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .arrow_box:after { + border-color: rgba(255, 255, 255, 0); + border-top-color: #fff; + border-width: 30px; + left: 50%; + margin-left: -30px; + } + .arrow_box:before { + border-color: rgba(0, 0, 0, 0); + border-top-color: #000; + border-width: 36px; + left: 50%; + margin-left: -36px; + } + // feature content .wrapper-content-features { @include box-shadow(0 -1px ($baseline/4) $shadow); padding-bottom: ($baseline*2); - padding-top: ($baseline*2); + padding-top: ($baseline*3); background: $white; } @@ -101,10 +137,15 @@ padding: 0 0 ($baseline*2) 0; .img { + @include box-sizing(border-box); float: left; width: flex-grid(3, 12); margin-right: flex-gutter(); + a { + display: block; + } + img { display: block; width: 100%; @@ -126,6 +167,11 @@ > p { @include font-size(18); + color: $gray-d1; + } + + strong { + font-weight: 700; } .list-proofpoints { @@ -135,23 +181,38 @@ margin: ($baseline*1.5) 0 0 0; .proofpoint { + @include transition(color .15s ease-in-out); float: left; width: flex-grid(3, 9); margin-right: flex-gutter(); - - &:last-child { - margin-right: 0; - } + color: $gray-l1; + cursor: pointer; .title { @include font-size(16); margin: 0 0 ($baseline/4) 0; font-weight: 600; + color: $gray-d3; + } + + &:hover { + color: $gray-d3; + } + + &:last-child { + margin-right: 0; } } } } + + &:last-child { + margin-bottom: 0; + border: none; + padding-bottom: 0; + } + &:nth-child(even) { .img { @@ -164,12 +225,20 @@ float: right; text-align: right; } - } - &:last-child { - margin-bottom: 0; - border: none; - padding-bottom: 0; + .list-proofpoints { + + .proofpoint { + float: right; + width: flex-grid(3, 9); + margin-left: flex-gutter(); + margin-right: 0; + + &:last-child { + margin-left: 0; + } + } + } } } } diff --git a/cms/templates/howitworks.html b/cms/templates/howitworks.html index 8f7349d476..f634af77b8 100644 --- a/cms/templates/howitworks.html +++ b/cms/templates/howitworks.html @@ -24,8 +24,10 @@
  1. - Studio Helps You Keep Your Courses Organized -
    Studio Helps You Keep Your Courses Organized
    + + Studio Helps You Keep Your Courses Organized +
    Studio Helps You Keep Your Courses Organized
    +
    @@ -53,8 +55,10 @@
  2. - Studio Keeps Your Learning Sequences and Lectures, Together + + Studio Keeps Your Learning Sequences and Lectures, Together
    Studio Keeps Your Learning Sequences and Lectures, Together
    +
    @@ -82,8 +86,10 @@
  3. - Studio Gives You Simple, Fast, and Incremental Publishing. With Friends. -
    Studio Gives You Simple, Fast, and Incremental Publishing. With Friends.
    + + Studio Gives You Simple, Fast, and Incremental Publishing. With Friends. +
    Studio Gives You Simple, Fast, and Incremental Publishing. With Friends.
    +
    diff --git a/cms/templates/index.html b/cms/templates/index.html index af4767afeb..1172078893 100644 --- a/cms/templates/index.html +++ b/cms/templates/index.html @@ -1,80 +1,65 @@ <%inherit file="base.html" /> -% if user.is_authenticated(): - <%block name="title">Courses - <%block name="bodyclass">is-signedin index dashboard +<%block name="title">Courses +<%block name="bodyclass">is-signedin index dashboard - <%block name="header_extras"> - - - - <%block name="content"> -
    -
    -

    My Courses

    -
    - % if user.is_active: - New Course - - % else: -
    -

    - In order to start authoring courses using edX studio, please click on the activation link in your email. -

    -
    - % endif -
    +
    +
    + + +
    +
    -
    - - -% else: -<%block name="title">Welcome to edX Studio -<%block name="bodyclass">not-signedin index howitworks + + + <%block name="content"> - -
    -
    - -
    -
    - -% endif \ No newline at end of file +
    +
    +

    My Courses

    +
    + % if user.is_active: + New Course + + % else: +
    +

    + In order to start authoring courses using edX studio, please click on the activation link in your email. +

    +
    + % endif +
    +
    +
    + \ No newline at end of file