responsive fixes

Author: prateekbh

src/components/header/style.css

@@ -58,7 +58,11 @@
 }
 
 @media all and (max-width: 728px) {
-  nav {
-    display: none;
+	.header h1{
+		font-size: 2rem;
+	}
+  .header nav a{
+		line-height: 100px;
+		margin: 0 8px;
   }
 }

src/routes/blogs/index.js

@@ -5,34 +5,47 @@ import style from './style';
 
 const blogs = (props) => {
 	const [data, isLoading] = usePrerenderData(props);
+	return (
+		<div class={style.pageBlogs}>
+			<h1 class={style.pageTitle}>My Blogs</h1>
+			{ getBlogsListing(data, isLoading) }
+		</div>
+	);
+};
+
+function getBlogsListing(data, isLoading) {
 	if (isLoading) {
-		return (<h1>Loading</h1>);
+		return (
+			<article class={style.loadingPlaceholder}>
+				<h2 class={`${style.blogtitle} loading`}>&nbsp;</h2>
+				<div class={`${style.loadingBody} loading`}>&nbsp;</div>
+				<div class={`${style.loadingBody} loading`}>&nbsp;</div>
+				<div class={`${style.loadingBody} loading`}>&nbsp;</div>
+			</article>
+		);
 	}
 	if (data && data.data) {
 		const { data: blogs } = data;
 		return (
-			<div class={style.pageBlogs}>
-				<h1 class={style.pageTitle}>My Blogs</h1>
+			<>
 				{blogs.edges.map(blog => (
-					<Link href={`/blog/${blog.id}`}>
-						<article>
-							<h2>{blog.details.title}</h2>
-							<div>
-								{
-									(blog.details.tags.substr(1, blog.details.tags.length - 2).split(',') || []).map(tag => <span class={style.tag}>{tag}</span>)
-								}
-							</div>
-							<p class={style.preview}>
-								{blog.preview}
-							</p>
-						</article>
-					</Link>
-				))}
-			</div>
+				<Link href={`/blog/${blog.id}`}>
+					<article>
+						<h2>{blog.details.title}</h2>
+						<div>
+							{
+								(blog.details.tags.substr(1, blog.details.tags.length - 2).split(',') || []).map(tag => <span class={style.tag}>{tag}</span>)
+							}
+						</div>
+						<p class={style.preview}>
+							{blog.preview}
+						</p>
+					</article>
+				</Link>
+			))}
+			</>
 		);
 	}
-
-	return (<h1>Error</h1>);
-};
+}
 
 export default blogs;

src/routes/blogs/style.css

@@ -47,6 +47,27 @@ h2 {
   text-overflow: ellipsis;
 }
 
+.loadingPlaceholder .blogtitle {
+  height: 24px;
+}
+
+.loadingPlaceholder .loadingBody {
+  height: 12px;
+  margin-bottom: 8px;
+}
+
+.loadingPlaceholder .loadingBody:nth-child(2) {
+  width: 90%;
+}
+
+.loadingPlaceholder .loadingBody:nth-child(3) {
+  width: 80%;
+}
+
+.loadingPlaceholder .loadingBody:nth-child(4) {
+  width: 65%;
+}
+
 @media all and (max-width: 728px) {
   .preview {
     width: 100%;

src/routes/home/style.css

@@ -47,7 +47,7 @@
 	justify-content: center;
 }
 
-.bioleft,.bioright{
+.bioleft, .bioright{
 	max-width: 25%;
 	text-align: justify;
 }
@@ -58,4 +58,31 @@
 
 .bioright{
 	padding-left: 16px;
-}
+}
+
+@media all and (max-width: 728px) {
+	.home {
+		padding: 16px;
+	}
+
+  .about, .bio {
+		flex-direction: column;
+	}
+
+	.details {
+		padding: 16px 0 0 0;
+		font-size: 1.5rem;
+	}
+
+	.image {
+		height: auto;
+		width: 100%;
+	}
+
+	.bioleft, .bioright{
+		max-width: 100%;
+		text-align: justify;
+		padding: 0;
+	}
+}
+