fix

.storybook/addons.js

@@ -0,0 +1,2 @@
+import '@storybook/addon-knobs/register'
+import '@storybook/addon-actions/register';

.storybook/config.js

@@ -1,4 +1,7 @@
-import { configure } from '@storybook/react';
+import { configure, setAddon } from '@storybook/react';
+import infoAddon from '@storybook/addon-info';
+
+setAddon(infoAddon);
 
 function loadStories() {
   require('../stories');

package.json

@@ -5,7 +5,7 @@
   "main": "index.html",
   "private": true,
   "engines": {
-    "node": "5.10.1"
+    "node": "6.11.0"
   },
   "scripts": {
     "build": "NODE_ENV=production node ./initializers/webpack/build.js",
@@ -32,6 +32,8 @@
     "webpack-hot-middleware": "^2.18.0"
   },
   "devDependencies": {
+    "@storybook/addon-info": "^3.1.6",
+    "@storybook/addon-knobs": "^3.1.",
     "@storybook/react": "^3.1.5",
     "babel-core": "^6.14.0",
     "babel-eslint": "^7.1.1",
@@ -61,7 +63,9 @@
     "nightmare": "^2.10.0",
     "node-sass": "^3.10.0",
     "offline-plugin": "^4.8.1",
+    "postcss-loader": "^2.0.6",
     "qs": "^6.4.0",
+    "react-datetime": "^2.8.10",
     "react-hot-loader": "^3.0.0-beta.6",
     "react-motion": "^0.5.0",
     "react-onclickoutside": "^6.1.1",

postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: [
+    require('autoprefixer')
+  ]
+}

src/AC/navigation.js

@@ -20,7 +20,6 @@ export function closeMenu() {
 }
 
 export function toggleMenu(){
-  console.log('here!!!')
   return ({
     type: TOGGLE + MENU
   })

src/components/A_ButtonLink/styles.scss

@@ -41,6 +41,9 @@
     color: $c-brand-dark;
     background-color: transparent;
     border-color: $c-brand-dark;
+    &:hover{
+      color: rgba(255, 255, 255, 0.8)
+    }
   }
 
   &_color_primary_light,  // TRANSPARENT button with WHITE lines

src/components/A_Link/styles.scss

@@ -15,6 +15,6 @@
     pointer-events: none;
   }
   &:not(&_disabled_true):hover{
-    color: #8C8C94;
+    color: rgba(255, 255, 255, 0.8)
   }
 }

src/components/M_Swipe/index.js

@@ -84,7 +84,7 @@ class M_Swipe extends Component {
 }
 
 M_Swipe.defaultProps = {
-  threshold: 10,
+  threshold: 30,
   nodeName: 'div'
 }
 

src/components/O_Footer/index.js

@@ -82,7 +82,7 @@ class O_Footer extends Component {
     const renderedSocialList = this.socialsList()
     const renderedLinksList = this.linksList(openedSection)
     return (
-      <footer className={cn()}>
+      <footer className={cn({menuOpen})}>
         <Motion
           defaultStyle={{x: 0}}
           style={{

src/components/O_Footer/styles.scss

@@ -3,8 +3,12 @@
 
 .o-footer{
 
-  &_menu_open_true{
-    background-color: red;
+  &_menu-open_true{
+    position: fixed;
+    top: 70px;
+    z-index: 1;
+    background-color: $white;
+    height: 100vh;
   }
   &__inner {
     padding: $identation * 2.5 0; // clarify

src/components/O_HandyLinks/index.js

@@ -35,7 +35,10 @@ const O_HandyLinks = () => {
       <div className="l-container">
         <div className={cn('inner')}>
           <A_H type="h2">Looking for more?</A_H>
-          <p className="p_center">These handy links will help you get on your way.</p>
+
+          <div className={cn('subtitle')}>
+            <p className="p_center">These handy links will help you get on your way.</p>
+          </div>
           <ul className={cn('list')}>
             {linksList()}
           </ul>

src/components/O_HandyLinks/styles.scss

@@ -7,16 +7,24 @@
     @include media($mobile) { padding: $identation * 2 0 $identation * 1.5; }
 
     .a-h { margin-bottom: 10px; }
+    display: flex;
+    flex-flow: column;
   }
 
+  &__subtitle{
+    flex: 1 1 70px;
+    margin-bottom: 30px;
+  }
   &__list {
+    flex: 1 1 150px;
+
     display: flex;
-    height: 150px;
-    padding-top: $identation * 2.5;
+    //height: 150px;
+    //padding-top: $identation * 2.5;
     justify-content: center;
     align-items: stretch;
     @include media($mobile) {
-      padding-top: $identation * 1.5;
+      //padding-top: $identation * 1.5;
       height: auto;
       flex-flow: column;
     }
@@ -29,6 +37,7 @@
       @include media($mobile) {
         flex-basis: 100%;
         max-width: none;
+        min-height: 60px;
         height: $identation * 3;
         & + & { margin-top: 20px; }
       }

src/components/O_Header/index.js

@@ -65,7 +65,10 @@ class O_Header extends Component {
             >
               <div className="l-container-wide">
                 <div className={cn('inner', {menuOpen})}>
-                  <A_logo darkTheme={darkThemeLogo}/>
+                  <div className={cn('logo')}>
+                    <A_logo darkTheme={darkThemeLogo}/>
+
+                  </div>
                   <nav className={cn('nav', {darkTheme: darkThemeLogo})}>
                   <span
                     className={cn('nav-main')}
@@ -84,7 +87,7 @@ class O_Header extends Component {
                     <A_ButtonLink size="xs" color={"primary_dark_theme_" + darkThemeLogo}
                                   to="/#">Subscribe</A_ButtonLink>
                   </span>
-                    <span className={cn('nav-extra-mobile')}>
+                  <span className={cn('nav-extra-mobile')}>
                     <A_ButtonLink size="xs" color={"primary_dark_theme_" + darkThemeLogo}
                                   to="/#">Subscribe</A_ButtonLink>
                   </span>