Change blog posts list style

src/components/Blog.js

@@ -18,21 +18,11 @@ export default class Blog extends Component {
     let posts = this.props.posts.map((post) =>
       <div className={styles.postListItem} key={post.title}>
         <div className={styles.postHeader}>
-          <div className={styles.postTitle}>
+          <div className={styles.post}>
-            <h3><a href={post.link}>{post.title}</a></h3>
+            <span>{post.published}</span>
-          </div>
+            <a href={post.link}>{post.title}</a>
-          <div className={styles.postDate}>
-            <h3>{post.published}
-            </h3>
           </div>
         </div>
-        <div className={styles.postSummary}>
-          <p>{post.summary}</p>
-        </div>
-        <div className={styles.postListFooter}>
-          <a href={post.link}>Read More</a>
-        </div>
-
       </div>
     )
 
@@ -41,8 +31,10 @@ export default class Blog extends Component {
         <Header header={"Blog"} />
 
         <div className={contentStyle.content}>
+          <div className={styles.postsWrapper}>
             {posts}
           </div>
+        </div>
 
       </div>
     );

src/components/Blog.scss

@@ -1,38 +1,29 @@
 @import "../static/stylesheets/variables.scss";
 
-.postTitle {
+.post {
+  display: inline-block;
   float: left;
-  h3 {
+  span {
-    font-weight: normal
+    margin-right: 30px;
+  }
+  a {
+    color: $blue;
+    text-decoration: none;
+    text-transform: capitalize;
+    font-family: $font-header;
+    font-size: 1.2em;
   }
 }
 
-.postDate {
+.postsWrapper {
-	float: right;
+  margin-top: 20px;
-  h3 {
-    font-weight: normal
-  }
 }
 
 .postHeader {
-	background-color: #F5F5F5;
 	overflow: hidden;
 	padding: 0 5px 0 5px;
 }
 
-.postSummary {
-  clear: both;
-	padding: 0 5px 0 5px;
-}
-
 .postListItem {
-	margin-top: 20px;
+	margin: 8px;
-	border-style: solid;
-	border-width: 0 0 3px 0;
-	border-color: $black;
-}
-
-.postListFooter {
-  text-align: center;
-	padding-bottom: 5px;
 }

src/static/stylesheets/content.scss

@@ -4,10 +4,13 @@
   display: inline-block;
   overflow: auto;
   padding: 20px;
-  max-width: 960px;
   a {
     color: $blue;
   }
+  width: 100%;
+  @media (min-width: 992px) {
+    width: 960px;
+  }
 }
 
 .content {

src/static/stylesheets/variables.scss

@@ -3,5 +3,6 @@ $font-paragraph: 'Open Sans', sans-serif;
 $white: #fdfdfd;
 $black: #2f2f2f;
 $blue: #144A98;
+$grey: #A9A9A9;
 $break-medium: 768px;
 $break-large: 1200px;

src/utils/compiler.js

@@ -48,7 +48,7 @@ function compilePost(filepath, data, fileData, callback) {
   }
 
   const post = {
-    published: published.format('MMMM Do YYYY'),
+    published: published.format('MMMM DD, YYYY'),
     filename: metadata.filename,
     title: frontMatter.attributes.title,
     summary: frontMatter.attributes.summary,