renames some scss files for better orginization, sets fixed widths on main…

renames some scss files for better orginization, sets fixed widths on main containers to avoid akward scaling issues untill media queries can be added for more responsive scaling

lms/static/sass/_about_pages.scss

 .container.about {
-  padding: 20px 0 120px;
+  padding: 20px 10px 120px;
 
   > nav {
     margin-bottom: 80px;

lms/static/sass/_course_about.scss

@@ -24,8 +24,9 @@
       @include clearfix;
       margin: 0 auto;
       max-width: 1200px;
+      padding: 0px 10px;
       position: relative;
-      width: flex-grid(12);
+      width: grid-width(12);
       z-index: 2;
 
 

lms/static/sass/_dashboard.scss

@@ -48,42 +48,43 @@
             padding-bottom: 10px;
 
             &:hover {
-              .icon {
+              .title .icon {
                 opacity: 1;
               }
             }
 
-            p {
+            span.title {
               color: $lighter-base-font-color;
               float: left;
               font-family: $sans-serif;
 
-              span {
-                font-weight: 700;
-                margin-left: 12px;
+              .icon {
+                background-size: cover;
+                float: left;
+                height: 19px;
+                margin: 2px 8px 0 0;
+                opacity: 0.6;
+                @include transition(all, 0.15s, linear);
+                width: 19px;
+
+                &.email-icon {
+                  @include background-image(url('/static/images/portal-icons/email-icon.png'));
+                }
+
+                &.location-icon {
+                  @include background-image(url('/static/images/portal-icons/home-icon.png'));
+                }
+
+                &.language-icon {
+                  @include background-image(url('/static/images/portal-icons/language-icon.png'));
+                }
               }
             }
 
-            .icon {
-              background-size: cover;
-              float: left;
-              height: 19px;
-              margin: 2px 8px 0 0;
-              opacity: 0.6;
-              @include transition(all, 0.15s, linear);
-              width: 19px;
-
-              &.email-icon {
-                @include background-image(url('/static/images/portal-icons/email-icon.png'));
-              }
-
-              &.location-icon {
-                @include background-image(url('/static/images/portal-icons/home-icon.png'));
-              }
-
-              &.language-icon {
-                @include background-image(url('/static/images/portal-icons/language-icon.png'));
-              }
+            span.data {
+              color: $lighter-base-font-color;
+              font-weight: 700;
+              margin-left: 12px;
             }
           }
         }

lms/static/sass/_home.scss

@@ -17,6 +17,7 @@
       @extend .animation-home-header-pop-up;
       max-width: 1200px;
       margin: 0 auto;
+      padding: 0 10px;
       position: relative;
       text-align: center;
 
@@ -32,7 +33,7 @@
       border: 1px solid rgb(100,100,100);
       @include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5));
       @include inline-block;
-      padding: 30px 50px 30px;
+      padding: 20px 30px 30px;
       position: relative;
       text-align: center;
       z-index: 1;
@@ -40,22 +41,10 @@
 
     .title {
       @include inline-block;
-      //margin-right: 50px;
-      //padding-right: 50px;
       position: relative;
       text-align: left;
       vertical-align: middle;
 
-      &::before {
-        @extend .faded-vertical-divider;
-        //content: "";
-        display: block;
-        height: 170px;
-        position: absolute;
-        right: 0px;
-        top: -20px;
-      }
-
       &::after {
         @extend .faded-vertical-divider-light;
         content: "";

lms/static/sass/application.scss

 @import 'bourbon/bourbon';
-@import 'base_styles/reset';
-@import 'base_styles/font_face';
-@import 'base_styles/base';
-@import 'base_styles/base_mixins';
-@import 'base_styles/base_extends';
-@import 'base_styles/base_animations';
 
+@import 'base/reset';
+@import 'base/font_face';
+@import 'base/variables';
+@import 'base/base';
+@import 'base/mixins';
+@import 'base/extends';
+@import 'base/animations';
+
+
+// Courseware styles
 @import 'sass_old/base/variables';
 @import 'sass_old/base/extends';
 @import 'sass_old/base/functions';
 
-@import 'shared_styles/shared_forms';
-@import 'shared_styles/shared_footer';
-@import 'shared_styles/shared_header';
-@import 'shared_styles/course_object';
-@import 'shared_styles/shared_course_filter';
-@import 'shared_styles/shared_modal';
-@import 'shared_styles/activation_messages';
+
+// Multicourse styles
+@import 'shared/forms';
+@import 'shared/footer';
+@import 'shared/header';
+@import 'shared/course_object';
+@import 'shared/course_filter';
+@import 'shared/modal';
+@import 'shared/activation_messages';
 
 @import 'home';
 @import 'dashboard';
@@ -27,6 +33,8 @@
 @import 'about_pages';
 @import 'press_release';
 
+
+// Courseware styles
 @import 'sass_old/courseware/courseware';
 @import 'sass_old/courseware/sequence-nav';
 @import 'sass_old/courseware/sidebar';

lms/static/sass/base_styles/_base.scss → lms/static/sass/base/_base.scss

-$gw-column: 60px;
-$gw-gutter: 25px;
-
-$fg-column: $gw-column;
-$fg-gutter: $gw-gutter;
-$fg-max-columns: 12;
-
-$sans-serif: 'Open Sans', $verdana;
-$serif: $georgia;
-
-$base-font-color: rgb(60,60,60);
-$lighter-base-font-color: rgb(160,160,160);
-
-$blue: rgb(29,157,217);
-$pink: rgb(182,37,104);
-$yellow: rgb(255, 252, 221);
-$error-red: rgb(253, 87, 87);
-
 html, body {
   background: rgb(250,250,250);
   font-family: $sans-serif;
@@ -100,8 +82,8 @@ a:link, a:visited {
 .container {
   @include clearfix;
   margin: 0 auto 0;
-  max-width: 1200px;
-  width: flex-grid(12);
+  padding: 0px 10px;
+  width: grid-width(12);
 }
 
 .static-container {

lms/static/sass/base_styles/_base_extends.scss → lms/static/sass/base/_extends.scss

@@ -77,6 +77,7 @@
   border: none;
 }
 
+//Styles for Error messages
 .error-message-colors {
   background: $error-red;
   border: 1px solid rgb(202, 17, 17);

lms/static/sass/base/_variables.scss

+$gw-column: 80px;
+$gw-gutter: 20px;
+
+$fg-column: $gw-column;
+$fg-gutter: $gw-gutter;
+$fg-max-columns: 12;
+
+$sans-serif: 'Open Sans', $verdana;
+$serif: $georgia;
+
+$base-font-color: rgb(60,60,60);
+$lighter-base-font-color: rgb(160,160,160);
+
+$blue: rgb(29,157,217);
+$pink: rgb(182,37,104);
+$yellow: rgb(255, 252, 221);
+$error-red: rgb(253, 87, 87);
+

lms/static/sass/shared_styles/_course_object.scss → lms/static/sass/shared/_course_object.scss

 .highlighted-courses, .find-courses {
   .courses {
     @include clearfix;
-    padding: 40px 15px 15px;
+    padding: 40px 0px 15px;
 
     .course {
       background: rgb(250,250,250);

lms/static/sass/shared_styles/_shared_footer.scss → lms/static/sass/shared/_footer.scss

@@ -12,11 +12,10 @@ footer {
   }
 
   nav {
-    @include box-sizing(border-box);
     max-width: 1200px;
     margin: 0 auto;
     padding: 30px 10px 0;
-    width: flex-grid(12);
+    width: grid-width(12);
 
     .top {
       border-bottom: 1px solid rgb(200,200,200);

lms/static/sass/shared_styles/_shared_header.scss → lms/static/sass/shared/_header.scss

@@ -9,12 +9,11 @@ header.global {
 
   nav {
     @include clearfix;
-    @include box-sizing(border-box);
     height: 40px;
     margin: 0 auto;
     max-width: 1200px;
-    padding-top: 14px;
-    width: flex-grid(12);
+    padding: 14px 10px 0px;
+    width: grid-width(12);
   }
 
   h1.logo {
@@ -187,7 +186,7 @@ header.global {
       ul.dropdown-menu {
         background: rgb(252,252,252);
         @include border-radius(4px);
-        @include box-shadow(0 2px 10px 0 rgba(0,0,0, 0.4));
+        @include box-shadow(0 2px 24px 0 rgba(0,0,0, 0.3));
         border: 1px solid rgb(100,100,100);
         display: none;
         padding: 5px 10px;

lms/static/sass/shared_styles/_shared_modal.scss → lms/static/sass/shared/_modal.scss

@@ -20,7 +20,7 @@
   left: 50%;
   padding: 8px;
   position: absolute;
-  width: grid-width(6);
+  width: grid-width(5);
   z-index: 12;
 
   &.video-modal {

lms/templates/course.html

@@ -31,3 +31,31 @@
     <p class="university">${course.get_about_section('university')}</p>
   </div>
 </article>
+
+<article id="${course.id}"class="course">
+  <div class="inner-wrapper">
+    <header class="course-preview">
+        <a href="${reverse('about_course', args=[course.id])}">
+        <hgroup>
+          <h2>${course.get_about_section('title')}</h2>
+        </hgroup>
+        <div class="info-link">&#x2794;</div>
+      </a>
+    </header>
+    <section class="info">
+      <div class="cover-image">
+        <img src="${static.url('images/courses/history.png')}">
+      </div>
+      <div class="desc">
+        <p>An advanced introduction to analog circuits. An advanced introduction to analog circuits.</p>
+      </div>
+      <div class="bottom">
+        <a href="#" class="university">${course.get_about_section('university')}</a>
+        <span class="start-date">7/23/12</span>
+      </div>
+    </section>
+  </div>
+  <div class="meta-info">
+    <p class="university">${course.get_about_section('university')}</p>
+  </div>
+</article>

lms/templates/dashboard.html

@@ -11,13 +11,13 @@
       <section class="user-info">
         <ul>
           <li>
-          <div class="icon email-icon"></div><p>Email<span>${ user.email }</span></p>
+            <span class="title"><div class="icon email-icon"></div>Email</span><span class="data">${ user.email }</span>
           </li>
           <li>
-            <div class="icon location-icon"></div><p>Location<span>${ user.profile.location }</span></p>
+            <span class="title"><div class="icon location-icon"></div>Location</span><span class="data">${ user.profile.location }</span>
           </li>
           <li>
-            <div class="icon language-icon"></div><p>Language<span>${ user.profile.language }</span></p>
+            <span class="title"><div class="icon language-icon"></div>Language</span><span class="data">${ user.profile.language }</span>
           </li>
         </ul>
       </section>