New post - more css changes (date)

client/assets/scss/Content.scss

@@ -0,0 +1,26 @@
+.Content {
+  flex: 1;
+    .post + .post {
+        margin-top: 2em;
+    }
+    .date {
+        display: block;
+        margin: 0;
+        opacity: 0.7;
+
+        @media (min-width: 1200px){
+          position: absolute;
+          width: 7em;
+          text-align: right;
+          margin-left: -9em;
+        }
+    }
+    .intro {
+        margin-bottom: 0.5em;
+    }
+    img {
+        max-width: 100%;
+        height: auto;
+        margin: auto;
+    }
+}

client/assets/scss/Preview.scss

@@ -1,12 +0,0 @@
-.Preview {
-    .post + .post {
-        margin-top: 2em;
-    }
-    .date {
-        margin: 0;
-        opacity: 0.7;
-    }
-    .intro {
-        margin-bottom: 0.5em;
-    }
-}

client/assets/scss/main.scss

@@ -17,6 +17,7 @@ h5,
 h6 {
     margin: 0;
     font-weight: 400;
+    line-height: 1em;
 }
 p {
     font-weight: 300;
@@ -37,8 +38,13 @@ a {
     }
 }
 code,
-pre{
-  white-space: pre-wrap;
+pre {
+    white-space: pre-wrap;
+}
+hr {
+    margin: 1em;
+    border: 0;
+    border-top: 1px solid #eee;
 }
 .Layout {
     height: 100%;
@@ -59,14 +65,6 @@ pre{
 .Main {
     padding-top: 1em;
 }
-.Content {
-    flex: 1;
-
-    img{
-      width: 100%;
-      height: auto;
-    }
-}
 .Header {
     width: 100%;
     background: url("../images/header.jpg");

client/js/components/Post.js

@@ -1,7 +1,10 @@
 import React from 'react';
+import {Link} from 'react-router';
 import marked from 'marked';
 import hljs from 'highlight.js';
 
+import '../../assets/scss/Content.scss';
+
 const renderer = new marked.Renderer();
 
 marked.setOptions({
@@ -15,7 +18,10 @@ export default class Post extends React.Component{
 
   render(){
     return(
-      <div class="Preview" dangerouslySetInnerHTML={{__html : marked(this.props.content, {renderer : renderer})}}>
+      <div class="Content">
+        <div dangerouslySetInnerHTML={{__html : marked(this.props.content, {renderer : renderer})}}>
+        </div>
+        <Link to="/" class="link"><i class="fa fa-caret-left" aria-hidden="true"></i> Home</Link>
       </div>
     );
   }

client/js/components/Preview.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import {Link} from 'react-router';
 
-import '../../assets/scss/Preview.scss';
+import '../../assets/scss/Content.scss';
 
 export default class Preview extends React.Component{
 
@@ -17,7 +17,7 @@ export default class Preview extends React.Component{
           <p>{posts[i].intro.toString()}</p>
           <p>
             <Link class="link" to={`/post/${posts[i].category}/${posts[i].filename}`}>
-              continue reading...
+              continue reading <i class="fa fa-caret-right" aria-hidden="true"></i>
             </Link>
           </p>
         </div>
@@ -31,7 +31,7 @@ export default class Preview extends React.Component{
     const posts = this.props.posts;
 
     return (
-      <div class="Preview">
+      <div class="Content">
         {posts.length > 0 ? this.insertPosts(posts): ""}
       </div>
     );

client/js/pages/Index.js

@@ -37,10 +37,8 @@ export default class Index extends React.Component {
           <div class="Layout" >
             <Header />
               <div class="Main">
-                <div class="Content">
                   {typeof this.page === 'undefined' ? <Preview posts={this.props.redux.preview.posts} /> : ""}
                   {this.page === 'post' ? <Post content={this.props.redux.post}/> : ""}
-                </div>
                 <Sidebar />
               </div>
             <Footer />