div updates

src/assets/style/_base.scss

@@ -26,13 +26,4 @@ a:not(.button) {
 h1,h2,h3,h4,h5,h6 {
 	transition: color .6s;
 	color: var(--title-color);
-}
-
-.bg-highlight {
-	background-color: var(--bg-highlight-color);
-	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);
-  transition: transform .3s, background-color .3s, box-shadow .6s;
-}
+}

src/assets/style/_content-box.scss

@@ -0,0 +1,9 @@
+// Used to wrap content inside a nice box.
+.content-box {
+	background-color: var(--bg-highlight-color);
+	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);
+  transition: transform .3s, background-color .3s, box-shadow .6s;
+}

src/assets/style/_typography.scss

@@ -1,5 +1,3 @@
-// Generated with https://type-scale.com/
-
 @import url('https://fonts.googleapis.com/css?family=Poppins:400, 600');
 
 html {font-size: 20px;}

src/assets/style/index.scss

@@ -2,3 +2,4 @@
 @import 'variables';
 @import 'typography';
 @import 'base';
+@import 'content-box';

src/components/Author.vue

@@ -1,12 +1,21 @@
 <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__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>
+
+		<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.com/gridsome">Twitter</a>
+			<a href="//github.com/gridsome/gridsome">GitHub</a>
+		</p>
+
 	</div>
 </template>
 

src/components/PostCard.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="post-card bg-highlight">
+	<div class="post-card content-box">
 		<h2 v-html="post.title" />
 		<p v-html="post.excerpt" />
     <PostMeta :post="post" />

src/components/PostMeta.vue

@@ -11,6 +11,5 @@ export default {
 <style lang="scss">
 .post-meta {
 	font-size: .8em;
-	opacity: .7;
 }
 </style>

src/layouts/Default.vue

@@ -53,6 +53,11 @@ export default {
     display: flex;
     align-items: center;
   }
+
+  @media screen and (min-width: 1200px) {
+    //Make header sticky for large screens
+    position: sticky;
+  }
 }
 
 .main {

src/main.js

@@ -1,13 +1,15 @@
 // Import main css
 import '~/assets/style/index.scss'
 
+// Import PrismJS style
 import 'prismjs/themes/prism.css'
 
-// Import default layout so we don't need to import it everywhere.
+// Import default layout so we don't need to import it to every page
 import DefaultLayout from '~/layouts/Default.vue'
 
 // The Client API can be used here. Learn more: gridsome.org/docs/client-api
 export default function (Vue, { router, head, isClient }) {
+  
   // Set default layout as a global component
   Vue.component('Layout', DefaultLayout)
 }

src/pages/Index.vue

@@ -1,7 +1,7 @@
 <template>
   <Layout>
     
-    <Author site-title="Gridome Blog Starter" />
+    <Author :site-title="$static.metaData.siteName" />
     
     <div class="posts">
       <PostCard v-for="edge in $page.posts.edges" :key="edge.node.id" :post="edge.node"/>
@@ -10,6 +10,14 @@
   </Layout>
 </template>
 
+<static-query>
+query {
+  metaData {
+    siteName
+  }
+}
+</static-query>
+
 <page-query>
 {
   posts: allPost {

src/templates/Post.vue

@@ -5,7 +5,7 @@
 			<PostMeta :post="$page.post" />
 		</div>
 		
-		<div class="post bg-highlight">
+		<div class="post content-box">
 			<div class="post__header">
 				<!-- Add anything here. Like a featured image -->
 			</div>
@@ -69,16 +69,14 @@ query Post ($path: String!) {
 	}
 
 	pre {
-		width: calc(100% + var(--space) * 2);
-		margin-left: calc(var(--space) * -1);
 		padding: calc(var(--space) / 2);
 		font-size: .85em;
 		background-color: var(--bg-code);
 		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);
+		border: 1px solid rgba(0,0,0,.03);
+		border-radius: 5px;
 	}
 
 	code {