Layout refinments

src/components/Cards/ImageCard.css

@@ -0,0 +1,13 @@
+.root {
+  cursor: pointer;
+}
+
+.root h1 {
+  font-weight: 500;
+  font-size: 18px;
+}
+
+.root h2 {
+  font-weight: 400;
+  font-size: 16px;
+}

src/components/Cards/ImageCard.js

@@ -1,5 +1,6 @@
 import React, { PropTypes } from 'react';
 import { Card } from '../UI';
+import styles from './ImageCard.css'
 
 export default class ImageCard extends React.Component {
   constructor(props) {
@@ -34,16 +35,16 @@ export default class ImageCard extends React.Component {
   render() {
     const { onClick, image, text } = this.props;
     return (
-      <Card onClick={onClick}>
+      <Card onClick={onClick} className={styles.root}>
-        <img src={image} />
+        {image ? <img src={image} /> : null}
-        <h4>{text}</h4>
+        <h1>{text}</h1>
       </Card>
     );
   }
 }
 
 ImageCard.propTypes = {
-  image: PropTypes.string.isRequired,
+  image: PropTypes.string,
   onClick: PropTypes.func,
   onImageLoaded: PropTypes.func,
   text: PropTypes.string.isRequired

src/components/EntryListing.js

@@ -12,12 +12,13 @@ export default class EntryListing extends React.Component {
     this.bricksConfig = {
       packed: 'data-packed',
       sizes: [
-        { columns: 2, gutter: 15 },
+        { columns: 1, gutter: 15 },
-        { mq: '780px', columns: 3, gutter: 15 },
+        { mq: '495px', columns: 2, gutter: 15 },
-        { mq: '1035px', columns: 4, gutter: 15 },
+        { mq: '750px', columns: 3, gutter: 15 },
-        { mq: '1290px', columns: 5, gutter: 15 },
+        { mq: '1005px', columns: 4, gutter: 15 },
-        { mq: '1545px', columns: 6, gutter: 15 },
+        { mq: '1260px', columns: 5, gutter: 15 },
-        { mq: '1800px', columns: 7, gutter: 15 },
+        { mq: '1515px', columns: 6, gutter: 15 },
+        { mq: '1770px', columns: 7, gutter: 15 },
       ]
     };
   }

src/containers/App.css

@@ -0,0 +1,43 @@
+.alignable {
+  margin: 0px auto;
+}
+
+@media (max-width: 749px) and (min-width: 495px) {
+  .alignable {
+    width: 495px;
+  }
+}
+
+@media (max-width: 1004px) and (min-width: 750px) {
+  .alignable {
+    width: 750px;
+  }
+}
+
+@media (max-width: 1259px) and (min-width: 1005px) {
+  .alignable {
+    width: 1005px;
+  }
+}
+
+@media (max-width: 1514px) and (min-width: 1260px) {
+  .alignable {
+    width: 1260px;
+  }
+}
+
+@media (max-width: 1769px) and (min-width: 1515px) {
+  .alignable {
+    width: 1515px;
+  }
+}
+
+@media (min-width: 1770px) {
+  .alignable {
+    width: 1770px;
+  }
+}
+
+.main {
+  padding-top: 60px;
+}

src/containers/App.js

@@ -5,6 +5,7 @@ import { loginUser } from '../actions/auth';
 import { currentBackend } from '../backends/backend';
 import { LIST_POSTS, LIST_FAQ, HELP, MORE_COMMANDS } from '../actions/findbar';
 import FindBar from './FindBar';
+import styles from './App.css';
 
 class App extends React.Component {
   componentDidMount() {
@@ -70,12 +71,18 @@ class App extends React.Component {
 
     return (
       <div>
-        <FindBar commands={[
+        <header>
-          { id: LIST_POSTS, pattern: 'List Posts' },
+          <div className={styles.alignable}>
-          { id: LIST_FAQ, pattern: 'List FAQs' },
+            <FindBar commands={[
-          { id: HELP, pattern: 'Help' },
+              { id: LIST_POSTS, pattern: 'List Posts' },
-        ]} />
+              { id: LIST_FAQ, pattern: 'List FAQs' },
-        {children}
+              { id: HELP, pattern: 'Help' },
+            ]} />
+          </div>
+        </header>
+        <div className={`${styles.alignable} ${styles.main}`}>
+          {children}
+        </div>
       </div>
     );
   }

src/containers/FindBar.css

@@ -10,9 +10,8 @@
   position: relative;
   background-color: var(--backgroundColor);
   padding: 1px 0;
-  margin-bottom: 50px;
+  margin: 4px auto;
 }
-
 .inputArea {
   display: table;
   width: calc(100% - 10px);

src/index.css

@@ -2,6 +2,7 @@ html {
   box-sizing: border-box;
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
+  margin: 0;
 }
 *, *:before, *:after {
   box-sizing: inherit;
@@ -10,8 +11,23 @@ html {
 body {
   font-family: 'Roboto', sans-serif;
   height: 100%;
+  background-color: #fafafa;
+  margin: 0;
+}
+
+header {
+  background-color: #fff;
+  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.22);
+  height: 54px;
+  position: fixed;
+  width: 100%;
+  z-index: 999;
 }
 
 :global #root, :global #root > * {
   height: 100%;
 }
+
+h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+}