From 6daaa4fc871a30fe3a94f814ba0ee790a11228d0 Mon Sep 17 00:00:00 2001
From: Laksito Pamilih <laksito@protonmail.com>
Date: Mon, 30 Aug 2021 11:04:05 +0700
Subject: [PATCH] update styling

---
 package.json |  1 +
 src/App.vue  | 21 +++++++++++++++++----
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 987f0f9..b723a3a 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
+    "predeploy": "npm run build",
     "deploy": "gh-pages -d dist"
   },
   "dependencies": {
diff --git a/src/App.vue b/src/App.vue
index ed0dc8d..411e3be 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,9 @@
 <template>
   <div id="app">
     <h1>Aksara Latin ke Aksara Jawa (simplified)</h1>
-    <textarea :value="inputText" rows="8" cols="60" @input.prevent="handleInputChange"/>
+    <textarea id="input-text" :value="inputText" rows="5" @input.prevent="handleInputChange"/>
     <br />
-    <textarea :value="resultText" rows="8" cols="60" disabled/>
+    <textarea id="output-text" :value="outputText" rows="8" disabled/>
   </div>
 </template>
 
@@ -15,11 +15,11 @@ export default Vue.extend({
   name: 'App',
   data() {
     return {
-      inputText: ''
+      inputText: 'Saben umat manungsa lair kanthi hak-hak kang padha'
     }
   },
   computed: {
-    resultText(): string {
+    outputText(): string {
       return toJavaneseScript(this.inputText)
     }
   },
@@ -34,15 +34,28 @@ export default Vue.extend({
 </script>
 
 <style>
+* {
+  box-sizing: border-box;
+}
+
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
+  max-width: 1000px;
+  margin: 0 auto;
 }
 
 textarea {
   font-size: 2em;
+  width: 100%;
+  max-width: 800px;
+  resize: vertical;
+}
+
+#input-text {
+  font-size: 1.5em;
 }
 </style>