Fix typography

src/assets/style/_typography.scss

@@ -1,6 +1,8 @@
 @import url('https://fonts.googleapis.com/css?family=Poppins:400, 600');
 
-html {font-size: 20px;}
+html {
+  font-size: var(--base-font-size);
+}
 
 body {
   font-family: 'Poppins', sans-serif;

src/assets/style/_variables.scss

@@ -1,4 +1,8 @@
 // Default variables
+html {
+	--base-font-size: 20px;
+}
+
 body {
  	--bg-color: #F3F7F9;
  	--bg-highlight-color: #FFF;
@@ -12,6 +16,9 @@ body {
 }
 
 @media screen and (max-width: 650px) {
+	html {
+		--base-font-size: 17px;
+	}
 	body {
 		--space: 1.5rem;
 	}

src/layouts/Default.vue

@@ -4,7 +4,9 @@
     <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">
+            {{ $static.metaData.siteName }}
+          </span>
         </g-link>
       </div>
       <div class="header__right">        
@@ -17,12 +19,21 @@
     </main>
 
     <footer class="footer">
-      Copyright © {{ new Date().getFullYear() }}. Powered by <a href="//gridsome.org"> Gridsome </a>
+      <span class="footer__copyright">Copyright © {{ new Date().getFullYear() }}. </span>
+      <span class="footer__links">Powered by <a href="//gridsome.org"> Gridsome </a></span>
     </footer>
 
   </div>
 </template>
 
+<static-query>
+query {
+  metaData {
+    siteName
+  }
+}
+</static-query>
+
 <script>
 import ToggleTheme from '~/components/ToggleTheme.vue'
 
@@ -75,9 +86,12 @@ export default {
   text-align: center;
   font-size: .8em;
 
+  > span {
+    margin: 0 .35em;
+  }
+
   a {
     color: currentColor;
-    margin: 0 .35em;
   }
 }
 </style>

src/templates/Post.vue

@@ -20,7 +20,7 @@
 			<!-- Add comment widgets here -->
 		</div>
 
-		<Author />
+		<Author class="post-author" />
 	</Layout>
 </template>
 
@@ -52,7 +52,7 @@ query Post ($path: String!) {
 <style lang="scss">
 
 .post-title {
-	padding: calc(var(--space) / 2) 0;
+	padding: calc(var(--space) / 2) 0 var(--space);
 	text-align: center;
 }
 
@@ -85,4 +85,8 @@ query Post ($path: String!) {
 		display: none;
 	}
 }
+
+.post-author {
+	margin-top: calc(var(--space) / 2);
+}
 </style>