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}>
-        <img src={image} />
-        <h4>{text}</h4>
+      <Card onClick={onClick} className={styles.root}>
+        {image ? <img src={image} /> : null}
+        <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 },
-        { mq: '780px', columns: 3, gutter: 15 },
-        { mq: '1035px', columns: 4, gutter: 15 },
-        { mq: '1290px', columns: 5, gutter: 15 },
-        { mq: '1545px', columns: 6, gutter: 15 },
-        { mq: '1800px', columns: 7, gutter: 15 },
+        { columns: 1, gutter: 15 },
+        { mq: '495px', columns: 2, gutter: 15 },
+        { mq: '750px', columns: 3, gutter: 15 },
+        { mq: '1005px', columns: 4, gutter: 15 },
+        { mq: '1260px', columns: 5, gutter: 15 },
+        { mq: '1515px', columns: 6, gutter: 15 },
+        { mq: '1770px', columns: 7, gutter: 15 },
       ]
     };
   }