add code input component

this involved some refactoring of styles

src/app.less

@@ -1,7 +1,11 @@
-@import 'vars.less';
+@import 'styles.less';
 
 @import (css) url('https://fonts.googleapis.com/css2?family=Rubik:wght@400..700&display=swap');
 
+html, body {
+  height: 100%;
+}
+
 body {
   font-family: @fonts-sans;
   margin: 0;

src/lib/components/code-input.svelte

@@ -0,0 +1,11 @@
+<textarea></textarea>
+
+<style lang="less">
+  textarea {
+    box-sizing: border-box;
+    height: .full-without-padding(@padding-lg-y) [];
+    margin: @padding-lg;
+    resize: none;
+    width: .full-without-padding(@padding-lg-x) [];
+  }
+</style>

src/lib/components/content.svelte

@@ -5,3 +5,9 @@
 </script>
 
 <div id={`pane-${pane}`} hidden={pane !== $navStore} role="tabpanel"><slot /></div>
+
+<style lang="less">
+  div {
+    height: 100%;
+  }
+</style>

src/routes/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import CodeInput from '$lib/components/code-input.svelte';
   import Content from '$lib/components/content.svelte';
   import Headline from '$lib/components/headline.svelte';
   import NavItem from '$lib/components/nav-item.svelte';
@@ -8,27 +9,41 @@
 <svelte:head>
   <title>resumarkdown</title>
 </svelte:head>
-<header>
-  <Headline>resumarkdown</Headline>
-  <NavTree>
-    <NavItem destination="content">content</NavItem>
-    <NavItem destination="style">style</NavItem>
-    <NavItem destination="preview">preview</NavItem>
-  </NavTree>
-</header>
-<main>
-  <Content pane="content">
-    <p>content</p>
-  </Content>
-  <Content pane="style">
-    <p>style</p>
-  </Content>
-  <Content pane="preview">
-    <p>preview</p>
-  </Content>
-</main>
+<div>
+  <header>
+    <Headline>resumarkdown</Headline>
+    <NavTree>
+      <NavItem destination="content">content</NavItem>
+      <NavItem destination="style">style</NavItem>
+      <NavItem destination="preview">preview</NavItem>
+    </NavTree>
+  </header>
+  <main>
+    <Content pane="content">
+      <CodeInput />
+    </Content>
+    <Content pane="style">
+      <CodeInput />
+    </Content>
+    <Content pane="preview">
+      <p>preview</p>
+    </Content>
+  </main>
+</div>
 
 <style lang="less">
+  div {
+    align-items: stretch;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    justify-content: start;
+  }
+
+  main {
+    flex-grow: 1;
+  }
+
   p {
     margin: 0;
     padding: @padding-md;

src/styles.less

@@ -0,0 +1,22 @@
+// colors
+@color-accent-dark: #a8c3b5;
+@color-accent-light: #558b6e;
+@color-danger: #d64933;
+@color-dark: #2e282a;
+@color-light: #fbfbfb;
+
+// fonts
+@fonts-sans: Rubik, Arial, sans-serif;
+
+// layout
+@padding-lg: @padding-lg-y @padding-lg-x;
+@padding-lg-x: 2em;
+@padding-lg-y: 1.5em;
+@padding-md: @padding-md-y @padding-md-x;
+@padding-md-x: 1em;
+@padding-md-y: 0.5em;
+
+// utils
+.full-without-padding(@padding) {
+  @result: calc(100% - @padding * 2);
+}

src/vars.less

@@ -1,12 +0,0 @@
-// colors
-@color-accent-dark: #a8c3b5;
-@color-accent-light: #558b6e;
-@color-danger: #d64933;
-@color-dark: #2e282a;
-@color-light: #fbfbfb;
-
-// fonts
-@fonts-sans: Rubik, Arial, sans-serif;
-
-// layout
-@padding-md: 0.5em 1em;

svelte.config.js

@@ -8,7 +8,7 @@ const config = {
   // for more information about preprocessors
   preprocess: sveltePreprocess({
     less: {
-      prependData: `@import 'src/vars.less';`,
+      prependData: `@import 'src/styles.less';`,
     },
   }),