From bd2992e16f7249f874b4ec3f872fc2f6d11ea293 Mon Sep 17 00:00:00 2001
From: PaddiM8 <paddim8@pm.me>
Date: Sat, 2 Jan 2021 02:20:23 +0100
Subject: [PATCH] Improved kalk_web style by removing the border and putting
 commands on the bottom

---
 kalk_web/public/global.css     | 10 ++++++++
 kalk_web/src/Calculator.svelte | 47 +++++++++++++++++++++++-----------
 2 files changed, 42 insertions(+), 15 deletions(-)

diff --git a/kalk_web/public/global.css b/kalk_web/public/global.css
index 0e1c006..2a811fe 100644
--- a/kalk_web/public/global.css
+++ b/kalk_web/public/global.css
@@ -1,7 +1,17 @@
+body {
+	margin: 0;
+	padding: 0;
+	background-color: #212121;
+}
+
 span.identifier {
 	color: cornflowerblue;
 }
 
 span.operator {
 	color: darkorange;
+}
+
+span.prompt {
+	color: mediumseagreen;
 }
\ No newline at end of file
diff --git a/kalk_web/src/Calculator.svelte b/kalk_web/src/Calculator.svelte
index c22ae36..140503a 100644
--- a/kalk_web/src/Calculator.svelte
+++ b/kalk_web/src/Calculator.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-    import { SvelteComponent } from "svelte";
-
     let outputLines: string[] = [];
     function handleKeyDown(event: KeyboardEvent) {
         if (event.key == "Enter") {
@@ -98,15 +96,19 @@
 
 <style>
     .calculator {
-        width: 400px;
-        height: 800px;
+        width: 600px;
+        height: 350px;
     }
 
-    .calculator .output {
+    .output {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
         width: 100%;
         height: 100%;
         background-color: #424242;
         padding: 10px;
+        padding-bottom: 0;
         box-sizing: border-box;
         font-size: 1.4em;
         font-family: "Hack", monospace, Consolas, sans-serif; /* TODO: import font */
@@ -115,16 +117,26 @@
 
     .consoleLine {
         margin-top: 0;
-        margin-bottom: 3px;
+        margin-bottom: 0;
     }
 
-    .calculator .input {
-        width: 100%;
+    .input-area {
         background-color: #424242;
-        border: 0;
-        border-top: 1px solid gray;
+        display: flex;
+        padding-left: 10px;
         font-size: 1.4em;
+        padding-bottom: 10px;
+    }
+
+    .prompt,
+    .input {
+        background-color: #424242;
         font-family: "Hack", monospace, Consolas, sans-serif; /* TODO: import font */
+    }
+
+    .input {
+        display: inline-block;
+        width: 100%;
         color: white;
     }
 </style>
@@ -133,13 +145,18 @@
     <div class="output">
         {#each outputLines as line}
             <p class="consoleLine">
+                <span class="prompt">&gt;&gt;</span>
                 {@html highlight(line)}
             </p>
         {/each}
     </div>
-    <div
-        contenteditable="true"
-        class="input"
-        on:keydown={handleKeyDown}
-        on:input={handleInput} />
+    <div class="input-area">
+        <span class="prompt">&gt;&gt;&nbsp;</span>
+        <div
+            contenteditable="true"
+            class="input"
+            on:keydown={handleKeyDown}
+            on:input={handleInput}
+            role="textbox" />
+    </div>
 </div>