From 2f2bac935153d1f785b3e45f1d10f257e8807414 Mon Sep 17 00:00:00 2001
From: Nicola Clark <nicola@slottedspoon.dev>
Date: Fri, 11 Oct 2024 22:16:42 -0500
Subject: [PATCH] add code input component

this involved some refactoring of styles
---
 src/app.less                         |  6 +++-
 src/lib/components/code-input.svelte | 11 ++++++
 src/lib/components/content.svelte    |  6 ++++
 src/routes/+page.svelte              | 53 ++++++++++++++++++----------
 src/styles.less                      | 22 ++++++++++++
 src/vars.less                        | 12 -------
 svelte.config.js                     |  2 +-
 7 files changed, 79 insertions(+), 33 deletions(-)
 create mode 100644 src/lib/components/code-input.svelte
 create mode 100644 src/styles.less
 delete mode 100644 src/vars.less

diff --git a/src/app.less b/src/app.less
index 57ac5f4..8e98884 100644
--- a/src/app.less
+++ b/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;
diff --git a/src/lib/components/code-input.svelte b/src/lib/components/code-input.svelte
new file mode 100644
index 0000000..9c01aaf
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/content.svelte b/src/lib/components/content.svelte
index 17809fb..5ef1b31 100644
--- a/src/lib/components/content.svelte
+++ b/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>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 2021186..3f4a764 100644
--- a/src/routes/+page.svelte
+++ b/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;
diff --git a/src/styles.less b/src/styles.less
new file mode 100644
index 0000000..4078e48
--- /dev/null
+++ b/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);
+}
diff --git a/src/vars.less b/src/vars.less
deleted file mode 100644
index f0d5bcb..0000000
--- a/src/vars.less
+++ /dev/null
@@ -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;
diff --git a/svelte.config.js b/svelte.config.js
index fc39a00..ff7d7a2 100644
--- a/svelte.config.js
+++ b/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';`,
     },
   }),
 
