2 files changed, 27 insertions, 12 deletions
diff --git a/public/main.css b/public/main.css
index a0f498e..7583bc0 100644
--- a/public/main.css
+++ b/public/main.css
@@ -3,6 +3,7 @@
   --color-blue: #0D0D51;
   --color-gray: #AAAAAA;
   --color-green: #58B058;
+  --color-red: #FF0B0B;
 
   --size-bee: 0.2rem;
   --size-mouse: 0.5rem;
@@ -33,6 +34,7 @@ body {
   max-width: 800px;
   margin: 0 auto;
   padding: var(--size-dog);
+  font-family: sans-serif;
 }
 
 header {
@@ -88,8 +90,6 @@ ol > li::before {
 }
 
 ul > li {
-  display: flex;
-  align-items: center;
   padding-left: var(--size-dog);
 }
 
@@ -129,10 +129,8 @@ ol > li.completed::before {
 input {
   background-color: transparent;
   font-size: inherit;
-  border: 1px solid var(--color-gray);
-  border-radius: var(--size-bee);
-  padding: var(--size-bee);
-  text-align: center;
-  width: var(--size-rhino);
-  margin-right: var(--size-mouse);
+  border: none;
+  padding: 0;
+  color: var(--color-red);
+  font-family: monospace;
 }
diff --git a/public/main.js b/public/main.js
index b79f2b6..80af905 100644
--- a/public/main.js
+++ b/public/main.js
@@ -13,6 +13,9 @@ window.onload = function() {
     const element = number.children[0]
     inputs.push({ element, value })
 
+    // Adjust width to content
+    adjustInputWidthToContent(element)
+
     element.addEventListener('input', function() {
 
       // Parse modified input value
@@ -29,6 +32,8 @@ window.onload = function() {
         inputs.forEach(function (input) {
           if (input.element !== currentInput.element) {
             input.element.value = formatNumber(factor, input.value)
+            adjustInputWidthToContent(element)
+            adjustInputWidthToContent(input.element)
           }
         })
       }
@@ -37,11 +42,13 @@ window.onload = function() {
 
   // Set up done marks for steps
 
-  document.querySelectorAll('ol > li').forEach(function (item) {
-    item.addEventListener('click', function() {
-      item.className = item.className ? '' : 'completed'
+  document.querySelectorAll('ol > li').forEach(item => {
+    item.addEventListener('click', event => {
+      if (event.target.tagName !== 'INPUT') {
+        item.className = item.className ? '' : 'completed'
+      }
     })
-  })
+})
 
 }
 
@@ -70,3 +77,13 @@ function precision(value) {
     return xs[1].length
   }
 }
+
+function adjustInputWidthToContent(element) {
+    if (element.value.length === 0) {
+        element.style['width'] = `1ch`
+        element.style['background-color'] = `red`
+    } else {
+        element.style['width'] = `${element.value.length}ch`
+        element.style['background-color'] = `transparent`
+    }
+}