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;
+  }
+}