some style changes

Author: prateekbh

prerender-urls.js

@@ -20,6 +20,7 @@ module.exports = () => {
 		return {
 			url: `/blog/${blog.id}`,
 			data: {
+				title: blog.details.title,
 				content: data
 			}
 		};

src/routes/blog/index.js

@@ -10,8 +10,15 @@ const blogs = (props) => {
 		return (<h1>Loading</h1>);
 	}
 
-	if (data && data.data && data.data.content) {
-		return (<Markdown>{ data.data.content }</Markdown>);
+	if (data && data.data) {
+		return (
+			<article class={style.blogcontainer}>
+				<h1 class={style.blogtitle}>{data.data.title}</h1>
+				<div class={style.blogbody}>
+					<Markdown>{ data.data.content }</Markdown>
+				</div>
+			</article>
+		);
 	}
 
 	return (<h1>Blog</h1>);

src/routes/blog/style.css

@@ -1,48 +1,15 @@
-.pageBlogs {
-  padding: 0 5%;
+.blogcontainer {
+  max-width: 728px;
+  width: 100%;
+  margin: 0 auto 10em;
+  line-height: 1.5;
 }
 
-.pageTitle {
-  position: relative;
-  display: inline-block;
+.blogtitle {
+  font-size: 1.8rem;
   font-weight: 500;
-  font-family: serif;
 }
 
-.pageTitle:after {
-  position: absolute;
-  bottom: -5px;
-  left: 0px;
-  content: '';
-  width: 75%;
-  border-bottom: 2px solid #FFC107;
-}
-
-h2 {
-  font-weight: 400;
-  font-size: 24px;
-  margin: 48px 0 12px 0;
-}
-
-.tag {
-  padding: 4px 8px;
-  margin-left: 8px;
-  text-transform: lowercase;
-  background-color: #ffdd037c;
-  border-radius: 5px;
-  color: #999;
-  font-size: 12px;
-}
-
-.tag:first-child {
-  margin-left: 0px;
-}
-
-.preview {
-  width: 50%;
-  line-height: 1.3;
-  color: #666;
-  max-height: 80px;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.blogbody {
+  font-size: 1.2rem;
 }