Updates to design + next.js implementation

components/content-section/content-section.js

@@ -2,28 +2,41 @@ import React from "react";
 import styles from "./content-section.scss";
 import inView from "in-view";
 
-export default class ContentSection extends React.Component {
-  constructor(props) {
-    super(props);
-  }
+export class ContentSectionPane extends React.Component {
 
-  componentDidMount() {
-    inView.offset(50);
-    inView(".inview").on("enter", el => {
-      if (!el.classList.contains("showing")) {
-        el.classList.add("showing");
-      }
-    });
-  }
 
-  render() {
-    return (
-      <section className="content-section">
-        <style dangerouslySetInnerHTML={{ __html: styles }} />
-        <div className="content-section-wrapper inview">
-          {this.props.children}
-        </div>
-      </section>
-    );
-  }
+    render() {
+
+        return (<div className={`pane-50 pane ${this.props.layout ? this.props.layout : ""}`}>
+            {this.props.children}
+        </div>);
+    }
+}
+
+export class ContentSection extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    componentDidMount() {
+        inView.offset(50);
+        inView(".inview").on("enter", el => {
+            if (!el.classList.contains("showing")) {
+                el.classList.add("showing");
+            }
+        });
+    }
+
+    render() {
+        return (
+            <section className="content-section">
+                <style dangerouslySetInnerHTML={{__html: styles}}/>
+                <div className="content-section-wrapper inview">
+                    <div className="panes center-vertically">
+                        {this.props.children}
+                    </div>
+                </div>
+            </section>
+        );
+    }
 }

components/content-section/content-section.scss

