Added gulp workflow for sass

gulpfile.js

@@ -0,0 +1,21 @@
+const gulp = require('gulp');
+const sass = require('gulp-sass');
+const autoprefixer = require('gulp-autoprefixer');
+const cleanCSS = require('gulp-clean-css');
+const sourcemaps = require('gulp-sourcemaps');
+
+gulp.task('sass', function () {
+  return gulp.src('src/scss/*.scss')
+      .pipe(sourcemaps.init())
+      .pipe(sass())
+      .pipe(autoprefixer())
+      .pipe(cleanCSS())
+      .pipe(sourcemaps.write('.'))
+      .pipe(gulp.dest('webroot/css'));
+});
+
+gulp.task('default', ['sass']);
+
+gulp.task('watch', function () {
+  gulp.watch('scss/*.scss', ['sass']);
+});

package.json

@@ -10,5 +10,12 @@
   },
   "dependencies": {
     "http-server": "^0.11.1"
+  },
+  "devDependencies": {
+    "gulp": "^3.9.1",
+    "gulp-autoprefixer": "^6.0.0",
+    "gulp-clean-css": "^3.10.0",
+    "gulp-sass": "^4.0.1",
+    "gulp-sourcemaps": "^2.6.4"
   }
 }

src/scss/_fonts.scss

