Merge pull request #8389 from edx/dsego/SOL-734

Make header & footer responsive

cms/static/sass/elements/_footer.scss

@@ -83,7 +83,6 @@
     // platform Open edX logo and link
     .footer-about-openedx {
       @include float(right);
-      width: flex-grid(3,12);
       @include text-align(right);
 
       a {

lms/static/sass/multicourse/_courses.scss

@@ -133,7 +133,6 @@ $facet-background-color: #007db8;
       height: 120px;
       margin: 0 auto;
       max-width: 1200px;
-      min-width: 760px;
       padding-top: ($baseline*10);
       position: relative;
       text-align: center;

lms/static/sass/multicourse/_home.scss

+@import '../base/grid-settings';
+@import 'neat/neat'; // lib - Neat
+
 $title-left-margin: grid-width(2) + $gw-gutter;
 $button-size: ($baseline*2.75);
 $course-search-input-height: ($button-size);
@@ -29,13 +32,12 @@ $course-search-input-height: ($button-size);
       position: relative;
       margin: 0 auto ($baseline);
       padding: ($baseline*5) ($baseline/2);
-      min-width: ($baseline*38);
       max-width: ($baseline*60);
     }
 
     .title {
-      @include margin-left($title-left-margin);
-      @include float(left);
+      @include span-columns(8);
+      @include shift(2);
       @include box-sizing(border-box);
       @include transition(all 0.2s linear 0s);
       position: relative;
@@ -53,6 +55,24 @@ $course-search-input-height: ($button-size);
         }
       }
 
+      // 8 column layout
+      @include media($bp-medium) {
+        @include span-columns(6);
+        @include shift(1);
+      }
+
+      // 4 column layout
+      @include media($bp-small) {
+        @include fill-parent();
+        @include shift(0);
+      }
+
+      // 4 column layout
+      @include media($bp-tiny) {
+        @include fill-parent();
+        @include shift(0);
+      }
+
       > hgroup {
         @include left(0);
         @include box-sizing(border-box);

lms/static/sass/shared/_footer.scss

@@ -13,9 +13,7 @@
   footer#footer-openedx {
     @include clearfix();
     @include box-sizing(border-box);
-    max-width: grid-width(12);
-    min-width: 760px;
-    width: flex-grid(12);
+    @include outer-container;
     margin: 0 auto;
 
     p, ol, ul {
@@ -40,9 +38,16 @@
 
     // colophon
     .colophon {
-      @include margin-right(flex-gutter());
-      width: flex-grid(8,12);
-      @include float(left);
+      @include span-columns(8);
+
+      @include media($bp-small) {
+        @include fill-parent();
+      }
+
+      @include media($bp-tiny) {
+        @include fill-parent();
+      }
+
 
       .nav-colophon {
         @include clearfix();
@@ -159,13 +164,20 @@
 
     // platform Open edX logo and link
     .footer-about-openedx {
-      @include float(right);
-      width: flex-grid(3,12);
-      display: inline-block;
-      vertical-align: bottom;
+      @include span-columns(4);
       @include text-align(right);
+      vertical-align: bottom;
+
+      @include media($bp-small) {
+        @include fill-parent();
+      }
+
+      @include media($bp-tiny) {
+        @include fill-parent();
+      }
 
       a {
+        @include float(right);
         display: inline-block;
 
         &:hover {

lms/static/sass/shared/_header.scss

@@ -6,7 +6,6 @@ header.global {
   border-bottom: 1px solid $m-gray;
   box-shadow: 0 1px 5px 0 $shadow-l1;
   background: $header-bg;
-  height: 76px;
   position: relative;
   width: 100%;
 
@@ -31,11 +30,9 @@ header.global {
 
   nav {
     @include clearfix();
-    height: 40px;
     margin: 0 auto;
-    padding: 18px ($baseline/2) 0;
+    padding: 18px ($baseline/2) 12px;
     max-width: grid-width(12);
-    min-width: 760px;
   }
 
   .left {