@@ -49,6 +49,17 @@ section{
   }
 
   .pane {
+
+    &.center{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      p{
+        max-width:580px;
+      }
+    }
     &:first-child {
       padding-right: $gutter;
 

components/head/head.js

@@ -1,7 +1,7 @@
 // @flow
 import React from "react";
 import Head from "next/head";
-
+import mdi from '../../static/mdi/css/materialdesignicons.css';
 type HeadProps = {
   pageTitle: string,
   themeColor: string
@@ -23,7 +23,11 @@ export default (
     <link rel="dns-prefetch" href="//nteract.io/" />
     <link rel="dns-prefetch" href="//nteract.github.io/" />
 
-    <link
+
+
+
+
+      <link
       rel="apple-touch-icon"
       sizes="57x57"
       href="https://nteract.github.io/assets/images/icons/apple-icon-57x57.png"
@@ -157,5 +161,6 @@ export default (
     />
 
     <meta name="theme-color" content={themeColor} />
+      <style dangerouslySetInnerHTML={{__html: mdi}}/>
   </Head>
 );

components/header/header.js

@@ -30,6 +30,9 @@ class Header extends React.Component {
     }
 
     render() {
+        const headerStyleHack = {
+            color: this.props.themeColor
+        };
         const MobileMenu = () => (
             <div className={`mobile-menu ${this.state.mobileMenuOpen? 'is-active' : ''}`}>
                 <div className="close-button" onClick={this.handleClick.bind(this)}>
@@ -46,7 +49,7 @@ class Header extends React.Component {
         return (
             <div>
                 <style dangerouslySetInnerHTML={{ __html: styles }}/>
-                <Headroom>
+                <Headroom style={headerStyleHack}>
                     <header className="header-main">
                         <div className="header-main-wrapper">
                             <div className="header-main-section">

components/header/header.scss

@@ -6,9 +6,10 @@
   top: 0;
   height: $header-height;
   display: flex;
-  z-index: 900;
+  z-index: 2000;
   color: #c8d4e5;
 
+
   &-wrapper { // .header-main-wrapper
     @include global-wrapper;
     flex: 1;
@@ -61,9 +62,22 @@
   &-wrapper {
     position: absolute;
     width: 100%;
+    z-index:999;
   }
   &--pinned {
-    background-color: rgba($main-color, 0.95);
+
+    &:before{
+      position: absolute;
+      top:0;
+      left:0;
+      width: 100%;
+      height:100%;
+      z-index:-1;
+      content: '';
+      background: currentColor;
+      opacity:0.85;
+    }
+
   }
   position: absolute;
 }
@@ -112,7 +126,7 @@
   top: 0;
   height: 100vh;
   width: 100%;
-  background-color: $main-color;
+  background-color: currentColor;
   background-image: url(https://nteract.github.io/assets/images/hero_header_bg@2x.png);
   background-position: top center;
   background-attachment: fixed;

components/kernels/kernel-page.js

@@ -3,7 +3,7 @@ import Head from "next/head";
 import LanguageToggle from "../kernels/language-toggle";
 
 import Layout from "../layout/layout";
-import ContentSection from "../content-section/content-section";
+import { ContentSection } from "../content-section/content-section";
 import PageHeader from "./page-header";
 
 export type KernelPageProps = {
@@ -17,12 +17,12 @@ export const kernels = [
   { name: "node.js", path: "/kernels/node" }
 ];
 
-export default (props: KernelPageProps) => (
-  <Layout pageTitle={`: kernels - ${props.language}`}>
+export default (props: KernelPageProps, themeColor: '#444') => (
+  <Layout pageTitle={`: kernels - ${props.language}`} themeColor={themeColor}>
     <Head>
       <link rel="stylesheet" href="/static/kernels.css" />
     </Head>
-    <PageHeader />
+    <PageHeader themeColor={themeColor} />
     <ContentSection>
       <header>
         <LanguageToggle current={props.language} kernels={kernels} />

components/kernels/page-header.js

@@ -6,8 +6,8 @@ import {
   PageHeaderRight
 } from "../page-header/page-header";
 
-export default () => (
-  <PageHeader color="#353a79">
+export default (themeColor) => (
+  <PageHeader themeColor={themeColor}>
     <PageHeaderLeft>
       <PageHeaderTitle>Kernels</PageHeaderTitle>
       <p>

components/layout/layout.js

@@ -1,18 +1,24 @@
+import React from 'react'
 import Head from '../head/head'
 import Header from '../header/header'
 import Footer from '../footer/footer'
 import styles from './layout.scss'
 
 
-export default ({children, pageTitle}) => (
-    <div className="layout">
-        <style dangerouslySetInnerHTML={{__html: styles}}/>
+export default class Layout extends React.Component {
 
-        <Head pageTitle={pageTitle}/>
-        <Header />
-        <div className="page">
-            { children }
-        </div>
-        <Footer />
-    </div>
-)
+    render() {
+        return (
+            <div className="layout">
+                <style dangerouslySetInnerHTML={{__html: styles}}/>
+
+                <Head pageTitle={this.props.pageTitle}/>
+                <Header themeColor={this.props.themeColor}/>
+                <div className="page">
+                    { this.props.children }
+                </div>
+                <Footer />
+            </div>
+        );
+    }
+}

components/page-header/page-header.js

@@ -23,7 +23,7 @@ export class PageHeader extends React.Component {
     render() {
         return (
             <section className="page-header" style={{
-              backgroundColor: this.props.color
+              backgroundColor: this.props.themeColor
             }}>
                 <style dangerouslySetInnerHTML={{ __html: styles }} />
                 <div className="page-header-wrapper">

components/page-header/page-header.scss

@@ -13,7 +13,8 @@ $timing-animation-delay: $timing-animation/2;
   overflow: hidden;
   &-wrapper {
     @include global-wrapper;
-    color: lighten($main-color, 45%);
+    color: rgba(white, 0.5);
+    font-weight:300;
     display: flex;
     justify-content: space-between;
     padding-top:$gutter*2;

package.json

@@ -24,7 +24,8 @@
     "babel-plugin-wrap-in-js": "^1.1.0",
     "glob": "7.1.1",
     "in-view": "^0.6.1",
-    "next": "^2.0.0-beta",
+    "mdi": "^1.8.36",
+    "next": "^2.0.0",
     "node-sass": "^4.4.0",
     "normalize-scss": "^6.0.0",
     "postcss-easy-import": "2.0.0",