site: add mobile support

site/src/routes/docs/+layout.svelte

@@ -40,6 +40,7 @@
     display: flex;
   }
   nav {
+    display: none;
     width: 300px;
     flex: none;
   }

site/src/routes/docs/[...path]/+page.svelte

@@ -20,14 +20,14 @@
 <style>
   .container {
     display: flex;
-    padding-left: 30px;
   }
   .content {
-    flex: 1;
-    max-width: 800px;
-    margin-left: calc(50vw - 400px - 300px);
+    padding: 0 15px;
+    width: 100vw;
+    word-break: break-word;
   }
   .toc {
+    display: none;
     flex: none;
   }
 </style>

site/src/routes/docs/[...path]/shiki.css

@@ -1,3 +1,29 @@
+@media (prefers-color-scheme: dark) {
+  .shiki,
+  .shiki span {
+    color: var(--shiki-dark) !important;
+    background-color: var(--shiki-dark-bg) !important;
+    /* Optional, if you also want font styles */
+    font-style: var(--shiki-dark-font-style) !important;
+    font-weight: var(--shiki-dark-font-weight) !important;
+    text-decoration: var(--shiki-dark-text-decoration) !important;
+  }
+}
+
+html.dark .shiki,
+html.dark .shiki span {
+  color: var(--shiki-dark) !important;
+  background-color: var(--shiki-dark-bg) !important;
+  /* Optional, if you also want font styles */
+  font-style: var(--shiki-dark-font-style) !important;
+  font-weight: var(--shiki-dark-font-weight) !important;
+  text-decoration: var(--shiki-dark-text-decoration) !important;
+}
+
+.shiki {
+  margin: 0 -15px;
+  padding: 15px;
+}
 .shiki code {
   display: block;
 }
@@ -7,18 +33,20 @@
 }
 
 /* line number */
-.shiki code {
-  counter-reset: step;
-  counter-increment: step 0;
-}
-.shiki .line::before {
-  content: counter(step);
-  counter-increment: step;
-  width: 1rem;
-  margin-right: 1.5rem;
-  display: inline-block;
-  text-align: right;
-  color: rgba(115, 138, 148, 0.4);
+@media (min-width: 800px) {
+  .shiki code {
+    counter-reset: step;
+    counter-increment: step 0;
+  }
+  .shiki .line::before {
+    content: counter(step);
+    counter-increment: step;
+    width: 1rem;
+    margin-right: 1em;
+    display: inline-block;
+    text-align: right;
+    color: rgba(115, 138, 148, 0.4);
+  }
 }
 
 /* indent guides */

site/src/routes/docs/reference/overview.md

@@ -1 +1,3 @@
-# Reference Overview
+---
+title: Reference Overview
+---

site/src/routes/docs/settings.ts

@@ -5,4 +5,17 @@ export const navLinks: NavLink[] = [
     label: "Getting Started",
     items: ["getting-started/add-machines"],
   },
+  {
+    label: "Reference",
+    items: [
+      {
+        label: "Overview",
+        slug: "reference/overview",
+      },
+      {
+        label: "Options",
+        items: ["reference/options/clan"],
+      },
+    ],
+  },
 ];

site/src/routes/docs/utils.ts

@@ -71,9 +71,9 @@ export async function normalizeNavLink(
 
   if (!("items" in navLink)) {
     if ("slug" in navLink) {
-      const article = articles[`/docs/${navLink.slug}`];
+      const article = articles[navLink.slug];
       if (!article) {
-        throw new Error(`Doc not found: ${navLink}`);
+        throw new Error(`Doc not found: ${navLink.slug}`);
       }
       return {
         label: navLink.label ?? (await article()).frontmatter.title,

site/src/routes/index.css

@@ -1,6 +1,16 @@
 @import "@fontsource-variable/geist";
 
+html {
+  box-sizing: border-box;
+}
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
 body {
   font-family: "Geist Variable";
   font-size: 16px;
+  margin: 0;
 }

site/vitePlugins/markdown.ts

@@ -38,8 +38,8 @@ export default function (): PluginOption {
         .use(remarkRehype)
         .use(rehypeShiki, {
           themes: {
-            light: "nord",
-            dark: "nord",
+            light: "catppuccin-latte",
+            dark: "catppuccin-macchiato",
           },
           transformers: [
             transformerNotationDiff({