add some styling

docs/gridsome.config.js

@@ -11,7 +11,7 @@ function addStyleResource(rule) {
 }
 
 module.exports = {
-  siteName: 'TipTap',
+  siteName: 'tiptap',
   port: 3000,
   plugins: [
     {

docs/src/data/install.md

@@ -3,6 +3,10 @@ title: Install
 slug: install
 ---
 
-<tab>
-  npm install @tiptap/core @tiptap/vue
-</tab>
+```
+# Using npm
+npm install @tiptap/core
+
+# Using Yarn
+yarn add @tiptap/core
+```

docs/src/layouts/App/base.scss

@@ -55,6 +55,11 @@ body {
   outline: none;
 }
 
+ul,
+ol {
+  list-style: none;
+}
+
 a {
   color: inherit;
   transition: color 0.2s $ease, background-color 0.2s $ease;

docs/src/layouts/App/fonts.scss

@@ -0,0 +1,170 @@
+// @font-face {
+//   font-family: 'Inter';
+//   font-style:  normal;
+//   font-weight: 100;
+//  
+//   src: url("~@/assets/fonts/Inter-Thin-BETA.woff2") format("woff2"),
+//   url("~@/assets/fonts/Inter-Thin-BETA.woff") format("woff"),
+// ;
+// }
+// @font-face {
+//   font-family: 'Inter';
+//   font-style:  italic;
+//   font-weight: 100;
+//  
+//   src: url("~@/assets/fonts/Inter-ThinItalic-BETA.woff2") format("woff2"),
+//   url("~@/assets/fonts/Inter-ThinItalic-BETA.woff") format("woff"),
+// ;
+// }
+
+// @font-face {
+//   font-family: 'Inter';
+//   font-style:  normal;
+//   font-weight: 200;
+//  
+//   src: url("~@/assets/fonts/Inter-ExtraLight-BETA.woff2") format("woff2"),
+//   url("~@/assets/fonts/Inter-ExtraLight-BETA.woff") format("woff"),
+// ;
+// }
+// @font-face {
+//   font-family: 'Inter';
+//   font-style:  italic;
+//   font-weight: 200;
+//  
+//   src: url("~@/assets/fonts/Inter-ExtraLightItalic-BETA.woff2") format("woff2"),
+//   url("~@/assets/fonts/Inter-ExtraLightItalic-BETA.woff") format("woff"),
+// ;
+// }
+
+// @font-face {
+//   font-family: 'Inter';
+//   font-style:  normal;
+//   font-weight: 300;
+//  
+  // src: url("~@/assets/fonts/Inter-Light-BETA.woff2") format("woff2"),
+  // url("~@/assets/fonts/Inter-Light-BETA.woff") format("woff"),
+// ;
+// }
+// @font-face {
+//   font-family: 'Inter';
+//   font-style:  italic;
+//   font-weight: 300;
+//  
+  // src: url("~@/assets/fonts/Inter-LightItalic-BETA.woff2") format("woff2"),
+  // url("~@/assets/fonts/Inter-LightItalic-BETA.woff") format("woff"),
+// ;
+// }
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 400;
+  src:
+    url("~@/assets/fonts/Inter-Regular.woff2") format("woff2"),
+    url("~@/assets/fonts/Inter-Regular.woff") format("woff"),
+  ;
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 400;
+  src:
+    url("~@/assets/fonts/Inter-Italic.woff2") format("woff2"),
+    url("~@/assets/fonts/Inter-Italic.woff") format("woff"),
+  ;
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 500;
+  src:
+    url("~@/assets/fonts/Inter-Medium.woff2") format("woff2"),
+    url("~@/assets/fonts/Inter-Medium.woff") format("woff"),
+  ;
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 500;
+  src:
+    url("~@/assets/fonts/Inter-MediumItalic.woff2") format("woff2"),
+    url("~@/assets/fonts/Inter-MediumItalic.woff") format("woff"),
+  ;
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 600;
+  src:
+    url("~@/assets/fonts/Inter-SemiBold.woff2") format("woff2"),
+    url("~@/assets/fonts/Inter-SemiBold.woff") format("woff"),
+  ;
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 600;
+  src:
+    url("~@/assets/fonts/Inter-SemiBoldItalic.woff2") format("woff2"),
+    url("~@/assets/fonts/Inter-SemiBoldItalic.woff") format("woff"),
+  ;
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 700;
+  src:
+    url("~@/assets/fonts/Inter-Bold.woff2") format("woff2"),
+    url("~@/assets/fonts/Inter-Bold.woff") format("woff"),
+  ;
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 700;
+  src:
+    url("~@/assets/fonts/Inter-BoldItalic.woff2") format("woff2"),
+    url("~@/assets/fonts/Inter-BoldItalic.woff") format("woff"),
+  ;
+}
+
+// @font-face {
+//   font-family: 'Inter';
+//   font-style:  normal;
+//   font-weight: 800;
+//  
+//   src: url("~@/assets/fonts/Inter-ExtraBold.woff2") format("woff2"),
+//   url("~@/assets/fonts/Inter-ExtraBold.woff") format("woff"),
+// ;
+// }
+// @font-face {
+//   font-family: 'Inter';
+//   font-style:  italic;
+//   font-weight: 800;
+//  
+//   src: url("~@/assets/fonts/Inter-ExtraBoldItalic.woff2") format("woff2"),
+//   url("~@/assets/fonts/Inter-ExtraBoldItalic.woff") format("woff"),
+// ;
+// }
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 900;
+ 
+  src: url("~@/assets/fonts/Inter-Black.woff2") format("woff2"),
+  url("~@/assets/fonts/Inter-Black.woff") format("woff"),
+;
+}
+// @font-face {
+//   font-family: 'Inter';
+//   font-style:  italic;
+//   font-weight: 900;
+//  
+//   src: url("~@/assets/fonts/Inter-BlackItalic.woff2") format("woff2"),
+//   url("~@/assets/fonts/Inter-BlackItalic.woff") format("woff"),
+// ;
+// }

docs/src/layouts/App/index.vue

@@ -2,20 +2,22 @@
   <div class="app">
     <header class="app__header">
       <div class="app__inner">
-        <strong>
-          <g-link to="/">{{ $static.metadata.siteName }}</g-link>
-        </strong>
+        <g-link class="app__logo" to="/">
+          {{ $static.metadata.siteName }}
+        </g-link>
       </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>
+            <ul>
+              <li v-for="edge in $static.allPost.edges" :key="edge.node.id">
+                <g-link class="app__link" :to="edge.node.path">
+                  {{ edge.node.title }}
+                </g-link>
+              </li>
+            </ul>
           </aside>
           <main class="app__main">
             <slot/>
@@ -43,5 +45,6 @@ query {
 }
 </static-query>
 
+<style lang="scss" src="./fonts.scss"></style>
 <style lang="scss" src="./base.scss" />
 <style lang="scss" src="./style.scss" scoped />

docs/src/layouts/App/style.scss

@@ -3,6 +3,27 @@
   flex-direction: column;
   min-height: 100%;
 
+  &__logo {
+    font-weight: 700;
+    font-size: 1.4rem;
+  }
+
+  &__link {
+    display: block;
+    padding: 0.1rem 0.5rem;
+    border-radius: 5px;
+    font-weight: 500;
+    color: rgba($colorBlack, 0.7);
+    margin-bottom: 0.2rem;
+    margin-left: -0.5rem;
+
+    &.active,
+    &:hover {
+      color: $colorBlack;
+      background-color: rgba($colorBlack, 0.05);
+    }
+  }
+
   &__header {
     flex: 0 0 auto;
     padding: 2rem 0;
@@ -19,6 +40,7 @@
   &__sidebar {
     flex: 0 0 auto;
     width: 18rem;
+    padding-right: 3rem;
   }
 
   &__main {
@@ -29,6 +51,6 @@
   &__inner {
     max-width: 62rem;
     margin: 0 auto;
-    padding: 0 1rem;
+    padding: 0 2rem;
   }
 }