Sassify the diff page

backend/static/styles/.gitignore

@@ -0,0 +1 @@
+node_modules

backend/static/styles/diff.css

@@ -1,66 +1,55 @@
-table {
+#diff-ui {
-	table-layout: fixed;
+  background: #fff;
-	width: 100%;
+  padding: 2em;
-}
+  margin: 1em;
-td {
+  border-radius: 5px;
-	width: 33%;
+  font-size: 9px; }
-	padding: 3px 4px;
+  #diff-ui table {
-	border: 1px solid transparent;
+    table-layout: fixed;
-	vertical-align: top;
+    width: 100%; }
-	font: 1em monospace;
+  #diff-ui td {
-	text-align: left;
+    padding: 3px 4px;
-	white-space: pre-wrap;
+    border: 1px solid transparent;
-}
+    vertical-align: top;
+    font: 1em monospace;
+    text-align: left;
+    white-space: pre-wrap; }
+
 h1 {
-	display: inline;
+  display: inline;
-	font-size: 100%;
+  font-size: 100%; }
-}
+
 del {
-	text-decoration: none;
+  text-decoration: none;
-	color: #b30000;
+  color: #b30000;
-	background: #fadad7;
+  background: #fadad7; }
-}
 
 ins {
-	background: #eaf2c2;
+  background: #eaf2c2;
-	color: #406619;
+  color: #406619;
-	text-decoration: none;
+  text-decoration: none; }
-}
 
 #result {
-	white-space: pre-wrap;
+  white-space: pre-wrap; }
-}
 
 #settings {
-    background: rgba(0,0,0,.05);
+  background: rgba(0, 0, 0, 0.05);
-        padding: 1em;
+  padding: 1em;
-    border-radius: 10px;
+  border-radius: 10px;
-    margin-bottom: 1em;
+  margin-bottom: 1em;
-    color: #fff;
+  color: #fff;
-    font-size: 80%;
+  font-size: 80%; }
-}
+  #settings label {
-#settings label {
+    margin-left: 1em;
-	margin-left: 1em;
+    display: inline-block;
-	display: inline-block;
+    font-weight: normal; }
-	font-weight: normal;
-}
 
 .source {
-	position: absolute;
+  position: absolute;
-	right: 1%;
+  right: 1%;
-	top: .2em;
+  top: .2em; }
-}
 
 @-moz-document url-prefix() {
-	body {
+  body {
-		height: 99%; /* Hide scroll bar in Firefox */
+    height: 99%;
-	}
+    /* Hide scroll bar in Firefox */ } }
-}
-
-#diff-ui {
-    background: #fff;
-    padding: 2em;
-    margin: 1em;
-    border-radius: 5px;
-    font-size: 9px;
-}

backend/static/styles/diff.scss

@@ -0,0 +1,67 @@
+#diff-ui {
+
+    background: #fff;
+    padding: 2em;
+    margin: 1em;
+    border-radius: 5px;
+    font-size: 9px;
+
+    table {
+        table-layout: fixed;
+        width: 100%;
+    }
+    td {
+        padding: 3px 4px;
+        border: 1px solid transparent;
+        vertical-align: top;
+        font: 1em monospace;
+        text-align: left;
+        white-space: pre-wrap;
+    }
+
+}
+h1 {
+	display: inline;
+	font-size: 100%;
+}
+del {
+	text-decoration: none;
+	color: #b30000;
+	background: #fadad7;
+}
+
+ins {
+	background: #eaf2c2;
+	color: #406619;
+	text-decoration: none;
+}
+
+#result {
+	white-space: pre-wrap;
+}
+
+#settings {
+    background: rgba(0,0,0,.05);
+    padding: 1em;
+    border-radius: 10px;
+    margin-bottom: 1em;
+    color: #fff;
+    font-size: 80%;
+    label {
+	    margin-left: 1em;
+	    display: inline-block;
+	    font-weight: normal;
+    }
+}
+
+.source {
+	position: absolute;
+	right: 1%;
+	top: .2em;
+}
+
+@-moz-document url-prefix() {
+	body {
+		height: 99%; /* Hide scroll bar in Firefox */
+	}
+}

backend/static/styles/package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "scss": "node-sass --watch styles.scss -o ."
+    "scss": "node-sass --watch *.scss -o ."
   },
   "author": "",
   "license": "ISC",