blog page styling

Author: prateekbh

src/routes/blog/index.js

@@ -11,12 +11,14 @@ const blogs = (props) => {
 	}
 
 	if (data && data.data) {
+		const { details, content } = data.data;
 		return (
 			<article class={style.blogcontainer}>
-				<h1 class={style.blogtitle}>{data.data.details.title}</h1>
-                                <caption class={style.blogsubtitle}>{data.data.details.subtitle}</caption>
+				<h1 class={style.blogtitle}>{details.title}</h1>
+				{ details.subtitle && <caption class={style.blogsubtitle}>{details.subtitle}</caption> }
+				{ details.cover && <img class={style.blogcover} src={details.cover} /> }
 				<div class={style.blogbody}>
-					<Markdown>{ data.data.content }</Markdown>
+					<Markdown>{ content }</Markdown>
 				</div>
 			</article>
 		);

src/routes/blog/style.css

@@ -8,6 +8,7 @@
 .blogtitle {
   font-size: 2.2rem;
   font-weight: 400;
+  margin-bottom: 0;
 }
 
 .blogbody {
@@ -19,8 +20,13 @@
 }
 
 .blogsubtitle {
-  font-weight:300;
-  color: #999;
+  color: #aaa;
   display: block;
+  text-align: left;
+  font-size: 1.2rem;
+  margin-bottom: 2rem;
+}
 
+.blogcover {
+  width: 100%;
 }