Add skeleton-sass and convert css files to scss.

Makefile

 # You can set these variables from the command line.
-BOWER 		?= node_modules/.bin/bower
-BUILDDIR     = ./docs
-PAPER        =
-PHANTOMJS	?= node_modules/.bin/phantomjs
-SPHINXBUILD  = ./bin/sphinx-build
-SPHINXOPTS   =
-POTOJSON	?= node_modules/.bin/po2json
+BOWER           ?= node_modules/.bin/bower
+BUILDDIR     	= ./docs
+PAPER        	=
+PHANTOMJS       ?= node_modules/.bin/phantomjs
+SPHINXBUILD  	?= ./bin/sphinx-build
+SPHINXOPTS   	=
+PO2JSON       	?= node_modules/.bin/po2json
+SASS 			?= sass 
 
 # Internal variables.
 ALLSPHINXOPTS   = -d $(BUILDDIR)/doctrees $(PAPEROPT_$(PAPER)) $(SPHINXOPTS) ./docs/source
@@ -42,7 +43,7 @@ po:
 merge: po
 
 po2json:
-	find ./locale -maxdepth 1 -mindepth 1 -type d -exec $(POTOJSON) -p -f jed -d converse {}/LC_MESSAGES/converse.po {}/LC_MESSAGES/converse.json \;
+	find ./locale -maxdepth 1 -mindepth 1 -type d -exec $(PO2JSON) -p -f jed -d converse {}/LC_MESSAGES/converse.po {}/LC_MESSAGES/converse.json \;
 
 ########################################################################
 ## Release management
@@ -88,8 +89,7 @@ dev: clean
 ## Builds
 
 css::
-	./node_modules/.bin/lessc less/styles.less > css/theme.css
-	./node_modules/.bin/lessc less/converse.less > css/converse.css
+	${SASS} sass/converse.scss > css/converse.css
 
 build::
 	./node_modules/.bin/grunt jst

bower.json

@@ -29,7 +29,8 @@
     "bootstrapJS": "https://raw.githubusercontent.com/jcbrand/bootstrap/7d96a5f60d26c67b5348b270a775518b96a702c8/dist/js/bootstrap.js",
     "fontawesome": "~4.1.0",
     "typeahead.js": "https://raw.githubusercontent.com/jcbrand/typeahead.js/eedfb10505dd3a20123d1fafc07c1352d83f0ab3/dist/typeahead.jquery.js",
-    "strophejs-plugins": "https://github.com/strophe/strophejs-plugins.git#conversejs"
+    "strophejs-plugins": "https://github.com/strophe/strophejs-plugins.git#conversejs",
+    "skeleton-sass": "~2.0.3"
   },
   "exportsOverride": {}
 }

css/theme.css

@@ -3,7 +3,7 @@ body {
   height: 100%;
   font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif;
   color: #ffffff;
-  background-color: #000000;
+  background-color: #211018;
 }
 html {
   width: 100%;
@@ -34,7 +34,7 @@ p {
   }
 }
 a {
-  color: #66ccff;
+  color: #82B397;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
@@ -52,7 +52,7 @@ a:focus {
   border-bottom: 1px solid rgba(255, 255, 255, 0.3);
   text-transform: uppercase;
   font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  background-color: #000000;
+  background-color: #211018;
 }
 .navbar-brand {
   font-weight: 700;
@@ -95,7 +95,7 @@ a:focus {
   }
   .top-nav-collapse {
     padding: 0;
-    background-color: #000000;
+    background-color: #211018;
   }
   .navbar-custom.top-nav-collapse {
     border-bottom: 1px solid rgba(255, 255, 255, 0.3);
@@ -113,17 +113,17 @@ a:focus {
 }
 .intro {
   background: url(images/header.jpg) no-repeat bottom center scroll;
-  background-color: #000;
+  background-color: #211018;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
   -o-background-size: cover;
 }
 .features-section {
-  background: url('images/bgtr.svg') top right no-repeat, url('images/bgbl.svg') bottom left no-repeat, url('images/bgbl.svg') bottom left no-repeat, url('images/overlay.png'), linear-gradient(45deg, #b39c68, #a56365, #412e4c);
+  background: url('images/bgtr.svg') top right no-repeat, url('images/bgbl.svg') bottom left no-repeat, url('images/bgbl.svg') bottom left no-repeat, url('images/overlay.png'), linear-gradient(45deg, #85505f, #384955, #655361);
 }
 .features-section a {
-  color: #66ccff;
+  color: #82B397;
 }
 .outro {
   background: url('images/bgtr.svg') top right no-repeat, url('images/bgbl.svg') bottom left no-repeat, url('images/overlay.png'), linear-gradient(45deg, #384955, #655361, #85505f);
@@ -186,6 +186,7 @@ a:focus {
   -webkit-animation-timing-function: linear;
   -moz-animation-timing-function: linear;
 }
+/*
 @-webkit-keyframes pulse {
   0 {
     -webkit-transform: scale(1);
@@ -214,6 +215,7 @@ a:focus {
     transform: scale(1);
   }
 }
+*/
 .content-section {
   padding-top: 100px;
 }
@@ -221,7 +223,7 @@ a:focus {
   width: 100%;
   padding: 50px 0;
   color: #ffffff;
-  background-color: #000000;
+  background-color: #211018;
 }
 .donate-section p.bitcoin-header {
   margin: 0 0 5px;
@@ -244,16 +246,16 @@ a:focus {
   transition: all 0.3s ease-in-out;
 }
 .btn-default {
-  border: 1px solid #66ccff;
-  color: #66ccff;
+  border: 1px solid #82B397;
+  color: #82B397;
   background-color: transparent;
 }
 .btn-default:hover,
 .btn-default:focus {
-  border: 1px solid #66ccff;
+  border: 1px solid #82B397;
   outline: none;
-  color: #000000;
-  background-color: #66ccff;
+  color: #211018;
+  background-color: #82B397;
 }
 .btn-huge {
   padding: 25px;