Use less for styles, add watch script for less files.

.gitignore

@@ -6,3 +6,4 @@ heroku_logs
 .env
 tmp
 .idea
+*.css

package.json

@@ -8,8 +8,10 @@
   "main": "index.js",
   "scripts": {
     "start": "node server/server.js",
-    "start:watch": "nodemon --exec 'npm start'",
-    "test": "elm-test"
+    "start:watch": "nodemon --watch server --exec 'npm start'",
+    "test": "elm-test",
+    "bundle:css": "lessc styles/main.less server/static/styles/main.css",
+    "watch:less": "chokidar --initial 'styles' -c 'yarn bundle:css'"
   },
   "repository": {
     "type": "git",
@@ -32,6 +34,8 @@
     "superagent-promise": "^1.1.0"
   },
   "devDependencies": {
-    "elm-test": "^0.18.2"
+    "chokidar-cli": "^1.2.0",
+    "elm-test": "^0.18.2",
+    "less": "^2.7.2"
   }
 }

styles/main.less

@@ -0,0 +1,102 @@
+body {
+  font-family: "Roboto";
+}
+
+.main {
+  margin-left: auto;
+  margin-right: auto;
+  width: 30em;
+  margin-top: 5em;
+}
+
+.header {
+
+  font-size: 1.4em;
+  margin-bottom: 1em;
+  padding-left: 0.4em;
+}
+
+.kiky {
+  margin-bottom: 1em;
+  padding-left: 0.4em;
+}
+
+.navigation {
+  padding-left: 0.2em;
+}
+
+.float-left {
+  float: left;
+}
+
+.calendar {
+  clear: left;
+}
+
+.nav-button {
+  font-size: 1.6em;
+}
+
+.calendar-button {
+  font-size: 1.2em;
+}
+
+.close-button {
+  font-size: 1.2em;
+}
+
+button {
+  border-style: none;
+  border-radius: 4px;
+  margin-right: 6px;
+  outline: none;
+  background-color: #FFCA28;
+}
+
+button:hover {
+  background-color: #B7CA56;
+}
+
+table {
+  border-spacing: 0.2em;
+}
+
+td {
+  border-radius: 4px;
+  padding-top: 0.3em;
+  padding-right: 1em;
+  padding-bottom: 1em;
+  padding-left: 0.3em;
+  background-color: #DAE7E4;
+}
+
+.hours {
+  padding-top: 0.2em;
+  font-size: 1.2em;
+  height: 1.2em;
+}
+
+td.day-off {
+  background-color: #B7CA56;
+}
+
+td.other-month {
+  color: gray;
+}
+
+.spinner {
+  font-size: 1.6em;
+}
+
+.header .name {
+  margin-right: 0.5em;
+}
+
+.balance-input {
+  padding: 0.5em;
+  margin-bottom: 2em;
+}
+
+.monthly-balance {
+  padding-right: 1em;
+}