@@ -0,0 +1,39 @@
+@font-face {
+  font-family: 'Zemestro Std';
+  src: url('fonts/ZemestroStd.eot');
+  src: url('fonts/ZemestroStd.eot?#iefix') format('embedded-opentype'),
+  url('fonts/ZemestroStd.woff') format('woff'),
+  url('fonts/ZemestroStd.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Interstate';
+  src: url('fonts/Interstate Regular.eot');
+  src: url('fonts/Interstate Regular.eot?#iefix') format('embedded-opentype'),
+  url('fonts/Interstate Regular.woff') format('woff'),
+  url('fonts/Interstate Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Interstate Mono';
+  src: url('fonts/hinted-subset-InterstateMono.eot');
+  src: url('fonts/hinted-subset-InterstateMono.eot?#iefix') format('embedded-opentype'),
+  url('fonts/hinted-subset-InterstateMono.woff') format('woff'),
+  url('fonts/hinted-subset-InterstateMono.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Interstate';
+  src: url('fonts/hinted-subset-Interstate-Bold.eot');
+  src: url('fonts/hinted-subset-Interstate-Bold.eot?#iefix') format('embedded-opentype'),
+  url('fonts/hinted-subset-Interstate-Bold.woff') format('woff'),
+  url('fonts/Interstate Bold.ttf') format('truetype');
+  font-weight: bold;
+  font-style: normal;
+}

src/scss/_misc.scss

@@ -1,43 +1,3 @@
-@font-face {
-  font-family: 'Zemestro Std';
-  src: url('fonts/ZemestroStd.eot');
-  src: url('fonts/ZemestroStd.eot?#iefix') format('embedded-opentype'),
-  url('fonts/ZemestroStd.woff') format('woff'),
-  url('fonts/ZemestroStd.ttf') format('truetype');
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Interstate';
-  src: url('fonts/Interstate Regular.eot');
-  src: url('fonts/Interstate Regular.eot?#iefix') format('embedded-opentype'),
-  url('fonts/Interstate Regular.woff') format('woff'),
-  url('fonts/Interstate Regular.ttf') format('truetype');
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Interstate Mono';
-  src: url('fonts/hinted-subset-InterstateMono.eot');
-  src: url('fonts/hinted-subset-InterstateMono.eot?#iefix') format('embedded-opentype'),
-  url('fonts/hinted-subset-InterstateMono.woff') format('woff'),
-  url('fonts/hinted-subset-InterstateMono.ttf') format('truetype');
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Interstate';
-  src: url('fonts/hinted-subset-Interstate-Bold.eot');
-  src: url('fonts/hinted-subset-Interstate-Bold.eot?#iefix') format('embedded-opentype'),
-  url('fonts/hinted-subset-Interstate-Bold.woff') format('woff'),
-  url('fonts/Interstate Bold.ttf') format('truetype');
-  font-weight: bold;
-  font-style: normal;
-}
-
 html,
 body,
 div,

src/scss/_slides.scss

@@ -0,0 +1,81 @@
+/* Slide 1*/
+
+.city-info,
+.info-slide-content {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  top: 10%;
+  font-size: 110%;
+}
+.frost-pane {
+  color: #fff;
+  font-family:"Zemestro Std";
+  font-size: 32px;
+  text-shadow:#000 2px 2px 4px;
+  min-height: 100%;
+  background: rgba(18,75,238,0.7);
+  z-index: 388686;
+  flex:1;
+}
+.city-info .frost-pane:first-of-type {
+  width: 55%;
+  margin-right: 0.8%;
+}
+
+.city-info .frost-pane.left * {
+  position: absolute;
+  padding-top: 15px;
+  line-height: 220%;
+}
+
+.frost-pane .labels {
+  color: #d8c422;
+  left: 9%;
+}
+
+.city-info .frost-pane .data {
+  left: 35%;
+  text-align: right;
+}
+
+.city-info .frost-pane.right {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 30px;
+}
+
+.city-info .frost-pane .icon {
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center center;
+  width: 70%;
+  height: 40%;
+}
+.city-info .frost-pane .temp {
+  font-size: 76px;
+  margin-top: 20%;
+}
+
+.forecast .frost-pane {
+  padding-left: 9%;
+  padding-top: 2%;
+  padding: 2% 2% 1% 9%;
+}
+
+.frost-pane .title {
+  color: #d8c422;
+  font-size: 40px;
+}
+.frost-pane .content {
+  font-size: 50px;
+}
+
+.info-slide-content.forecast .frost-pane {
+  max-height: 500px;
+}
+.info-slide-content.forecast .content {
+  height: 400px;
+  max-height: 400px;
+}

src/scss/weatherscan.scss

@@ -0,0 +1,3 @@
+@import "fonts";
+@import "slides";
+@import "misc";

webroot/css/slides.css

@@ -1,82 +0,0 @@
-/* Slide 1*/
-
-.city-info,
-.info-slide-content {
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-	top: 10%;
-	font-size: 110%;
-}
-.frost-pane {
-	color: #fff;
-	font-family:"Zemestro Std";
-	font-size: 32px;
-	text-shadow:#000 2px 2px 4px;	
-    min-height: 100%;
-    background: rgba(18,75,238,0.7);
-    z-index: 388686;
-	flex:1;
-}
-.city-info .frost-pane:first-of-type {
-	width: 55%;
-    margin-right: 0.8%;
-}
-
-.city-info .frost-pane.left * {
-	position: absolute;
-	padding-top: 15px;
-    line-height: 220%;
-}
-
-.frost-pane .labels {
-    color: #d8c422;
-    left: 9%;
-}
-
-.city-info .frost-pane .data {
-    left: 35%;
-    text-align: right;	
-}
-
-.city-info .frost-pane.right {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-	padding-top: 30px;
-}
-
-.city-info .frost-pane .icon {
-    background-repeat: no-repeat;
-    background-size: contain;
-    background-position: center center;
-    width: 70%;
-    height: 40%;
-}
-.city-info .frost-pane .temp {
-    font-size: 76px;
-    margin-top: 20%;
-}
-
-.forecast .frost-pane {
-	padding-left: 9%;
-    padding-top: 2%;
-    padding: 2% 2% 1% 9%;		
-}
-
-.frost-pane .title {
-	color: #d8c422;
-    font-size: 40px;	
-}
-.frost-pane .content {
-	font-size: 50px;
-}
-
-.info-slide-content.forecast .frost-pane {
-	max-height: 500px;
-}
-.info-slide-content.forecast .content {
-	height: 400px;
-	max-height: 400px;
-}
-

webroot/index.html

@@ -9,8 +9,7 @@
   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>
 
   <link rel="stylesheet" href="js/leaflet/timedimension/leaflet.timedimension.control.min.css"/>
-  <link rel="stylesheet" href="css/style.css"/>
-  <link rel="stylesheet" href="css/slides.css"/>
+  <link rel="stylesheet" href="css/weatherscan.css"/>
 
 </head>