factor out top bar to __layout.svelte

web/pw-server/src/routes/__layout.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import "./style.css";
+</script>
+
+<div class="outer-container">
+  <div class="top-bar" />
+  <slot />
+</div>
+
+<style lang="scss">
+  @import "../lib/variables.scss";
+
+  .outer-container {
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .top-bar {
+    height: 40px;
+    background-color: $bg-color;
+    border-bottom: 1px solid;
+    flex-shrink: 0;
+  }
+</style>

web/pw-server/src/routes/index.svelte

@@ -2,7 +2,6 @@
   import Visualizer from "$lib/components/Visualizer.svelte";
   import EditorView from "$lib/components/EditorView.svelte";
   import { onMount } from "svelte";
-  import "./style.css";
 
   import { DateTime } from "luxon";
 
@@ -131,9 +130,7 @@
   }
 </script>
 
-<div class="outer-container">
+<div class="container">
-  <div class="top-bar" />
-  <div class="container">
   <div class="sidebar-left">
     <div
       class="editor-button sidebar-item"
@@ -182,25 +179,10 @@
       <SubmitPane {editSession} on:matchCreated={onMatchCreated} />
     {/if}
   </div>
-  </div>
 </div>
 
 <style lang="scss">
-  $bg-color: rgb(41, 41, 41);
+  @import "../lib/variables.scss";
-
-  .outer-container {
-    width: 100vw;
-    height: 100vh;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .top-bar {
-    height: 40px;
-    background-color: $bg-color;
-    border-bottom: 1px solid;
-    flex-shrink: 0;
-  }
 
   .container {
     display: flex;
@@ -266,10 +248,6 @@
     color: #ccc;
   }
 
-  .match-mapname {
-    padding: 0 0.5em;
-  }
-
   .match-opponent {
     padding: 0 0.5em;
   }