Redo CSS for headers and add breakpoints

app/components/navigation-menu.js

@@ -20,7 +20,7 @@ const {
  */
 export default Component.extend({
   tagName: 'header',
-  classNames: ['site-header', 'container'],
+  classNames: ['site-header'],
 
   /**
     @property currentUser

app/routes/index.js

@@ -1,6 +1,7 @@
 import Ember from 'ember';
 
 const {
+  get,
   inject: { service },
   Route
 } = Ember;
@@ -9,7 +10,7 @@ export default Route.extend({
   session: service(),
 
   beforeModel() {
-    if (this.get('session.isAuthenticated')) {
+    if (get(this, 'session.isAuthenticated')) {
       this.transitionTo('projects-list');
     }
   }

app/services/navigation-menu.js

@@ -2,6 +2,7 @@ import Ember from 'ember';
 
 const {
   computed,
+  get,
   inject: { service },
   Service
 } = Ember;
@@ -13,7 +14,7 @@ export default Service.extend({
   isOnboarding: computed.equal('menuType', 'onboarding'),
 
   menuType: computed('onboarding.isOnboarding', function() {
-    let isOnboarding = this.get('onboarding.isOnboarding');
+    let isOnboarding = get(this, 'onboarding.isOnboarding');
     if (isOnboarding) {
       return 'onboarding';
     } else {

app/styles/_icons.scss

@@ -22,6 +22,7 @@ $sprite-bgiSizeW: 230px;
 $sprite-bgiSizeH: 330px;
 $logo: 230px 50px $spriteURL 0px 0px $spritex2URL;
 $logo-small: 161px 35px $spriteURL 0px -50px $spritex2URL;
+$logo-small-icon-only: 35px 35px $spriteURL 0px -50px $spritex2URL;
 $location: 16px 16px $spriteURL 0px -85px $spritex2URL;
 $twitter: 16px 16px $spriteURL -16px -85px $spritex2URL;
 $link: 16px 16px $spriteURL -32px -85px $spritex2URL;

app/styles/_shame.scss

@@ -15,6 +15,15 @@
 .temporary-projects-notice {
   @include span-columns(4);
 
+  @include media($md-screen) {
+    @include omega(2n);
+    @include span-columns(6);
+  }
+
+  @include media($xs-screen) {
+    display: none;
+  }
+
   border: 1px dashed $gray--lightest;
   border-radius: 4px;
   color: $text--light;

app/styles/app.scss

@@ -41,6 +41,7 @@
 //
 // LAYOUT
 //
+@import "layout/breakpoints";
 @import "layout/content";
 @import "layout/footer";
 @import "layout/forms";

app/styles/base/_base.scss

@@ -14,7 +14,6 @@ a {
 body {
   height: 100%;
   margin: 0;
-  padding: 0 10px;
 
   > .ember-view:first-of-type {
     height: 100%;

app/styles/base/_helpers.scss

@@ -1,6 +1,13 @@
 .container {
-  @include outer-container(980px);
-  min-width: 980px;
+  max-width: 1040px;
+  margin: 0 auto;
+  padding: 0 10px;
+  height: 100%;
+  width: 100%;
+
+  &--wide {
+    padding: 0 10px;
+  }
 }
 
 .flexbox-container {

app/styles/components/donation-payment.scss

@@ -1,6 +1,22 @@
 .donation-container {
   @include span-columns(5);
   @include shift(7/2);
+
+  @include media($lg-screen) {
+    @include span-columns(8);
+    @include shift(2);
+  }
+
+  @include media($md-screen) {
+    @include shift(1);
+    @include span-columns(10);
+  }
+
+  @include media($sm-screen) {
+    @include shift(0);
+    @include span-columns(12);
+  }
+
   h3 {
     margin-top: 35px;
     margin-top: 2.5em;

app/styles/components/dropdown-menu.scss

@@ -1,6 +1,6 @@
 .dropdown-menu {
   background: white;
-  border: 1px solid $gray;
+  border: 1px solid $gray--lightest;
   border-radius: 4px;
   box-shadow: 0px 10px 41px -16px rgba(0,0,0,0.75);
   float: left;

app/styles/components/image-drop.scss

@@ -41,6 +41,37 @@
     width: $size;
   }
 
+  .hover {
+    border-radius: 5px;
+    display: none;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 5px;
+    color: white;
+    background: rgba(0, 0, 0, 0.6);
+    z-index: 2;
+
+    p {
+      &:before {
+        @include sprite($camera);
+        content: "";
+        display: block;
+        margin: 0 auto;
+      }
+
+      color: white;
+      display: block;
+      font-size: $body-font-size-normal;
+      margin: 5px 0;
+      padding: 0 10px;
+      text-align: center;
+      width: 100%;
+    }
+  }
+
   &--circle {
     border-radius: $border-radius;
 
@@ -56,7 +87,7 @@
   &--drag {
     @include outside-border(2px, dashed, $gray--lightest);
 
-    &--circle {
+    &.image-drop--circle {
       @include outside-border(2px, default, $gray--lightest, $border-radius);
     }
 
@@ -79,40 +110,10 @@
     }
   }
 
-  .hover {
-    border-radius: 5px;
-    display: none;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    padding: 5px;
-    color: white;
-    background: rgba(0, 0, 0, 0.6);
-    z-index: 2;
-
-    p {
-      &:before {
-        @include sprite($camera);
-        content: "";
-        display: block;
-        margin: 0 auto;
-      }
-
-      color: white;
-      display: block;
-      font-size: $body-font-size-normal;
-      margin: 5px 0;
-      padding: 0 10px;
-      width: 100%;
-    }
-  }
-
-  &:hover:not(&--drag) {
+  &:hover:not(.image-drop--drag) {
     @include outside-border(2px, solid, $blue--dark);
 
-    &--circle {
+    &.image-drop--circle {
       @include outside-border(2px, solid, $blue--dark, $border-radius);
     }
 

app/styles/components/project-card.scss

@@ -1,6 +1,17 @@
 .project-card {
   @include omega(3n);
   @include span-columns(4);
+
+  @include media($md-screen) {
+    @include omega(2n);
+    @include span-columns(6);
+  }
+
+  @include media($xs-screen) {
+    @include omega(1n);
+    @include span-columns(12);
+  }
+
   border: 1px solid $gray--lightest;
   border-radius: 4px;
   padding: 20px;

app/styles/components/project-details.scss

@@ -1,27 +1,32 @@
 .project__header {
-  margin: 0 0 10px 0;
   width: 100%;
 
   @include clearfix;
 
+  $icon-size: 50px;
+
   &__icon {
     float: left;
+    height: $icon-size;
+    width: $icon-size;
   }
 
   &__main {
     display: flex;
     @include span-columns(8);
   }
 
-  &__details {
-    margin-left: 10px;
-  }
-
   &__side {
     @include span-columns(4);
-    p {
-      text-align: right;
+    display: flex;
+    align-items: center;
+    height: 50px;
+    justify-content: flex-end;
+
+    button {
+      vertical-align: middle;
     }
+
     span {
       color: $blue;
     }

app/styles/components/project-menu.scss

@@ -1,10 +1,9 @@
 .project__menu, .organization-menu {
   &--horizontal {
     @include clearfix;
-    border-bottom: 1px solid $gray--light;
-    height: 2.5em;
+    border-bottom: 1px solid $blue--lighter;
     list-style-type: none;
-    margin-bottom: .7em;
+    margin-bottom: 10px;
     padding: 0;
     width: 100%;
 
@@ -20,7 +19,8 @@
       display: block;
       font-weight: 500;
       height: 100%;
-      padding: 6px 10px;
+      margin-bottom: -1px;
+      padding: 9px 10px;
       text-decoration: none;
 
       &.active, &:hover {

app/styles/components/task-list-cards.scss

@@ -5,9 +5,13 @@
   height: 100%;
   width: 280px;
   overflow-y: scroll;
-  margin-right: 7px;
+  margin-left: 7px;
   padding: 8px 10px;
   white-space: normal;
+
+  &:first-child {
+    margin-left: 10px;
+  }
 }
 
 .task-list {

app/styles/components/user-menu.scss

@@ -24,7 +24,7 @@
 }
 
 .user-menu a {
-  padding: 5px;
+  padding: 6px 0 4px 0;
 }
 
 .user-menu__avatar {

app/styles/layout/_breakpoints.scss

@@ -0,0 +1,4 @@
+$xs-screen: new-breakpoint(max-width 479px);
+$sm-screen: new-breakpoint(max-width 599px);
+$md-screen: new-breakpoint(max-width 767px);
+$lg-screen: new-breakpoint(max-width 991px);

app/styles/layout/_content.scss

@@ -1,4 +1,6 @@
 .site-content {
+  margin-top: 10px;
+
   &.for-project-tasks {
     display: flex;
     flex-direction: column;

app/styles/layout/_footer.scss

@@ -1,5 +1,5 @@
 .site-footer {
-  padding: 1.4em 0;
+  padding: 2em 0 1em 0;
   h4 {
     margin: 7px 0;
   }
@@ -14,11 +14,12 @@
 .footer-columns {
   > li {
     float: left;
+    margin-bottom: 1em;
+    width: 25%;
 
-    &:first-child {
-      width: 28%
+    @include media($md-screen) {
+      width: 50%;
     }
-    width: 18%;
   }
 }
 

app/styles/layout/_forms.scss

@@ -130,8 +130,8 @@ form {
 }
 
 .suggestions {
-  left: 394px;
   position: absolute;
+  right: -250px;
   width: 250px;
 
   p {