From 7c7b7fb0015d172c30ac4de5b16125c4ff5dd3ea Mon Sep 17 00:00:00 2001
From: Tommy Vedvik <tommyvedvik@gmail.com>
Date: Wed, 27 Feb 2019 15:29:29 +0100
Subject: [PATCH] Various design updates

---
 content/posts/a-post-with-a-poster.md |  2 +-
 src/assets/style/_variables.scss      |  3 +++
 src/components/Author.vue             |  2 +-
 src/components/Logo.vue               | 20 +++++++++++++++++++-
 src/layouts/Default.vue               |  8 +-------
 src/templates/Post.vue                |  2 +-
 6 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/content/posts/a-post-with-a-poster.md b/content/posts/a-post-with-a-poster.md
index 10f3ad2..fa316e3 100644
--- a/content/posts/a-post-with-a-poster.md
+++ b/content/posts/a-post-with-a-poster.md
@@ -1,6 +1,6 @@
 ---
 title: A post with a poster
-date: 2019-02-07
+date: 2019-01-07
 tags: ['Markdown']
 poster: ./images/alexandr-podvalny-220262-unsplash.jpg
 excerpt: "Markdown is intended to be as easy-to-read and easy-to-write as is feasible. Readability, however, is emphasized above all else. A Markdown-formatted document should be publishable as-is, as plain text, without looking like it's been marked up with tags or formatting instructions."
diff --git a/src/assets/style/_variables.scss b/src/assets/style/_variables.scss
index 368119a..6823e01 100644
--- a/src/assets/style/_variables.scss
+++ b/src/assets/style/_variables.scss
@@ -13,6 +13,7 @@ body {
  	--border-color:  rgba(0,0,0,.1);;
   --space: 2.5rem;
   --container-width: 800px;
+  --header-height: 80px;
   --radius: 5px;
 }
 
@@ -23,6 +24,7 @@ body {
 	}
 	body {
 		--space: 1.5rem;
+		--header-height: 60px;
 	}
 }
 
@@ -35,4 +37,5 @@ body[data-theme="dark"] {
  	--border-color:  rgba(255,255,255,.1);;
  	--body-color: #ced8de;
  	--title-color: #fff;
+
 }
\ No newline at end of file
diff --git a/src/components/Author.vue b/src/components/Author.vue
index 6c379d1..0f6418c 100644
--- a/src/components/Author.vue
+++ b/src/components/Author.vue
@@ -8,7 +8,7 @@
 		</h1>
 
 		<p class="author__intro">
-			A hackable, minimalistic and simple blog starter for Gridsome that uses Markdown for content.
+			A modern, minimalistic and simple blog starter for Gridsome that uses Markdown for content.
 		</p>
 
 		<p class="author__links">
diff --git a/src/components/Logo.vue b/src/components/Logo.vue
index 80702ff..3c89a25 100644
--- a/src/components/Logo.vue
+++ b/src/components/Logo.vue
@@ -1,5 +1,7 @@
 <template>
 	<g-link class="logo" to="/">
+		<g-image class="logo__image" src="~/assets/images/author.jpg" width="80" height="80" blur="5" />
+
 	  <span class="logo__text">
 	    {{ $static.metaData.siteName }}
 	  </span>
@@ -12,4 +14,20 @@ query {
     siteName
   }
 }
-</static-query>
\ No newline at end of file
+</static-query>
+
+<style lang="scss">
+.logo {
+	text-decoration: none;
+  color: var(--body-color)!important;
+  font-size: .9em;
+  
+	&__image {
+		vertical-align: middle;
+		border-radius: 99px;
+		height: 40px;
+		width: 40px;
+		margin-right: .5em;
+	}	
+}
+</style>
\ No newline at end of file
diff --git a/src/layouts/Default.vue b/src/layouts/Default.vue
index dac522c..460b40e 100644
--- a/src/layouts/Default.vue
+++ b/src/layouts/Default.vue
@@ -39,17 +39,11 @@ export default {
 </script>
 
 <style lang="scss">
-.logo {
-  text-decoration: none;
-  color: var(--body-color)!important;
-  font-size: .9em;
-}
-
 .header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  min-height: 60px;
+  min-height: var(--header-height);
   padding: 0 calc(var(--space) / 2);
   top:0;
   z-index: 10;
diff --git a/src/templates/Post.vue b/src/templates/Post.vue
index 8780396..991f1e2 100644
--- a/src/templates/Post.vue
+++ b/src/templates/Post.vue
@@ -45,7 +45,7 @@ query Post ($path: String!) {
     timeToRead
     excerpt
     content
-    poster (width: 800, height: 460, blur: 10)
+    poster (width: 780, blur: 10)
   }
 }
 </page-query>