Fix menu and buttons on mobile viewport sizes

README.md

@@ -3,4 +3,10 @@
 
 Buttercup is a free, open-source and cross-platform password manager. This repository contains Buttercup's static homepage.
 
-![](https://cloud.githubusercontent.com/assets/768052/23095888/90b2ac44-f61a-11e6-9c39-30496362d8de.png)
+![](./static/img/buttercup-homepage.png)
+
+### Usage
+- `git clone https://github.com/buttercup/buttercup-website.git`
+- `cd buttercup-website`
+- `npm install`
+- `npm dev` to run locally at localhost:3000

components/header.js

@@ -1,5 +1,11 @@
 import Link from 'next/link';
 
+// Toggles mobile hamburger menu
+const toggleMenu = () => {
+  const menu = document.getElementById('mainMenu')
+  menu.classList.toggle('is-active')
+}
+
 export default () => (
   <header>
     <nav className="navbar is-transparent has-shadow">
@@ -23,7 +29,7 @@ export default () => (
             </span>
           </a>
 
-          <div className="navbar-burger burger" data-target="mainMenu">
+          <div className="navbar-burger burger" data-target="mainMenu" onClick={() => toggleMenu()}>
             <span />
             <span />
             <span />

css/style.scss

@@ -29,8 +29,13 @@ $primary: #00b7ac;
   }
 }
 
+.field.is-grouped {
+  flex-wrap: wrap;
+}
+
 .is-grouped > .button {
   margin-right: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 
 .store-links {