two column layout for desktop

src/lib/components/content.svelte

@@ -2,12 +2,32 @@
   import { pane as navStore, type Pane } from '$lib/stores/nav';
 
   export let pane: Pane;
+
+  // don't show pane if we're not the current pane
+  let hidden: boolean;
+  $: hidden = pane !== $navStore;
+
+  // always show preview pane on a two column layout
+  let preview: boolean;
+  $: preview = pane === 'preview';
 </script>
 
-<div id={`pane-${pane}`} hidden={pane !== $navStore} role="tabpanel"><slot /></div>
+<div id={`pane-${pane}`} role="tabpanel" class:hidden class:preview><slot /></div>
 
 <style lang="less">
   div {
     height: 100%;
+
+    &.hidden {
+      display: none;
+    }
+
+    @media screen and (min-width: @sizes[lg]) {
+      flex-grow: 1;
+
+      &.preview {
+        display: unset !important;
+      }
+    }
   }
 </style>

src/routes/+page.svelte

@@ -66,5 +66,12 @@
 
   main {
     flex-grow: 1;
+
+    @media screen and (min-width: @sizes[lg]) {
+      align-items: start;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+    }
   }
 </style>