Merge branch 'main' into feature/extension-classes

docs/gridsome.client.js

@@ -0,0 +1,15 @@
+export default function (Vue, options, context) {
+
+  context.router.afterEach(to => {
+    if (to.hash) {
+      setTimeout(() => {
+        const element = document.getElementById(to.hash.substr(1))
+        const top = element.offsetTop
+        const offset = parseFloat(getComputedStyle(element).scrollMarginTop)
+
+        window.scrollTo(0, top - offset)
+      }, 0)
+    }
+  })
+
+}

docs/src/components/Demo/style.scss

@@ -3,7 +3,7 @@
   border-radius: 0.5rem;
 
   &__preview {
-    padding: 1.5rem;
+    padding: 1.25rem;
     border-top-left-radius: inherit;
     border-top-right-radius: inherit;
     border-bottom-width: 0;
@@ -17,7 +17,7 @@
   }
 
   &__tabs {
-    padding: 1rem 1.5rem 0 1.5rem;
+    padding: 1rem 1.25rem 0 1.25rem;
     background-color: rgba($colorBlack, 0.9);
   }
 
@@ -54,7 +54,7 @@
     display: flex;
     justify-content: space-between;
     width: 100%;
-    padding: 0.5rem 1.5rem;
+    padding: 0.5rem 1.25rem;
     font-size: 0.85rem;
     border: 1px solid rgba($colorWhite, 0.1);
     border-bottom-left-radius: inherit;

docs/src/components/LiveDemo/CustomLayout.vue

@@ -46,7 +46,7 @@ export default {
   border-radius: 0.5rem 0.5rem 0 0;
 
   &__preview {
-    padding: 1.5rem;
+    padding: 1.25rem;
     border-top-left-radius: inherit;
     border-top-right-radius: inherit;
     border-bottom-width: 0;
@@ -62,7 +62,7 @@ export default {
     .prism-editor-wrapper {
       overflow: auto;
       max-height: unquote("max(300px, 60vh)");
-      padding: 1.5rem;
+      padding: 1.25rem;
     }
 
     .prism-editor__container {

docs/src/components/LiveDemo/style.scss

@@ -42,7 +42,7 @@
     display: flex;
     justify-content: space-between;
     width: 100%;
-    padding: 0.5rem 1.5rem;
+    padding: 0.5rem 1.25rem;
     border: 1px solid rgba($colorWhite, 0.1);
     border-bottom-left-radius: inherit;
     border-bottom-right-radius: inherit;
@@ -51,7 +51,7 @@
   }
 
   &__error {
-    padding: 1rem 1.5rem;
+    padding: 1.25rem;
     color: $colorRed;
     background-color: rgba($colorRed, 0.1);
   }

docs/src/layouts/App/base.scss

@@ -59,6 +59,10 @@ body {
   color: $colorText;
 }
 
+*[id] {
+  scroll-margin-top: 6rem;
+}
+
 button {
   font: inherit;
   cursor: pointer;

docs/src/layouts/App/prism.scss

@@ -44,7 +44,7 @@ pre[class*="language-"] {
   position: relative;
   color: $colorWhite;
   background: $codeBackground;
-  padding: 1.2rem 1.5rem !important;
+  padding: 1.25rem !important;
   border-radius: 0.5rem;
   max-height: unquote("max(300px, 60vh)");
 }

docs/src/templates/DocPage/style.scss

@@ -101,7 +101,7 @@
       & + ul {
         list-style: none;
         border: 1px solid rgba($colorWhite, 0.1);
-        padding: 1.2rem 1.5rem !important;
+        padding: 1.25rem !important;
         border-radius: 0.5rem;
 
         &::before {
@@ -225,7 +225,7 @@
     }
 
     > .remark-container {
-      padding: 1rem;
+      padding: 1.25rem;
       border: 1px solid rgba($colorWhite, 0.1);
       border-radius: 0.5rem;