diff --git a/src/components/Blog.js b/src/components/Blog.js
index 63476bb..0befe32 100644
--- a/src/components/Blog.js
+++ b/src/components/Blog.js
@@ -9,21 +9,35 @@ export default class Blog extends Component {
);
}
- let posts = this.props.posts.map((post) => {
- return (
-
-
{post.published}
-
{post.filename}
+ let posts = this.props.posts.map((post) =>
+
+
+
+
+
{post.published}
+
+
- )
- })
+
+
+
+
+ )
return (
Blog
- {posts}
+
+ {posts}
+
diff --git a/src/static/stylesheets/main.scss b/src/static/stylesheets/main.scss
index de79a6f..fba8353 100644
--- a/src/static/stylesheets/main.scss
+++ b/src/static/stylesheets/main.scss
@@ -2,6 +2,7 @@ $font-header: 'Concert One', cursive;
$font-paragraph: 'Open Sans', sans-serif;
$white: #fdfdfd;
$black: #2f2f2f;
+$blue: #428bca;
$break-medium: 768px;
$break-large: 1200px;
@@ -74,6 +75,9 @@ body {
h1 {
text-align: center;
}
+ a {
+ color: $blue;
+ }
@media screen and (max-width: $break-medium) {
width: 100%;
float: none;
@@ -106,3 +110,51 @@ body {
}
}
+
+.post-title {
+ float: left;
+ h3 {
+ font-weight: normal
+ }
+}
+
+.post-date {
+ float: right;
+ h3 {
+ font-weight: normal
+ }
+}
+
+.post-header {
+ background-color: #F5F5F5;
+ overflow: hidden;
+ padding: 0 5px 0 5px;
+}
+
+.post-summary, .post-content{
+ clear: both;
+}
+
+.post-summary {
+ padding: 0 5px 0 5px;
+}
+
+.post-list-item {
+ margin-top: 20px;
+ border-style: solid;
+ border-width: 0 0 3px 0;
+ border-color: $black;
+}
+
+.post-list-footer {
+ text-align: center;
+ padding-bottom: 5px;
+}
+
+.blog-posts {
+ box-sizing: border-box;
+ margin: 0 auto;
+ @media screen and (min-width: $break-large) {
+ width: 80%;
+ }
+}