web: navigation & sidebar

web/src/routes/+layout.svelte

@@ -0,0 +1,41 @@
+<script>
+    import "@fontsource/ibm-plex-mono/400.css";
+    import "@fontsource/ibm-plex-mono/500.css";
+    import Sidebar from "../components/sidebar/Sidebar.svelte";
+</script>
+
+<div id="cobalt">
+    <Sidebar />
+    <div id="content">
+        <slot></slot>
+    </div>
+</div>
+
+<style>
+    :global(:root) {
+        --accent: #ffffff;
+        --background: #000000;
+        --sidebar-width: 80px;
+        --sidebar-font-size: 11px;
+        --sidebar-padding: 12px;
+    }
+    :global(html),
+    :global(body) {
+        font-family: "IBM Plex Mono", "Noto Sans Mono", monospace;
+        margin: 0;
+    }
+    :global(a) {
+        text-decoration: none;
+        text-decoration-line: none;
+    }
+    #cobalt {
+        height: 100vh;
+        display: grid;
+        grid-template-columns: var(--sidebar-width) 1fr;
+        overflow: hidden;
+    }
+    #content {
+        display: flex;
+        overflow: scroll;
+    }
+</style>

web/src/routes/+page.svelte

@@ -1 +1,2 @@
-<h1>hello world</h1>
+<!-- home (save) page -->
+<div>home</div>

web/src/routes/about/+page.svelte

@@ -0,0 +1,2 @@
+<!-- about page -->
+<div>about</div>

web/src/routes/convert/+page.svelte

@@ -0,0 +1,2 @@
+<!-- convert page -->
+<div>convert</div>

web/src/routes/crop/+page.svelte

@@ -0,0 +1,2 @@
+<!-- crop page -->
+<div>crop</div>

web/src/routes/donate/+page.svelte

@@ -0,0 +1,2 @@
+<!-- donate page -->
+<div>donate</div>

web/src/routes/settings/+page.svelte

@@ -0,0 +1,2 @@
+<!-- settings page -->
+<div>settings</div>

web/src/routes/trim/+page.svelte

@@ -0,0 +1,2 @@
+<!-- trim page -->
+<div>trim</div>

web/src/routes/updates/+page.svelte

@@ -0,0 +1,2 @@
+<!-- updates (changelog) page -->
+<div>updates</div>