Merge pull request #16 from MITx/kf-tutorials

Added new styles for tutorials

static/css/application.css

@@ -134,7 +134,7 @@ input, select {
   display: table;
   width: 100%; }
 
-h1.top-header, div.course-wrapper section.course-content h1, div.info-wrapper section.updates > h1, div.profile-wrapper section.course-info header, div.gradebook-wrapper section.gradebook-content h1, div.question-list-header {
+h1.top-header, div.course-wrapper section.course-content ol.vert-mod > li header, div.info-wrapper section.updates > h1, div.profile-wrapper section.course-info header, div.gradebook-wrapper section.gradebook-content h1, div.question-list-header {
   background: #f3f3f3;
   border-bottom: 1px solid #e3e3e3;
   margin: -22.652px -22.652px 22.652px;
@@ -466,8 +466,7 @@ a:visited {
 a:link, a:visited {
   text-decoration: none; }
 p a, li > a, span > a, a .inline {
-  border-bottom: 1px solid #bbb;
-  font-style: italic; }
+  border-bottom: 1px solid #bbb; }
 a:hover, a:focus {
   color: #000; }
 
@@ -2660,6 +2659,10 @@ body.courseware {
 
 div.course-wrapper ul, div.course-wrapper ol {
   list-style: none; }
+div.course-wrapper section.course-content {
+  overflow: hidden; }
+div.course-wrapper section.course-content h1 {
+  margin: 0 0 22.652px; }
 div.course-wrapper section.course-content p {
   margin-bottom: 22.652px; }
 div.course-wrapper section.course-content p:empty {
@@ -2773,6 +2776,16 @@ div.course-wrapper section.course-content ol.vert-mod > li {
   border-bottom: 1px solid #ddd;
   margin-bottom: 15px;
   padding: 0 0 15px; }
+div.course-wrapper section.course-content ol.vert-mod > li header {
+  margin-bottom: 0; }
+div.course-wrapper section.course-content ol.vert-mod > li header h1 {
+  margin: 0; }
+div.course-wrapper section.course-content ol.vert-mod > li header h2 {
+  float: right;
+  margin-right: 0;
+  margin-top: 8px;
+  text-align: right;
+  padding-right: 0; }
 div.course-wrapper section.course-content ol.vert-mod > li:last-child {
   border-bottom: none;
   margin-bottom: 0;
@@ -2780,9 +2793,27 @@ div.course-wrapper section.course-content ol.vert-mod > li:last-child {
 div.course-wrapper section.course-content ol.vert-mod > li ul {
   list-style: disc outside none;
   padding-left: 1em; }
+div.course-wrapper section.course-content section.tutorials h2 {
+  margin-bottom: 22.652px; }
 div.course-wrapper section.course-content section.tutorials ul {
-  list-style: disc outside none;
-  margin-left: 22.652px; }
+  margin: 0;
+  zoom: 1; }
+div.course-wrapper section.course-content section.tutorials ul:before, div.course-wrapper section.course-content section.tutorials ul:after {
+  content: "";
+  display: table; }
+div.course-wrapper section.course-content section.tutorials ul:after {
+  clear: both; }
+div.course-wrapper section.course-content section.tutorials ul li {
+  width: 31.522%;
+  float: left;
+  margin-right: 2.717%;
+  margin-bottom: 22.652px; }
+div.course-wrapper section.course-content section.tutorials ul li:nth-child(3n) {
+  margin-right: 0; }
+div.course-wrapper section.course-content section.tutorials ul li:nth-child(3n+1) {
+  clear: both; }
+div.course-wrapper section.course-content section.tutorials ul li a {
+  font-weight: bold; }
 div.course-wrapper section.course-content div.staff_info {
   zoom: 1;
   white-space: pre-wrap;
@@ -3480,9 +3511,11 @@ nav.sequence-nav {
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   margin-bottom: 22.652px;
-  position: relative; }
+  position: relative;
+  top: -1px; }
 nav.sequence-nav ol {
   border-bottom: 1px solid #e4d080;
+  border-top: 1px solid #e4d080;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;

templates/sass/base/_base.scss

@@ -63,7 +63,7 @@ a {
 
   p &, li > &, span > &, .inline {
     border-bottom: 1px solid #bbb;
-    font-style: italic;
+    // font-style: italic;
   }
 
   &:hover, &:focus {

templates/sass/courseware/_courseware.scss

@@ -17,9 +17,10 @@ div.course-wrapper {
 
   section.course-content {
     @extend .content;
+    overflow: hidden;
 
     h1 {
-      @extend .top-header;
+      margin: 0 0 lh();
     }
 
     p {
@@ -169,6 +170,23 @@ div.course-wrapper {
         margin-bottom: 15px;
         padding: 0 0 15px;
 
+        header {
+          @extend h1.top-header;
+          margin-bottom: 0;
+
+          h1 {
+            margin: 0;
+          }
+
+          h2 {
+            float: right;
+            margin-right: 0;
+            margin-top: 8px;
+            text-align: right;
+            padding-right: 0;
+          }
+        }
+
         &:last-child {
           border-bottom: none;
           margin-bottom: 0;
@@ -183,9 +201,32 @@ div.course-wrapper {
     }
 
     section.tutorials {
+      h2 {
+        margin-bottom: lh();
+      }
+
       ul {
-        list-style: disc outside none;
-        margin-left: lh();
+        margin: 0;
+        @include clearfix();
+
+        li {
+          width: flex-grid(3, 9);
+          float: left;
+          margin-right: flex-gutter(9);
+          margin-bottom: lh();
+
+          &:nth-child(3n) {
+            margin-right: 0;
+          }
+
+          &:nth-child(3n+1) {
+            clear: both;
+          }
+
+          a {
+            font-weight: bold;
+          }
+        }
       }
     }
 

templates/sass/courseware/_sequence-nav.scss

@@ -3,9 +3,11 @@ nav.sequence-nav {
   @include box-sizing(border-box);
   margin-bottom: $body-line-height;
   position: relative;
+  top: -1px;
 
   ol {
     border-bottom: 1px solid darken($cream, 20%);
+    border-top: 1px solid darken($cream, 20%);
     @include box-sizing(border-box);
     display: table;
     padding-right: flex-grid(1, 9);

templates/video.html

-% if name is not UNDEFINED and name != None: 
+% if name is not UNDEFINED and name != None:
   <h1> ${name} </h1>
 % endif