Implement new responsive, dev section header and home scaffolding

3 files changed, 36 insertions, 27 deletions

diff --git a/packages/website/ts/components/documentation/docs_content_top_bar.tsx b/packages/website/ts/components/documentation/docs_content_top_bar.tsx
index c2bbfc417..148f2f7cb 100644
--- a/packages/website/ts/components/documentation/docs_content_top_bar.tsx
+++ b/packages/website/ts/components/documentation/docs_content_top_bar.tsx
@@ -3,6 +3,7 @@ import * as _ from 'lodash';
 import Drawer from 'material-ui/Drawer';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
+import { DocsLogo } from 'ts/components/documentation/docs_logo';
 import { Container } from 'ts/components/ui/container';
 import { Deco, Key, ObjectMap, WebsitePaths } from 'ts/types';
 import { constants } from 'ts/utils/constants';
@@ -17,17 +18,6 @@ interface DocsContentTopBarState {
     isDrawerOpen: boolean;
 }
 
-const styles: Styles = {
-    menuItem: {
-        fontSize: 14,
-        color: colors.darkestGrey,
-        paddingTop: 6,
-        paddingBottom: 6,
-        cursor: 'pointer',
-        fontWeight: 400,
-    },
-};
-
 interface MenuItemInfo {
     title: string;
     url: string;
@@ -50,11 +40,6 @@ export class DocsContentTopBar extends React.Component<DocsContentTopBarProps, D
         }
     }
     public render(): React.ReactNode {
-        const menuIconStyle = {
-            fontSize: 25,
-            color: 'black',
-            cursor: 'pointer',
-        };
         const menuItemInfos: MenuItemInfo[] = [
             {
                 title: this.props.translate.get(Key.Github, Deco.Cap),
@@ -76,9 +61,9 @@ export class DocsContentTopBar extends React.Component<DocsContentTopBarProps, D
             },
         ];
         return (
-            <div style={{ height: 75 }} className="pb1">
-                <Container className="flex items-center" paddingTop={30} width="100%">
-                    <div className="col col-2">
+            <Container height={75} className="pb1">
+                <Container className="flex items-center lg-pt3 md-pt3 sm-pt1 relative" width="100%">
+                    <div className="col col-2 sm-hide xs-hide">
                         <Link
                             to={WebsitePaths.Home}
                             style={{ color: colors.linkSectionGrey }}
@@ -90,14 +75,28 @@ export class DocsContentTopBar extends React.Component<DocsContentTopBarProps, D
                             </div>
                         </Link>
                     </div>
-                    <div className="col col-10">
+                    <div className="col col-4 md-hide sm-hide xs-hide" />
+                    <div className="col col-6 md-pl4 md-ml4 sm-hide xs-hide">
                         <div className="flex items-center justify-between right" style={{ width: 300 }}>
                             {this._renderMenuItems(menuItemInfos)}
                         </div>
                     </div>
-                    <div className={'md-hide lg-hide'}>
-                        <div style={menuIconStyle}>
-                            <i className="zmdi zmdi-menu" onClick={this._onMenuButtonClick.bind(this)} />
+                    <div className="lg-hide md-hide">
+                        <DocsLogo height={30} containerStyle={{ paddingTop: 6, paddingLeft: 18 }} />
+                    </div>
+                    <div className="md-hide lg-hide absolute" style={{ right: 18, top: 12 }}>
+                        <div
+                            style={{
+                                fontSize: 30,
+                                color: 'black',
+                                cursor: 'pointer',
+                            }}
+                        >
+                            <i
+                                className="zmdi zmdi-menu"
+                                style={{ color: colors.grey700 }}
+                                onClick={this._onMenuButtonClick.bind(this)}
+                            />
                         </div>
                     </div>
                 </Container>
@@ -110,7 +109,7 @@ export class DocsContentTopBar extends React.Component<DocsContentTopBarProps, D
                     }}
                 />
                 {this._renderDrawer()}
-            </div>
+            </Container>
         );
     }
     private _renderMenuItems(menuItemInfos: MenuItemInfo[]): React.ReactNode {
diff --git a/packages/website/ts/components/documentation/docs_logo.tsx b/packages/website/ts/components/documentation/docs_logo.tsx
index 2a539c84b..9daf84ad0 100644
--- a/packages/website/ts/components/documentation/docs_logo.tsx
+++ b/packages/website/ts/components/documentation/docs_logo.tsx
@@ -2,12 +2,21 @@ import * as React from 'react';
 import { Link } from 'react-router-dom';
 import { WebsitePaths } from 'ts/types';
 
-export const DocsLogo = () => {
+export interface DocsLogoProps {
+    height: number;
+    containerStyle?: React.CSSProperties;
+}
+
+export const DocsLogo: React.StatelessComponent<DocsLogoProps> = props => {
     return (
-        <div style={{ paddingTop: 28 }}>
+        <div style={props.containerStyle}>
             <Link to={`${WebsitePaths.Home}`} className="text-decoration-none">
-                <img src="/images/docs_logo.svg" height="36px" />
+                <img src="/images/docs_logo.svg" height={props.height} />
             </Link>
         </div>
     );
 };
+
+DocsLogo.defaultProps = {
+    containerStyle: {},
+};
diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx
index f2ae68b70..1e0bfd959 100644
--- a/packages/website/ts/components/ui/container.tsx
+++ b/packages/website/ts/components/ui/container.tsx
@@ -15,6 +15,7 @@ export interface ContainerProps {
     paddingRight?: StringOrNum;
     paddingLeft?: StringOrNum;
     backgroundColor?: string;
+    background?: string;
     borderRadius?: StringOrNum;
     maxWidth?: StringOrNum;
     maxHeight?: StringOrNum;