Update theme-sidebar.md, theme-introduction.md and vp-doc.css

docs/guide/theme-introduction.md

@@ -144,6 +144,37 @@ export default DefaultTheme
 
 See [default theme CSS variables](https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css) that can be overridden.
 
+### Customizing Fonts
+
+You can override default font by adding any other (Open Sans, for example) from Google Fonts library.
+
+```js
+/* .vitepress/config.js */
+export default {
+    // These are app level configs.
+    lang: 'en-US',
+    title: 'Vitepress',
+
+    head: [
+      ['link',
+        { rel: 'stylesheet',
+        href: 'https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap'
+        }
+      ],
+    ],
+```
+
+
+```css
+/* .vitepress/theme/custom.css */
+:root {
+    --vp-font-family-base: 'Open Sans';
+```
+
+:::tip
+For both Regular and Italic only 400, 500, 600, 700 styles are used.
+:::
+
 ### Layout Slots
 
 The default theme's `<Layout/>` component has a few slots that can be used to inject content at certain locations of the page. Here's an example of injecting a component into the before outline:

docs/guide/theme-sidebar.md

@@ -161,3 +161,65 @@ export default {
   }
 }
 ```
+
+## Multi-level Sidebar
+
+You can also create multi-level sidebars. For example:
+
+```
+.
+├─ guide/
+│  ├─ index
+│  ├─ one
+│  │  ├─ one-one
+│  │  └─ one-two
+│  └─ two
+└─ config/
+   ├─ index
+   ├─ three
+   └─ four
+```
+
+Then, update your configuration to define your sidebar for each section and subsection.
+
+```js
+export default {
+  themeConfig: {
+    sidebar: {
+      // This sidebar gets displayed when user is
+      // under `guide` directory.
+      '/guide/': [
+        {
+          text: 'Guide',
+          items: [
+            // This shows `/guide/index.md` page.
+            { text: 'Index', link: '/guide/' }, // /guide/index.md
+            { text: 'One', link: '/guide/one' }, // /guide/one.md
+             {
+              items: [
+               { text: 'One One', link: '/guide/one-one/' }, // /guide/one-one.md
+               { text: 'One Two', link: '/guide/one-two/' }, // /guide/one-two.md
+                     ]
+             },
+            { text: 'Two', link: '/guide/two' } // /guide/two.md
+          ]
+        }
+      ],
+
+      // This sidebar gets displayed when user is
+      // under `config` directory.
+      '/config/': [
+        {
+          text: 'Config',
+          items: [
+            // This shows `/config/index.md` page.
+            { text: 'Index', link: '/config/' }, // /config/index.md
+            { text: 'Three', link: '/config/three' }, // /config/three.md
+            { text: 'Four', link: '/config/four' } // /config/four.md
+          ]
+        }
+      ]
+    }
+  }
+}
+```

src/client/theme-default/styles/components/vp-doc.css

@@ -115,14 +115,26 @@
 
 .vp-doc ul,
 .vp-doc ol {
-  padding-left: 1.25rem;
+  padding-left: 2.2rem;
   margin: 16px 0;
 }
 
+.vp-doc li {
+  padding-left: 10px;
+  }
+
 .vp-doc ul {
   list-style: disc;
 }
 
+.vp-doc ul ul {
+  list-style: circle;
+}
+
+.vp-doc ul ul ul {
+  list-style: square;
+}
+
 .vp-doc ol {
   list-style: decimal;
 }