update

public/css/template.css

@@ -8,7 +8,6 @@ html, body {
     padding:0px;
     margin:0px;
     background-color: #1D1F21;
-    overflow: hidden;
 }
 
 * {
@@ -52,7 +51,7 @@ button {
 
 #editor {
     background-color:transparent;
-    color:rgba(255, 255, 255, 0.5);
+    color:rgba(255, 255, 255, 0.0);
     z-index: 100;
 }
 
@@ -107,7 +106,7 @@ button {
     color:#fff;
     margin: 0;
     padding: 0;
-    z-index: 5;
+    z-index: 500;
 }
 
 #linepadder {
@@ -144,7 +143,7 @@ button {
     left:25%;
     width:50%;
     height: 40%;
-    z-index: 20;
+    z-index: 200;
     color:#fff;
     text-align: center;
 }
@@ -157,4 +156,4 @@ button {
 
 .hide {
     display: none;
-}
+}

public/js/interaction.js

@@ -11,6 +11,13 @@ $(document).ready(function() {
         }
     });
 
+    $("#editor").on('keydown', function() {
+        update_caret();
+    })
+    .on('click', function() {
+        update_caret();
+    });
+
     $("#editor").bind('input propertychange', function() {
         var decoded = $("#editor").val();
 
@@ -71,8 +78,8 @@ $(document).ready(function() {
         var content_offset = $("#content").offset();
 
         $("#caret").css({
-            left: (14 / 2) + content_offset.left + (caret_col * 14) + "px",
-            top: (14 / 2) + ln_offset.top + "px"
+            left: (14) + content_offset.left + 8 + (caret_col * 8) + "px",
+            top: (ln_offset.top - 2) + "px"
         });
 
     }