From 58fb665ce29f479dfed8a36ff5bd79cd8efc6034 Mon Sep 17 00:00:00 2001
From: Mitchell <mgerb42@gmail.com>
Date: Thu, 25 Aug 2016 23:52:53 -0500
Subject: [PATCH] New post - more css changes (date)

---
 client/assets/scss/Content.scss               | 26 ++++++++++++++++++
 client/assets/scss/Preview.scss               | 12 ---------
 client/assets/scss/main.scss                  | 18 ++++++-------
 client/js/components/Post.js                  |  8 +++++-
 client/js/components/Preview.js               |  6 ++---
 client/js/pages/Index.js                      |  2 --
 posts/Old Posts/2015-07-28-how-to-use-git.md  | 22 +++++++--------
 posts/Web Stuff/2016-08-25-redoing-website.md | 27 +++++++++++++++++++
 8 files changed, 82 insertions(+), 39 deletions(-)
 create mode 100644 client/assets/scss/Content.scss
 delete mode 100644 client/assets/scss/Preview.scss
 create mode 100644 posts/Web Stuff/2016-08-25-redoing-website.md

diff --git a/client/assets/scss/Content.scss b/client/assets/scss/Content.scss
new file mode 100644
index 0000000..bc55bf8
--- /dev/null
+++ b/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;
+    }
+}
diff --git a/client/assets/scss/Preview.scss b/client/assets/scss/Preview.scss
deleted file mode 100644
index c8bd015..0000000
--- a/client/assets/scss/Preview.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.Preview {
-    .post + .post {
-        margin-top: 2em;
-    }
-    .date {
-        margin: 0;
-        opacity: 0.7;
-    }
-    .intro {
-        margin-bottom: 0.5em;
-    }
-}
diff --git a/client/assets/scss/main.scss b/client/assets/scss/main.scss
index b6c614a..9401fcd 100644
--- a/client/assets/scss/main.scss
+++ b/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");
diff --git a/client/js/components/Post.js b/client/js/components/Post.js
index 4e09407..169e054 100644
--- a/client/js/components/Post.js
+++ b/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>
     );
   }
diff --git a/client/js/components/Preview.js b/client/js/components/Preview.js
index af76621..59069a3 100644
--- a/client/js/components/Preview.js
+++ b/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>
     );
diff --git a/client/js/pages/Index.js b/client/js/pages/Index.js
index 63efef4..bb64f30 100644
--- a/client/js/pages/Index.js
+++ b/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 />
diff --git a/posts/Old Posts/2015-07-28-how-to-use-git.md b/posts/Old Posts/2015-07-28-how-to-use-git.md
index c4d0b7c..2c9aa45 100644
--- a/posts/Old Posts/2015-07-28-how-to-use-git.md	
+++ b/posts/Old Posts/2015-07-28-how-to-use-git.md	
@@ -91,33 +91,33 @@ This is just a beginner guide on how to use git for the first time. There are st
 I would like to discuss a few more things about git that I have learned and become familiar with. I am hosting this website on an Ubuntu VPS from Digital Ocean and I rely heavily on git to update and make changes. I've recently added a new "working" branch to my repository. This makes it easier to work on changes while not breaking the master branch. Another branch can be made on github and you can base it off another branch. I started a "working" branch and copied the master branch.
 
 ```bash
-$git checkout working
+$ git checkout working
 ```
 
 Now, after cloning my repository I can switch to my new working branch with the checkout command. Keep in mind that if I was working on my master branch with uncommited changes, I cannot checkout to another branch without commiting current changes to the master branch. After making new changes to my new "working" branch I can add, commit, and push them to Github. If and when I want to update my master branch I can checkout to my master branch, merge changes with "working" and push changes to Github. The master branch should then be up to date with the "working" branch.
 
 ```bash
-$git add -A
-$git commit -m "commit message"
-$git push origin working
-$git checkout master
-$git merge working
-$git push origin master
+$ git add -A
+$ git commit -m "commit message"
+$ git push origin working
+$ git checkout master
+$ git merge working
+$ git push origin master
 ```
 
 At any time you can check to see which branch you are working on and if any files have been updated/are ready to commit by using the status command:
 
 ```bash
-$git status
+$ git status
 ```
 
 Now that my changes with "working" are updated on "master" I can pull the changes to my server on Digital Ocean. I sometimes have to log into my server and make minor updates to the code. This can cause merge conflicts with git and I may be unable to pull the master branch. To resolve this issue I must reset the master branch so that I can pull new changes.
 
 ```bash
-$git reset --hard
-$git pull
+$ git reset --hard
+$ git pull
 ```
 
 This will reset the branch to the last commit and get rid of any uncommited changes. Only do this if you have not made changes that you want to save. Because it is running on my server, I want to overwrite any changes anyway.
 
-These are a few more git commands that I have learned since working on this project. As I become more familiar with git I will continue to update this post
\ No newline at end of file
+These are a few more git commands that I have learned since working on this project. As I become more familiar with git I will continue to update this post
diff --git a/posts/Web Stuff/2016-08-25-redoing-website.md b/posts/Web Stuff/2016-08-25-redoing-website.md
new file mode 100644
index 0000000..dee5800
--- /dev/null
+++ b/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.