Various design updates

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."

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;
+
 }

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">

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>
+</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>

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;

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>