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;
@@ -40,6 +41,11 @@ code,
 pre {
     white-space: pre-wrap;
 }
+hr {
+    margin: 1em;
+    border: 0;
+    border-top: 1px solid #eee;
+}
 .Layout {
     height: 100%;
     display: flex;
@@ -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 />

posts/Web Stuff/2016-08-25-redoing-website.md

@@ -0,0 +1,27 @@
+# Redoing this website for the third time
+
+New web technologies never cease to amaze me. Every time I learn a new technology used in the web my mind is blown. Shortly after this happens
+I discover something newer that is just bigger and better. Because of this, I am always learning, which is awesome!
+
+***
+
+## It's been awhile
+
+It has been quite a long time since I posted anything on this site. Since the last post I've graduated college and started a career as a software engineer.
+I'm currently mainly working on front end development with AngularJS, which is pretty exciting! I previously used Angular on this site to help myself learn the framework.
+Angular is pretty great, but I've found a new web framework that I'm absolutely loving so far! It's a framework developed by Facebook called [ReactJS](https://facebook.github.io/react/).
+
+I've decided to completely redo this site again because I know I can do it better as I learn more and more. Credit for most of my design can be given to [Nikolay](http://nikolay.rocks).
+I love the simple design that he has come up with on his site. Some of the site is open source, but I am redoing a lot of it to my liking;
+
+The source code for this site can be found on GitHub [here](https://github.com/mgerb/mywebsite) (currently developing on the react branch);
+
+Here are some of the core items that I'm using to develop this site:
+- [Go](https://golang.org/)
+- [React](https://facebook.github.io/react/)
+- [Redux](http://redux.js.org/docs/introduction/)
+- [MongoDB](https://www.mongodb.com/)
+- [App Engine](https://cloud.google.com/appengine/)
+
+There are many other tools here and there such as [MarkedJS](https://github.com/chjj/marked) and [HighlightJS](https://highlightjs.org/)
+that I've also used in the process. I am excited to discuss my thoughts and experiences with many other technologies like this.