From b90aa2e2dbbeef3a22d02566dd1242a91fa5e0c5 Mon Sep 17 00:00:00 2001
From: Kyle Fiedler <kfiedler@thoughtbot.com>
Date: Wed, 1 Aug 2012 17:35:58 -0400
Subject: [PATCH] Added more styles for the info page and added headers for the
 updates and handouts so they will be consistant for every class

---
 lms/static/sass/base/_variables.scss      |  6 ++--
 lms/static/sass/course/_info.scss         | 20 ++++++++----
 lms/static/sass/course/base/_extends.scss |  6 ++--
 lms/templates/info.html                   | 40 ++++++++++++-----------
 4 files changed, 41 insertions(+), 31 deletions(-)

diff --git a/lms/static/sass/base/_variables.scss b/lms/static/sass/base/_variables.scss
index 2da5855f0a..7ad30f0c91 100644
--- a/lms/static/sass/base/_variables.scss
+++ b/lms/static/sass/base/_variables.scss
@@ -8,8 +8,11 @@ $fg-max-width: 1400px;
 $fg-min-width: 810px;
 
 $sans-serif: 'Open Sans', $verdana;
+$body-font-family: $sans-serif;
 $serif: $georgia;
 
+$body-font-size: em(14);
+$body-line-height: golden-ratio(.875em, 1);
 $base-font-color: rgb(60,60,60);
 $lighter-base-font-color: rgb(160,160,160);
 
@@ -20,9 +23,6 @@ $error-red: rgb(253, 87, 87);
 $border-color: #C8C8C8;
 
 // old variables
-$body-font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
-$body-font-size: em(14);
-$body-line-height: golden-ratio(.875em, 1);
 
 $light-gray: #ddd;
 $dark-gray: #333;
diff --git a/lms/static/sass/course/_info.scss b/lms/static/sass/course/_info.scss
index 5ba50dd8f5..d9af9c0f82 100644
--- a/lms/static/sass/course/_info.scss
+++ b/lms/static/sass/course/_info.scss
@@ -16,10 +16,12 @@ div.info-wrapper {
     > ol {
       list-style: none;
       padding-left: 0;
+      margin-bottom: lh();
 
       > li {
         @extend .clearfix;
         border-bottom: 1px solid #e3e3e3;
+        margin-bottom: lh();
         padding-bottom: lh(.5);
         list-style-type: disk;
 
@@ -41,7 +43,7 @@ div.info-wrapper {
           float: left;
           margin: 0 flex-gutter() 0 0;
           width: flex-grid(2, 9);
-          font-size: body-font-size;
+          font-size: $body-font-size;
           font-weight: bold;
         }
 
@@ -68,16 +70,20 @@ div.info-wrapper {
     @extend .sidebar;
     border-left: 1px solid #d3d3d3;
     @include border-radius(0 4px 4px 0);
+    @include box-shadow(none);
     border-right: 0;
 
-    header {
+    h1 {
       @extend .bottom-border;
-      padding: lh(.5) lh(.75);
+      padding: lh(.5) lh(.5);
+    }
 
-      h1 {
-        font-size: 18px;
-        margin: 0 ;
-      }
+    header {
+
+      // h1 {
+      //   font-weight: 100;
+      //   font-style: italic;
+      // }
 
       p {
          color: #666;
diff --git a/lms/static/sass/course/base/_extends.scss b/lms/static/sass/course/base/_extends.scss
index 5710aa9639..5927cb569e 100644
--- a/lms/static/sass/course/base/_extends.scss
+++ b/lms/static/sass/course/base/_extends.scss
@@ -60,11 +60,13 @@ h1.top-header {
   width: flex-grid(3);
 
   h1, h2 {
-   font-size: 18px;
-   font-weight: bold;
+   font-size: em(18);
+   font-weight: 100;
    letter-spacing: 0;
    text-transform: none;
    font-family: $sans-serif;
+   text-align: left;
+   font-style: italic;
   }
 
   a {
diff --git a/lms/templates/info.html b/lms/templates/info.html
index 25ad4f9184..a04e31896f 100644
--- a/lms/templates/info.html
+++ b/lms/templates/info.html
@@ -20,23 +20,25 @@ $(document).ready(function(){
 </%block>
 
 <section class="container">
-  <section class="courseware">
-    <div class="info-wrapper">
-      % if user.is_authenticated():
-      <section class="updates">
-        ${get_course_info_section(course, 'updates')}
-      </section>
-      <section aria-label="Handout Navigation" class="handouts">
-        ${get_course_info_section(course, 'handouts')}
-      </section>
-      % else:
-      <section class="updates">
-        ${get_course_info_section(course, 'guest_updates')}
-      </section>
-      <section aria-label="Handout Navigation" class="handouts">
-        ${get_course_info_section(course, 'guest_handouts')}
-      </section>
-      % endif
-    </div>
-  </section>
+  <div class="info-wrapper">
+    % if user.is_authenticated():
+    <section class="updates">
+      <h1>Course Updates &amp; News</h1>
+      ${get_course_info_section(course, 'updates')}
+    </section>
+    <section aria-label="Handout Navigation" class="handouts">
+      <h1>Course Handouts</h1>
+      ${get_course_info_section(course, 'handouts')}
+    </section>
+    % else:
+    <section class="updates">
+      <h1>Course Updates &amp; News</h1>
+      ${get_course_info_section(course, 'guest_updates')}
+    </section>
+    <section aria-label="Handout Navigation" class="handouts">
+      <h1>Course Handouts</h1>
+      ${get_course_info_section(course, 'guest_handouts')}
+    </section>
+    % endif
+  </div>
 </section>