redo responsive nav

src/components/carousel/carousel.jsx

@@ -27,12 +27,29 @@ var Carousel = React.createClass({
     render: function () {
         var settings = this.props.settings || {};
         defaults(settings, {
+            centerMode: false,
             dots: false,
             infinite: false,
             lazyLoad: true,
             slidesToShow: 5,
             slidesToScroll: 5,
-            variableWidth: true
+            variableWidth: true,
+            responsive: [
+                {breakpoint: 480, settings: {
+                    arrows: true,
+                    slidesToScroll: 1,
+                    slidesToShow: 1,
+                    centerMode: true
+                }},
+                {breakpoint: 640, settings: {
+                    slidesToScroll: 2,
+                    slidesToShow: 2
+                }},
+                {breakpoint: 942, settings: {
+                    slidesToScroll: 4,
+                    slidesToShow: 4
+                }}
+            ]
         });
         var arrows = this.props.items.length > settings.slidesToShow;
         var classes = classNames(

src/components/navigation/www/navigation.jsx

@@ -294,7 +294,7 @@ var Navigation = React.createClass({
                         ] : [
                             <li className="link right join" key="join">
                                 <a href="#" onClick={this.handleJoinClick}>
-                                    <FormattedMessage id="general.joinScratch" />
+                                    <FormattedMessage id="general.signUp" />
                                 </a>
                             </li>,
                             <Registration
@@ -302,13 +302,13 @@ var Navigation = React.createClass({
                                     isOpen={this.state.registrationOpen}
                                     onRequestClose={this.closeRegistration}
                                     onRegistrationDone={this.completeRegistration} />,
-                            <li className="link right login-item" key="login">
+                            <li className="link login-item" key="login">
                                 <a
                                     href="#"
                                     onClick={this.handleLoginClick}
                                     className="ignore-react-onclickoutside"
                                     key="login-link">
-                                        <FormattedMessage id="general.signIn" />
+                                        <FormattedMessage id="general.logIn" />
                                </a>
                                 <Dropdown
                                         className="login-dropdown with-arrow"

src/components/navigation/www/navigation.scss

@@ -1,4 +1,5 @@
 @import "../../../colors";
+@import "../../../frameless";
 
 #navigation {
     &.staging {
@@ -225,3 +226,36 @@
         }
     }
 }
+//4 columns
+@media only screen and (max-width: $mobile - 1) {
+    #navigation .inner > ul > li {
+        &.create,
+        &.explore,
+        &.discuss,
+        &.help,
+        &.search {
+            display: none;
+        }
+    }
+}
+
+//6 columns
+@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
+    #navigation .inner > ul > li {
+        &.explore,
+        &.discuss,
+        &.search {
+            display: none;
+        }
+    }
+}
+
+//8 columns
+@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+    #navigation .inner > ul > li {
+        &.explore,
+        &.search {
+            display: none;
+        }
+    }
+}

test/localization/spot_check_nav.js

@@ -20,8 +20,8 @@ var languagesToCheck = [
     'he', 'zh-cn', 'ja', 'pt-br', 'pl', 'nb'
 ];
 var idsToCheck = [
-    'general.about', 'general.create', 'general.help', 'general.joinScratch',
-    'general.signIn', 'general.discuss'
+    'general.about', 'general.create', 'general.help', 'general.signUp',
+    'general.logIn', 'general.discuss'
 ];