improve styling

docs/gridsome.config.js

@@ -19,7 +19,7 @@ module.exports = {
       options: {
         typeName: 'DocPage',
         baseDir: './src/data/posts',
-        template: './src/templates/DocPage.vue',
+        template: './src/templates/DocPage',
         plugins: [
           '@gridsome/remark-prismjs',
         ],

docs/src/layouts/App/prism.scss

@@ -66,7 +66,6 @@ pre[class*="language-"] {
   position: relative;
   color: $codeText;
   background: $codeBg;
-  margin: 0.5em 0;
   padding: 1.2rem 1.5rem;
   border-radius: 0.5rem;
 }

docs/src/templates/DocPage.vue

@@ -1,5 +0,0 @@
-<template>
-  <Layout>
-    <VueRemarkContent />
-  </Layout>
-</template>

docs/src/templates/DocPage/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <Layout>
+    <div class="doc-page">
+      <VueRemarkContent class="doc-page__markdown" />
+    </div>
+  </Layout>
+</template>
+
+<style lang="scss" src="./style.scss" scoped></style>

docs/src/templates/DocPage/style.scss

@@ -0,0 +1,17 @@
+.doc-page {
+  &__markdown ::v-deep {
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      font-weight: 500;
+    }
+
+    > * + * {
+      margin-top: 1.5em;
+    }
+  }
+}