div updates

src/assets/style/_base.scss

@@ -8,7 +8,7 @@
 body {
  	background-color: var(--bg-color);
  	color: var(--body-color);
- 	transition: color 1s, background-color .5s;
+ 	transition: color .6s, background-color .6s;
  	font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
   margin:0;
   padding:0;
@@ -17,21 +17,20 @@ body {
 
 a:not(.button) {
 	color: var(--link-color);
- 	transition: color 1s;
+ 	transition: color .6s;
-
 	&:hover {
 		opacity: .8;
 	}
 }
 
 h1,h2,h3,h4,h5,h6 {
-	transition: color 1s;
+	transition: color .6s;
 	color: var(--title-color);
 }
 
 .bg-highlight {
 	background-color: var(--bg-highlight-color);
-	transition: background-color .5s;
+	transition: background-color .6s;
 	padding: var(--space);
   border-radius: 5px;
   box-shadow: 1px 1px 5px 0 rgba(0,0,0,.02), 1px 1px 15px 0 rgba(0,0,0,.03);

src/components/Author.vue

@@ -1,8 +1,12 @@
 <template>
 	<div class="author">
 		<g-image class="author__image" src="~/assets/images/author.jpg" width="240" height="240" blur="5" />
-		<h1 v-if="siteTitle" class="author__siteTitle">{{ siteTitle }}</h1>
+		<h1 v-if="siteTitle" class="author__site-title">{{ siteTitle }}</h1>
 		<p class="author__intro">A minimalistic and simple blog starter for Gridsome that uses Markdown for content.</p>
+		<p class="author__links">
+			<a href="#">Twitter</a>
+			<a href="#">GitHub</a>
+		</p>
 	</div>
 </template>
 
@@ -30,8 +34,15 @@ export default {
 		opacity: .8;
 	}
 
-	&__siteTitle {
+	&__site-title {
 		font-size: 1.5em;
 	}
+
+	&__links {
+		margin-top: -.5em;
+		a {
+			margin: 0 .5em;
+		}
+	}
 }
 </style>

src/components/PostCard.vue

@@ -1,16 +1,18 @@
 <template>
 	<div class="post-card bg-highlight">
 		<h2 v-html="post.title" />
-		{{ post }}
+		<p v-html="post.excerpt" />
-		<p>
+    <PostMeta :post="post" />
-		  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur excepturi labore tempore expedita, et iste tenetur suscipit explicabo! Dolores, aperiam non officia eos quod asperiores
-		</p>
 		<g-link class="post-card__link" :to="post.path">Link</g-link>
 	</div>
 </template>
 
 <script>
+import PostMeta from '~/components/PostMeta'
 export default {
+  components: {
+    PostMeta
+  },
 	props: ['post'],
 }
 </script>

src/components/PostMeta.vue

@@ -0,0 +1,16 @@
+<template>
+	 <div class="post-meta">Posted 19. February 2019. <strong>3 min</strong> read</div>
+</template>
+
+<script>
+export default {
+	props: ['post']
+}
+</script>
+
+<style lang="scss">
+.post-meta {
+	font-size: .8em;
+	opacity: .7;
+}
+</style>

src/layouts/Default.vue

@@ -4,7 +4,7 @@
     <header class="header">
       <div class="header__left">
         <g-link v-if="$route.params.slug" class="logo" to="/">
-          <span class="logo__text">← Gridsome Blog Starter</span>
+          <span class="logo__text">Gridsome Blog Starter</span>
         </g-link>
       </div>
       <div class="header__right">        

src/templates/Post.vue

@@ -2,12 +2,12 @@
 	<Layout>
 		<div class="post-title">
 			<h1 class="post-title__text"> {{ $page.post.title }} </h1>
-			<p class="post-title__meta">Posted 19. February 2019. <strong>3 min</strong> read</p>
+			<PostMeta :post="$page.post" />
 		</div>
 		
 		<div class="post bg-highlight">
 			<div class="post__header">
-				<!-- Add anything here -->
+				<!-- Add anything here. Like a featured image -->
 			</div>
 			<div class="post__content" v-html="$page.post.content" />
 			<div class="post__footer">
@@ -24,10 +24,13 @@
 </template>
 
 <script>
+import PostMeta from '~/components/PostMeta'
 import Author from '~/components/Author.vue'
+
 export default {
 	components: {
-		Author
+		Author,
+		PostMeta
 	}
 }
 </script>
@@ -42,13 +45,12 @@ query Post ($path: String!) {
 </page-query>
 
 <style lang="scss">
+
 .post-title {
 	padding: calc(var(--space) / 2) 0;
 	text-align: center;
-	&__meta {
-		font-size: .8em;
-	}
 }
+
 .post {
 
 	&__header {
@@ -65,6 +67,7 @@ query Post ($path: String!) {
 		width: calc(100% + var(--space) * 2);
 		margin-left: calc(var(--space) * -1);
 	}
+
 	pre {
 		width: calc(100% + var(--space) * 2);
 		margin-left: calc(var(--space) * -1);
@@ -74,7 +77,10 @@ query Post ($path: String!) {
 		color: var(--body-color);
 		text-shadow: none;
 		margin-bottom: 2em;
+		border-top: 1px solid rgba(0,0,0,.03);
+		border-bottom: 1px solid rgba(0,0,0,.03);
 	}
+
 	code {
 		background-color: var(--bg-code)!important;
 		color: var(--body-color);