1
0
mirror of https://github.com/mgerb/mywebsite synced 2026-01-11 02:12:53 +00:00

New post - more css changes (date)

This commit is contained in:
2016-08-25 23:52:53 -05:00
parent a2642c39b2
commit 58fb665ce2
8 changed files with 82 additions and 39 deletions

View File

@@ -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;
}
}

View File

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

View File

@@ -17,6 +17,7 @@ h5,
h6 {
margin: 0;
font-weight: 400;
line-height: 1em;
}
p {
font-weight: 300;
@@ -37,9 +38,14 @@ a {
}
}
code,
pre{
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");

View File

@@ -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>
);
}

View File

@@ -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>
);

View File

@@ -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 />

View File

@@ -91,31 +91,31 @@ 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.

View File

@@ -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.