Blog post list styling

src/components/Blog.js

@@ -9,21 +9,35 @@ export default class Blog extends Component {
       );
     }
 
-    let posts = this.props.posts.map((post) => {
+    let posts = this.props.posts.map((post) =>
-      return (
+      <div className="post-list-item" key={post.title}>
-        <div>
+        <div className="post-header">
-          <div>{post.published}</div>
+          <div className="post-title">
-          <div>{post.filename}</div>
+            <h3><a href={post.link}>{post.title}</a></h3>
+          </div>
+          <div className="post-date">
+            <h3>{post.published}
+            </h3>
+          </div>
+        </div>
+        <div className="post-summary">
+          <p>{post.summary}</p>
+        </div>
+        <div className="post-list-footer">
+          <a href={post.link}>Read More</a>
+        </div>
+
       </div>
     )
-    })
 
     return (
       <div>
         <div className="content">
           <h1>Blog</h1>
 
+          <div className="blog-posts">
             {posts}
+          </div>
 
         </div>
       </div>

src/static/stylesheets/main.scss

@@ -2,6 +2,7 @@ $font-header: 'Concert One', cursive;
 $font-paragraph: 'Open Sans', sans-serif;
 $white: #fdfdfd;
 $black: #2f2f2f;
+$blue: #428bca;
 $break-medium: 768px;
 $break-large: 1200px;
 
@@ -74,6 +75,9 @@ body {
   h1 {
     text-align: center;
   }
+  a {
+    color: $blue;
+  }
   @media screen and (max-width: $break-medium) {
     width: 100%;
     float: none;
@@ -106,3 +110,51 @@ body {
 
   }
 }
+
+.post-title {
+  float: left;
+  h3 {
+    font-weight: normal
+  }
+}
+
+.post-date {
+	float: right;
+  h3 {
+    font-weight: normal
+  }
+}
+
+.post-header {
+	background-color: #F5F5F5;
+	overflow: hidden;
+	padding: 0 5px 0 5px;
+}
+
+.post-summary, .post-content{
+	clear: both;
+}
+
+.post-summary {
+	padding: 0 5px 0 5px;
+}
+
+.post-list-item {
+	margin-top: 20px;
+	border-style: solid;
+	border-width: 0 0 3px 0;
+	border-color: $black;
+}
+
+.post-list-footer {
+  text-align: center;
+	padding-bottom: 5px;
+}
+
+.blog-posts {
+  box-sizing: border-box;
+  margin: 0 auto;
+  @media screen and (min-width: $break-large) {
+    width: 80%;
+  }
+}