Reset styles for profile page and some for the info page

lms/static/sass/course/_info.scss

@@ -92,7 +92,7 @@ div.info-wrapper {
         @include box-sizing(border-box);
         padding: em(7) lh(.75);
         position: relative;
-        font-size: $body-font-size;
+        font-size: 1em;
 
         &.expandable,
         &.collapsable {
@@ -111,7 +111,6 @@ div.info-wrapper {
             border-bottom: 0;
             border-top: 1px solid $border-color;
             @include box-shadow(inset 0 1px 0 #eee);
-            padding-left: lh(1.5);
             font-size: 1em;
           }
         }
@@ -149,14 +148,12 @@ div.info-wrapper {
         }
 
         p {
-          font: 1em $sans-serif;
           letter-spacing: 0;
           margin: 0;
           text-transform: none;
 
           a {
             padding-right: 8px;
-            font-family: $sans-serif;
 
             &:before {
               color: #ccc;
@@ -175,14 +172,8 @@ div.info-wrapper {
         }
 
         a {
-          color: lighten($text-color, 10%);
           @include inline-block();
-          text-decoration: none;
-          @include transition();
-
-          &:hover {
-            color: $mit-red;
-          }
+          line-height: lh();
         }
       }
     }

lms/static/sass/course/_profile.scss

@@ -10,38 +10,26 @@ div.profile-wrapper {
 
     header {
       @extend .bottom-border;
-      margin: 0 ;
-      padding: lh(.5) lh();
+      margin: 0;
+      padding: lh(.5);
 
       h1 {
-        font-size: 18px;
         margin: 0;
         padding-right: 30px;
       }
-
-      a {
-        color: #999;
-        font-size: 12px;
-        position: absolute;
-        right: lh(.5);
-        text-transform: uppercase;
-        top: 13px;
-
-        &:hover {
-          color: #555;
-        }
-      }
     }
 
     ul {
       list-style: none;
+      padding: 0;
+      margin: 0;
 
       li {
         border-bottom: 1px solid #d3d3d3;
         @include box-shadow(0 1px 0 #eee);
         color: lighten($text-color, 10%);
         display: block;
-        padding: 7px lh();
+        padding: lh(.5) 0 lh(.5) lh(.5);
         position: relative;
         text-decoration: none;
         @include transition();
@@ -144,11 +132,14 @@ div.profile-wrapper {
     @extend .content;
 
     header {
-      @extend h1.top-header;
       @extend .clearfix;
+      @extend h1.top-header;
+      margin-bottom: lh();
 
       h1 {
         float: left;
+        font-size: 1em;
+        font-weight: 100;
         margin: 0;
       }
     }
@@ -162,6 +153,7 @@ div.profile-wrapper {
       border-top: 1px solid #e3e3e3;
       list-style: none;
       margin-top: lh();
+      padding-left: 0;
 
       > li {
         @extend .clearfix;
@@ -178,9 +170,11 @@ div.profile-wrapper {
           border-right: 1px dashed #ddd;
           @include box-sizing(border-box);
           display: table-cell;
+          letter-spacing: 0;
           margin: 0;
           padding: 0;
           padding-right: flex-gutter(9);
+          text-transform: none;
           width: flex-grid(2, 9);
         }
 
@@ -203,13 +197,37 @@ div.profile-wrapper {
 
             h3 {
               color: #666;
+
+              span {
+                color: #999;
+                font-size: em(14);
+                font-weight: 100;
+              }
+            }
+
+            p {
+              color: #999;
+              font-size: em(14);
+            }
+
+            section.scores {
+              margin: lh(.5) 0;
+
+              h3 {
+                font-size: em(14);
+                @include inline-block;
               }
 
               ol {
                 list-style: none;
+                margin: 0;
+                padding: 0;
+                @include inline-block;
 
                 li {
-                display: inline-block;
+                  @include inline-block;
+                  font-size: em(14);
+                  font-weight: normal;
                   padding-right: 1em;
                 }
               }
@@ -218,4 +236,5 @@ div.profile-wrapper {
         }
       }
     }
+  }
 }

lms/static/sass/course/base/_base.scss

-body {
-  font-family: $sans-serif;
-}
-
-h1, h2, h3, h4, h5, h6 {
+body, h1, h2, h3, h4, h5, h6, p, p a:link, p a:visited, a {
   font-family: $sans-serif;
 }
 

lms/static/sass/course/base/_extends.scss

 h1.top-header {
   border-bottom: 1px solid #e3e3e3;
   text-align: left;
-  font-size: 24px;
+  font-size: em(24);
   font-weight: 100;
   padding-bottom: lh();
 }

lms/templates/profile.html

@@ -139,19 +139,27 @@ $(function() {
               %>
 
               <h3><a href="${reverse('courseware_section', kwargs={'course_id' : course.id, 'chapter' : chapter['url_name'], 'section' : section['url_name']})}">
-                ${ section['display_name'] }</a> ${"({0:.3n}/{1:.3n}) {2}".format( float(earned), float(total), percentageString )}</h3>
+                ${ section['display_name'] }</a><span> ${"({0:.3n}/{1:.3n}) {2}".format( float(earned), float(total), percentageString )}</span></h3>
+              <p>
                 ${section['format']}
+
                 %if 'due' in section and section['due']!="":
+                  <em>
                   due ${section['due']}
+                  </em>
                 %endif
+              </p>
+
 
               %if len(section['scores']) > 0:
-                <ol class="scores">
-                  ${ "Problem Scores: " if section['graded'] else "Practice Scores: "}
+                <section class="scores">
+                  <h3> ${ "Problem Scores: " if section['graded'] else "Practice Scores: "} </h3>
+                  <ol>
                     %for score in section['scores']:
-                    <li class="score">${"{0:.3n}/{1:.3n}".format(float(score.earned),float(score.possible))}</li>
+                    <li>${"{0:.3n}/{1:.3n}".format(float(score.earned),float(score.possible))}</li>
                     %endfor
                   </ol>
+                </section>
               %endif
 
             </li> <!--End section-->