improve basic styling

docs/src/layouts/App/base.scss

@@ -0,0 +1,71 @@
+*,
+*::before,
+*::after {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  box-shadow: none;
+  outline: none;
+}
+
+::-webkit-scrollbar {
+  width: 14px;
+  height: 14px;
+}
+
+::-webkit-scrollbar-track {
+  border: 4px solid transparent;
+  background-clip: padding-box;
+  border-radius: 8px;
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  border: 4px solid rgba(0, 0, 0, 0);
+  background-clip: padding-box;
+  border-radius: 8px;
+  background-color: $colorBlack;
+}
+
+::-webkit-scrollbar-button {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+
+html {
+  scroll-behavior: smooth;
+  height: 100%;
+}
+
+body {
+  font-family: 'Inter', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  line-height: 1.7;
+  background-color: $colorLightGrey;
+  height: 100%;
+}
+
+*:focus {
+  outline: none;
+}
+
+a {
+  color: inherit;
+  transition: color 0.2s $ease, background-color 0.2s $ease;
+  text-decoration: none;
+}
+
+p {
+  margin-bottom: 1rem;
+}
+
+.is-active {
+  background: black;
+  color: white;
+}

docs/src/layouts/App/index.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="app">
+    <header class="app__header">
+      <div class="app__inner">
+        <strong>
+          <g-link to="/">{{ $static.metadata.siteName }}</g-link>
+        </strong>
+      </div>
+    </header>
+    <div class="app__content">
+      <div class="app__inner">
+        <div class="app__content-inner">
+          <aside class="app__sidebar">
+            <div v-for="edge in $static.allPost.edges" :key="edge.node.id">
+              <g-link :to="edge.node.path">
+                {{ edge.node.title }}
+              </g-link>
+            </div>
+          </aside>
+          <main class="app__main">
+            <slot/>
+          </main>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<static-query>
+query {
+  metadata {
+    siteName
+  }
+  allPost {
+    edges {
+      node {
+        id
+        title
+        path
+      }
+    }
+  }
+}
+</static-query>
+
+<style lang="scss" src="./base.scss" />
+<style lang="scss" src="./style.scss" scoped />

docs/src/layouts/App/style.scss

@@ -0,0 +1,34 @@
+.app {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+
+  &__header {
+    flex: 0 0 auto;
+    padding: 2rem 0;
+  }
+
+  &__content {
+    flex: 1 1 auto;
+  }
+
+  &__content-inner {
+    display: flex;
+  }
+
+  &__sidebar {
+    flex: 0 0 auto;
+    width: 18rem;
+  }
+
+  &__main {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  &__inner {
+    max-width: 62rem;
+    margin: 0 auto;
+    padding: 0 1rem;
+  }
+}

docs/src/layouts/Default.vue

@@ -1,60 +0,0 @@
-<template>
-  <div class="layout">
-    <header class="header">
-      <strong>
-        <g-link to="/">{{ $static.metadata.siteName }}</g-link>
-      </strong>
-    </header>
-    <slot/>
-  </div>
-</template>
-
-<static-query>
-query {
-  metadata {
-    siteName
-  }
-}
-</static-query>
-
-<style lang="scss">
-body {
-  font-family: 'Inter', -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
-  margin:0;
-  padding:0;
-  line-height: 1.5;
-  background-color: $colorLightGrey;
-}
-
-.layout {
-  max-width: 760px;
-  margin: 0 auto;
-  padding-left: 20px;
-  padding-right: 20px;
-}
-
-.header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
-  height: 80px;
-}
-
-.nav__link {
-  margin-left: 20px;
-}
-
-*:focus {
-  outline: none;
-}
-
-.is-active {
-  background: black;
-  color: white;
-}
-
-// :not(pre) > code[class*="language-"], pre[class*="language-"] {
-//   background-color: $colorBlack;
-// }
-</style>

docs/src/main.js

@@ -1,13 +1,13 @@
 import Prism from 'prismjs'
 import 'prismjs/themes/prism-coy.css'
 import 'prismjs/components/prism-jsx.js'
-import DefaultLayout from '~/layouts/Default.vue'
+import App from '~/layouts/App'
 import Demo from '~/components/Demo'
 import Tab from '~/components/Tab'
 import ReactRenderer from '~/components/ReactRenderer'
 
 export default function (Vue, { router, head, isClient }) {
-  Vue.component('Layout', DefaultLayout)
+  Vue.component('Layout', App)
   Vue.component('Demo', Demo)
   Vue.component('Tab', Tab)
   Vue.component('ReactRenderer', ReactRenderer)

docs/src/pages/Index.vue

@@ -1,25 +1,5 @@
 <template>
   <Layout>
-
+    Hi there! 👋
-    <div v-for="edge in $static.allPost.edges" :key="edge.node.id">
-      <g-link :to="edge.node.path">
-        {{ edge.node.title }}
-      </g-link>
-    </div>
-
   </Layout>
 </template>
-
-<static-query>
-query {
-  allPost {
-    edges {
-      node {
-        id
-        title
-        path
-      }
-    }
-  }
-}
-</static-query>

docs/src/variables.scss

@@ -1,3 +1,38 @@
 $colorWhite: #FFF;
 $colorLightGrey: #F8F8F8;
 $colorBlack: #000;
+
+/* Default Equations */
+$linear: cubic-bezier(0.250, 0.250, 0.750, 0.750);
+$ease: cubic-bezier(0.250, 0.100, 0.250, 1.000);
+$easeIn: cubic-bezier(0.420, 0.000, 1.000, 1.000);
+$easeOut: cubic-bezier(0.000, 0.000, 0.580, 1.000);
+$easeInOut: cubic-bezier(0.420, 0.000, 0.580, 1.000);
+
+/* Penner Equations (approximated) originally created by @robpenner */
+$easeInQuad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
+$easeInCubic: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+$easeInQuart: cubic-bezier(0.895, 0.030, 0.685, 0.220);
+$easeInQuint: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+$easeInSine: cubic-bezier(0.470, 0.000, 0.745, 0.715);
+$easeInExpo: cubic-bezier(0.950, 0.050, 0.795, 0.035);
+$easeInCirc: cubic-bezier(0.600, 0.040, 0.980, 0.335);
+$easeInBack: cubic-bezier(0.600, -0.280, 0.735, 0.045);
+
+$easeOutQuad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
+$easeOutCubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+$easeOutQuart: cubic-bezier(0.165, 0.840, 0.440, 1.000);
+$easeOutQuint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
+$easeOutSine: cubic-bezier(0.390, 0.575, 0.565, 1.000);
+$easeOutExpo: cubic-bezier(0.190, 1.000, 0.220, 1.000);
+$easeOutCirc: cubic-bezier(0.075, 0.820, 0.165, 1.000);
+$easeOutBack: cubic-bezier(0.175, 0.885, 0.320, 1.275);
+
+$easeInOutQuad: cubic-bezier(0.455, 0.030, 0.515, 0.955);
+$easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
+$easeInOutQuart: cubic-bezier(0.770, 0.000, 0.175, 1.000);
+$easeInOutQuint: cubic-bezier(0.860, 0.000, 0.070, 1.000);
+$easeInOutSine: cubic-bezier(0.445, 0.050, 0.550, 0.950);
+$easeInOutExpo: cubic-bezier(1.000, 0.000, 0.000, 1.000);
+$easeInOutCirc: cubic-bezier(0.785, 0.135, 0.150, 0.860);
+$easeInOutBack: cubic-bezier(0.680, -0.550, 0.265, 1.550);