improve styling

docs/src/components/AppSection/style.scss

@@ -4,12 +4,16 @@
   &__inner {
     position: relative;
     z-index: 2;
-    padding: 4rem 1rem;
+    padding: 5rem 1rem;
     margin: 0 auto;
     max-width: 50rem;
 
-    // @media (min-width: $mobileBreakPoint) {
-    //   padding: 0 2rem;
-    // }
+    @media (min-width: 600px) {
+      padding: 7rem 2rem;
+    }
+  }
+
+  & + & &__inner {
+    padding-top: 0;
   }
 }

docs/src/layouts/App/style.scss

@@ -1,4 +1,5 @@
 $navHeight: 4.5rem;
+$mobileBreakPoint: 600px;
 $menuBreakPoint: 800px;
 
 .app {
@@ -34,7 +35,7 @@ $menuBreakPoint: 800px;
     height: $navHeight;
     padding: 0 1rem;
 
-    @media (min-width: $menuBreakPoint) {
+    @media (min-width: $mobileBreakPoint) {
       padding: 0 2rem;
     }
   }
@@ -310,6 +311,10 @@ $menuBreakPoint: 800px;
     -webkit-overflow-scrolling: touch;
     overscroll-behavior: contain;
 
+    @media (min-width: $mobileBreakPoint) {
+      padding: 1rem 1rem 1rem 2rem;
+    }
+
     @media (min-width: $menuBreakPoint) {
       padding: 2rem 0;
     }

docs/src/main.js

@@ -8,7 +8,7 @@ import App from '~/layouts/App'
 
 Prism.manual = true
 
-export default function (Vue, { head }) {
+export default function (Vue) {
   // fix docsearch
   if (typeof window === 'object' && !window.process) {
     window.process = {