Scratch-www: Navigation - Make top navigation and footer responsive

[thisandagain]

All of the work we are doing to integrate grid systems and flex box into our new views is limited by the fact that our navigation is not responsive which leads to some bugs (see: #214) as well as a less than ideal viewing experience on mobile devices.

• [x] Design responsive top navigation
• [x] Design (or eliminate) responsive footer
• [x] Implement updated top navigation
• [x] Implement updated footer

/cc @carljbowman @kaschm @mewtaylor @rschamp

[carljbowman]

Awesome! Thanks @mewtaylor and @thisandagain for looking into this further and isolating the issue. Had a feeling it was the Nav/Footer breaking the responsive behavior and not the Grid & Flexbox. I will start designing/prototyping ASAP!

[thisandagain]

@carljbowman Can you share specs with @mewtaylor when you are ready? It would be nice to get this wrapped up this iteration.

[carljbowman]

Responsive Nav / Footer

_omg it's happening_ 🎉

Overview Deck: R3_Responsive Nav & Footer.pdf

Navigation Logged Out

• [ ] Change 'Join Scratch' to 'Sign up' verbiage across the site: navigation, sign up flow
• [ ] Change 'Sign in' to 'Log in' verbiage across the site: navigation, login dropdown, editor nav

12 cols

8 cols

6 cols

4 cols

---

Navigation Logged In

12 cols

8 cols

6 cols

4 cols

---

Footer

12 cols

8 cols

6 cols

4 cols