WIP site layout changes

bismuthsoft · Jul 26, 2022 · 3ba21a4 · 3ba21a4
1 parent 3a9d0db
commit 3ba21a4
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 8 deletions.
diff --git a/src/lib/ControlPanel.svelte → src/lib/App.svelte b/src/lib/ControlPanel.svelte → src/lib/App.svelte
@@ -26,5 +26,18 @@
  }
 </script>
 
-<InstrumentPanel bind:params="{instrument}"/>
-<Piano on:noteUp="{noteUp}" on:noteDown="{noteDown}"/>
+<div class="container">
+    <InstrumentPanel bind:params="{instrument}"/>
+    <Piano on:noteUp="{noteUp}" on:noteDown="{noteDown}"/>
+</div>
+
+<style>
+ .container {
+     display: flex;
+     flex-direction: column;
+     height: 100vh;
+     width: 100vw;
+     align-items: center;
+     justify-content: space-between;
+ }
+</style>
diff --git a/src/lib/piano/Piano.svelte b/src/lib/piano/Piano.svelte
@@ -87,6 +87,11 @@
     on:keyup="{(ev) => handleKey(ev, false)}"
 />
 
+<div id="controlPanel">
+    <button on:click={scaleUp}>+</button>
+    <button on:click={scaleDown}>-</button>
+</div>
+
 <div id="piano" bind:clientWidth="{elemWidth}">
     {#each generateKeys(numKeys) as {isWhite, row, column}, index}
         <div
@@ -108,10 +113,6 @@
         </div>
     {/each}
 </div>
-<div id="controlPanel">
-    <button on:click={scaleUp}>+</button>
-    <button on:click={scaleDown}>-</button>
-</div>
 
 <style>
  .whiteKey {
@@ -161,5 +162,6 @@
      grid-template-rows: 60px 50px;
      grid-auto-flow: row;
      display: grid;
+     width: 100%;
  }
 </style>
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
@@ -0,0 +1,8 @@
+<slot></slot>
+
+<style>
+ :global(body) {
+     margin: 0;
+     font-family: sans-serif;
+ }
+</style>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
@@ -1,5 +1,5 @@
 <script>
-	import ControlPanel from "$lib/ControlPanel.svelte"
+	import App from "$lib/App.svelte"
 </script>
 
-<ControlPanel />
+<App />