doc: improve navigation links

Author: HerringtonDarkholme

website/.vitepress/config.ts

@@ -34,8 +34,24 @@ export default defineConfig({
     logo: 'logo.svg',
     nav: [
       { text: 'Guide', link: '/guide/introduction.html' },
-      { text: 'Reference', link: '/reference/cli.html' },
-      { text: 'Examples', link: '/catalog/' },
+      {
+        text: 'Reference',
+        items: [
+          { text: 'Command Line Interface', link: '/reference/cli.html' },
+          { text: 'Rule Config', link: '/reference/yaml.html' },
+          { text: 'Rule Object', link: '/reference/rule.html' },
+          { text: 'Playground Manual', link: '/reference/playground.html' },
+        ]
+      },
+      {
+        text: 'Resources',
+        items: [
+          { text: 'FAQ', link: '/advanced/faq.html' },
+          { text: 'Rule Examples', link: '/catalog/' },
+          { text: 'Custom Language', link: '/advanced/custom-language.html' },
+          { text: 'Contributing', link: '/contributing/how-to.html' },
+        ],
+      },
       { text: 'Playground', link: '/playground.html' },
     ],
     socialLinks: [

website/src/style.css

@@ -130,7 +130,7 @@ h1 {
   line-height: 1.1;
 }
 
-button {
+.root button {
   border-radius: 8px;
   border: 1px solid transparent;
   padding: 0.6em 1.2em;
@@ -141,13 +141,13 @@ button {
   cursor: pointer;
   transition: border-color 0.25s;
 }
-button:hover {
+.root button:hover {
   border-color: var(--vp-button-alt-hover-border);
   color: var(--vp-button-alt-hover-text);
   background-color: var(--vp-button-alt-hover-bg);
 }
-button:focus,
-button:focus-visible {
+.root button:focus,
+.root button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }