improve styling

docs/gridsome.config.js

@@ -23,6 +23,14 @@ module.exports = {
         plugins: [
           '@gridsome/remark-prismjs',
         ],
+        remark: {
+          autolinkHeadings: {
+            content: {
+              type: 'text',
+              value: '#'
+            }
+          }
+        }
       },
     },
   ],

docs/src/components/PageNavigation/index.vue

@@ -7,7 +7,7 @@
         :to="previousPage.link"
         v-if="previousPage"
       >
-        ← {{ previousPage.title }}
+        ← {{ previousPage.title }}
       </g-link>
     </div>
     <div class="page-navigation__next">
@@ -17,7 +17,7 @@
         :to="nextPage.link"
         v-if="nextPage"
       >
-        {{ nextPage.title }} &rarr;
+        {{ nextPage.title }} →
       </g-link>
     </div>
   </nav>

docs/src/layouts/App/base.scss

@@ -78,6 +78,7 @@ code {
   padding: 0.1rem 0.5rem;
   border-radius: 0.25rem;
   color: rgba($colorBlack, 0.7);
+  font-size: 0.9em;
 }
 
 .is-active {

docs/src/layouts/App/style.scss

@@ -26,13 +26,16 @@
     padding: 0.1rem 0.5rem;
     border-radius: 5px;
     font-weight: 500;
-    color: rgba($colorBlack, 0.7);
+    color: rgba($colorBlack, 0.6);
     margin-bottom: 0.2rem;
     margin-left: -0.5rem;
 
-    &.active,
     &:hover {
       color: $colorBlack;
+    }
+
+    &.active {
+      color: $colorBlack;
       background-color: rgba($colorBlack, 0.05);
     }
   }

docs/src/templates/DocPage/style.scss

@@ -1,18 +1,49 @@
 .doc-page {
   &__markdown ::v-deep {
 
-    h1 {
-      font-weight: 400;
-    }
-
+    h1,
     h2,
     h3,
     h4,
     h5,
     h6 {
+      position: relative;
       font-weight: 500;
     }
 
+    h1 {
+      font-weight: 400;
+    }
+
+    h1,
+    h4,
+    h5,
+    h6 {
+      a {
+        display: none;
+      }
+    }
+
+    h2,
+    h3 {
+      position: relative;
+
+      a {
+        position: absolute;
+        top: 0;
+        right: 100%;
+        color: rgba($colorBlack, 0.4);
+        font-weight: 400;
+        padding-right: 0.5rem;
+        opacity: 0;
+        transition: opacity 0.1s $ease;
+      }
+
+      &:hover a {
+        opacity: 1;
+      }
+    }
+
     > * + * {
       margin-top: 1.5em;
     }