diff --git a/cms/static/img/content-types/module.png b/cms/static/img/content-types/module.png
new file mode 100644
index 0000000000..643c12d1d9
Binary files /dev/null and b/cms/static/img/content-types/module.png differ
diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss
index cb00dac83a..41424fe08f 100644
--- a/cms/static/sass/_base.scss
+++ b/cms/static/sass/_base.scss
@@ -8,7 +8,7 @@ $body-line-height: 20px;
$light-blue: #f0f7fd;
$dark-blue: #50545c;
$bright-blue: #3c8ebf;
-$orange: #f96e5b;
+$orange: #ea5155;
$yellow: #fff8af;
$cream: #F6EFD4;
$mit-red: #933;
@@ -41,15 +41,17 @@ input {
}
button, input[type="submit"], .button {
- background-color: $orange;
- border: 0;
+ @include box-shadow(inset 0 0 0 1px lighten($bright-blue, 15%));
+ @include linear-gradient(lighten($bright-blue, 10%), $bright-blue);
+ border-left: 1px solid lighten($dark-blue, 10%);
+ text-shadow: 0 -1px 0 darken($bright-blue, 10%);
color: #fff;
font-weight: bold;
padding: 8px 10px;
-webkit-font-smoothing: antialiased;
+ @include border-radius(4px);
- &:hover {
- background-color: shade($orange, 10%);
+ &:hover, &:focus {
}
}
diff --git a/cms/static/sass/_content-types.scss b/cms/static/sass/_content-types.scss
index 587646fb39..5fab0fe874 100644
--- a/cms/static/sass/_content-types.scss
+++ b/cms/static/sass/_content-types.scss
@@ -53,3 +53,8 @@
@extend .content-type;
background-image: url('../img/content-types/chapter.png');
}
+
+.module a:first-child {
+ @extend .content-type;
+ background-image: url('/static/img/content-types/module.png');
+}
diff --git a/cms/static/sass/_index.scss b/cms/static/sass/_index.scss
new file mode 100644
index 0000000000..a3e210b558
--- /dev/null
+++ b/cms/static/sass/_index.scss
@@ -0,0 +1,80 @@
+body.index {
+ > header {
+ display: none;
+ }
+
+ > h1 {
+ font-weight: 300;
+ color: lighten($dark-blue, 40%);
+ text-shadow: 0 1px 0 #fff;
+ -webkit-font-smoothing: antialiased;
+ max-width: 600px;
+ text-align: center;
+ margin: 80px auto 30px;
+ }
+
+ section.main-container {
+ border-right: 3px;
+ background: #FFF;
+ max-width: 600px;
+ margin: 0 auto;
+ display: block;
+ @include box-sizing(border-box);
+ border: 1px solid lighten( $dark-blue , 30% );
+ @include border-radius(3px);
+ overflow: hidden;
+ @include bounce-in-animation(.8s);
+
+ header {
+ border-bottom: 1px solid lighten($dark-blue, 50%);
+ @include linear-gradient(#fff, lighten($dark-blue, 62%));
+ @include clearfix();
+ @include box-shadow( 0 2px 0 $light-blue, inset 0 -1px 0 #fff);
+ text-shadow: 0 1px 0 #fff;
+
+ h1 {
+ font-size: 14px;
+ padding: 8px 20px;
+ float: left;
+ color: $dark-blue;
+ margin: 0;
+ }
+
+ a {
+ float: right;
+ padding: 8px 20px;
+ border-left: 1px solid lighten($dark-blue, 50%);
+ @include box-shadow( inset -1px 0 0 #fff);
+ font-weight: bold;
+ font-size: 22px;
+ line-height: 1;
+ color: $dark-blue;
+ }
+ }
+
+ ol {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+
+ li {
+ border-bottom: 1px solid lighten($dark-blue, 50%);
+
+ a {
+ display: block;
+ padding: 10px 20px;
+
+ &:hover {
+ color: $dark-blue;
+ background: lighten($yellow, 10%);
+ text-shadow: 0 1px 0 #fff;
+ }
+ }
+
+ &:last-child {
+ border-bottom: none;
+ }
+ }
+ }
+ }
+}
diff --git a/cms/static/sass/_keyframes.scss b/cms/static/sass/_keyframes.scss
new file mode 100644
index 0000000000..7661f18980
--- /dev/null
+++ b/cms/static/sass/_keyframes.scss
@@ -0,0 +1,27 @@
+@mixin bounce-in {
+ 0% {
+ opacity: 0;
+ @include transform(scale(.3));
+ }
+
+ 50% {
+ opacity: 1;
+ @include transform(scale(1.05));
+ }
+
+ 100% {
+ @include transform(scale(1));
+ }
+}
+
+@-moz-keyframes bounce-in { @include bounce-in(); }
+@-webkit-keyframes bounce-in { @include bounce-in(); }
+@-o-keyframes bounce-in { @include bounce-in(); }
+@keyframes bounce-in { @include bounce-in();}
+
+@mixin bounce-in-animation($duration, $timing: ease-in-out) {
+ @include animation-name(bounce-in);
+ @include animation-duration($duration);
+ @include animation-timing-function($timing);
+ @include animation-fill-mode(both);
+}
diff --git a/cms/static/sass/_layout.scss b/cms/static/sass/_layout.scss
index 419f1df9d8..43308a973c 100644
--- a/cms/static/sass/_layout.scss
+++ b/cms/static/sass/_layout.scss
@@ -20,7 +20,7 @@ body {
color: #fff;
display: block;
float: none;
- padding: 0 25px;
+ padding: 0 20px;
text-shadow: 0 -1px 0 darken($dark-blue, 15%);
width: 100%;
@@ -117,7 +117,7 @@ body {
@include box-sizing(border-box);
width: flex-grid(9) + flex-gutter();
float: left;
- @include box-shadow( -2px 0 0 darken($light-blue, 3%));
+ @include box-shadow( -2px 0 0 lighten($dark-blue, 55%));
@include transition();
background: #FFF;
}
diff --git a/cms/static/sass/_section.scss b/cms/static/sass/_section.scss
index fa08e02901..7558a2193b 100644
--- a/cms/static/sass/_section.scss
+++ b/cms/static/sass/_section.scss
@@ -1,6 +1,7 @@
section#unit-wrapper {
section.filters {
@include clearfix;
+ display: none;
opacity: .4;
margin-bottom: 10px;
@include transition;
@@ -52,6 +53,8 @@ section#unit-wrapper {
display: table;
border: 1px solid lighten($dark-blue, 40%);
width: 100%;
+ @include border-radius(3px);
+ @include box-shadow(0 0 4px lighten($dark-blue, 50%));
section {
header {
diff --git a/cms/static/sass/_unit.scss b/cms/static/sass/_unit.scss
index d8613be3c2..8c42ba9d08 100644
--- a/cms/static/sass/_unit.scss
+++ b/cms/static/sass/_unit.scss
@@ -1,19 +1,19 @@
section#unit-wrapper {
> header {
- border-bottom: 2px solid $dark-blue;
+ border-bottom: 1px solid lighten($dark-blue, 50%);
+ @include linear-gradient(#fff, lighten($dark-blue, 62%));
@include clearfix();
- @include box-shadow( 0 2px 0 darken($light-blue, 3%));
- padding: 6px 20px;
+ @include box-shadow( 0 2px 0 $light-blue, inset 0 -1px 0 #fff);
+ text-shadow: 0 1px 0 #fff;
section {
float: left;
+ padding: 10px 20px;
h1 {
- font-size: 16px;
- text-transform: uppercase;
- letter-spacing: 1px;
+ font-size: 18px;
@include inline-block();
- color: $bright-blue;
+ color: $dark-blue;
margin: 0;
}
@@ -22,32 +22,55 @@ section#unit-wrapper {
margin: 0;
a {
- text-indent: -9999px;
@include inline-block();
- width: 1px;
- height: 100%;
+ font-size: 12px;
}
}
}
div {
- float: right;
+ @include clearfix;
color: #666;
+ float: right;
+ padding: 0 20px;
a {
- display: block;
@include inline-block;
+ padding: 13px 20px;
- &.cancel {
- margin-right: 20px;
- font-style: italic;
- font-size: 12px;
- }
+ &.cancel {
+ margin-right: 20px;
+ font-style: italic;
+ font-size: 12px;
+ }
- &.save-update {
- @extend .button;
- margin: -6px -21px -6px 0;
- }
+ &.save-update {
+ border-left: 1px solid lighten($dark-blue, 40%);
+ border-right: 1px solid lighten($dark-blue, 40%);
+ // @include box-shadow(inset 0 0 0 1px lighten($bright-blue, 15%));
+ color: $bright-blue;
+ @include linear-gradient(lighten($dark-blue, 50%), lighten($bright-blue, 55%));
+
+ // &:hover, &:focus {
+ // color: $yellow;
+ // @include linear-gradient($bright-blue, darken($bright-blue, 10%));
+ // @include box-shadow(inset 0 0 3px 1px lighten($bright-blue, 10%));
+ // }
+ }
+ // &.save-update {
+ // border-left: 1px solid lighten($dark-blue, 10%);
+ // border-right: 1px solid lighten($dark-blue, 10%);
+ // @include box-shadow(inset 0 0 0 1px lighten($bright-blue, 15%));
+ // color: #fff;
+ // @include linear-gradient(lighten($bright-blue, 10%), $bright-blue);
+ // text-shadow: 0 -1px 0 darken($bright-blue, 10%);
+
+ // &:hover, &:focus {
+ // color: $yellow;
+ // @include linear-gradient($bright-blue, darken($bright-blue, 10%));
+ // @include box-shadow(inset 0 0 3px 1px lighten($bright-blue, 10%));
+ // }
+ // }
}
}
}
diff --git a/cms/static/sass/base-style.scss b/cms/static/sass/base-style.scss
index 35c02a4758..49a51a59fb 100644
--- a/cms/static/sass/base-style.scss
+++ b/cms/static/sass/base-style.scss
@@ -1,8 +1,9 @@
@import 'bourbon/bourbon';
@import 'vendor/normalize';
+@import 'keyframes';
@import 'base', 'layout', 'content-types';
@import 'calendar';
-@import 'section', 'unit';
+@import 'section', 'unit', 'index';
@import 'module/module-styles.scss';
diff --git a/cms/templates/base.html b/cms/templates/base.html
index 96f881421a..dba7df95b9 100644
--- a/cms/templates/base.html
+++ b/cms/templates/base.html
@@ -15,7 +15,7 @@
-
+
<%include file="widgets/header.html"/>
<%include file="courseware_vendor_js.html"/>
diff --git a/cms/templates/course_index.html b/cms/templates/course_index.html
index 92b5cc296c..e490ad7817 100644
--- a/cms/templates/course_index.html
+++ b/cms/templates/course_index.html
@@ -1,5 +1,6 @@
<%inherit file="base.html" />
<%block name="title">Course Manager
+<%include file="widgets/header.html"/>
<%block name="content">
diff --git a/cms/templates/index.html b/cms/templates/index.html
index 2998cb8bd6..6e3cb648ae 100644
--- a/cms/templates/index.html
+++ b/cms/templates/index.html
@@ -1,8 +1,16 @@
<%inherit file="base.html" />
+<%block name="bodyclass">index
<%block name="title">Courses
<%block name="content">
+edX Course Management
+
+
+
%for course, url in courses:
- ${course}