From 66b127168a0c93f573ceb148f6f79302c2773c77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Sat, 18 Apr 2020 23:00:47 +0200
Subject: [PATCH] improve styling

---
 docs/gridsome.config.js                      |  8 ++++
 docs/src/components/PageNavigation/index.vue |  4 +-
 docs/src/layouts/App/base.scss               |  1 +
 docs/src/layouts/App/style.scss              |  7 +++-
 docs/src/templates/DocPage/style.scss        | 39 ++++++++++++++++++--
 5 files changed, 51 insertions(+), 8 deletions(-)

diff --git a/docs/gridsome.config.js b/docs/gridsome.config.js
index 48827a26..25a29d65 100644
--- a/docs/gridsome.config.js
+++ b/docs/gridsome.config.js
@@ -23,6 +23,14 @@ module.exports = {
         plugins: [
           '@gridsome/remark-prismjs',
         ],
+        remark: {
+          autolinkHeadings: {
+            content: {
+              type: 'text',
+              value: '#'
+            }
+          }
+        }
       },
     },
   ],
diff --git a/docs/src/components/PageNavigation/index.vue b/docs/src/components/PageNavigation/index.vue
index 7def32c0..3bf39af7 100644
--- a/docs/src/components/PageNavigation/index.vue
+++ b/docs/src/components/PageNavigation/index.vue
@@ -7,7 +7,7 @@
         :to="previousPage.link"
         v-if="previousPage"
       >
-        &larr; {{ 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>
diff --git a/docs/src/layouts/App/base.scss b/docs/src/layouts/App/base.scss
index d3e2f556..817da98a 100644
--- a/docs/src/layouts/App/base.scss
+++ b/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 {
diff --git a/docs/src/layouts/App/style.scss b/docs/src/layouts/App/style.scss
index 16a97f87..dd0eb214 100644
--- a/docs/src/layouts/App/style.scss
+++ b/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);
     }
   }
diff --git a/docs/src/templates/DocPage/style.scss b/docs/src/templates/DocPage/style.scss
index 4d6c0eaf..bc25d7ba 100644
--- a/docs/src/templates/DocPage/style.scss
+++ b/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;
     }