Gulp should also include the fonts, they are not done automatic in th… (#46)

* Gulp should also include the fonts, they are not done automatic in this way
Other solution would be using the npm of materialize correctly

* Add font and margin variables
Use better naming for primary color rather than the color name itsself (prevents confusion)

* use https rather than http for the google fonts

Author: maximgeerinck

css/main.scss

@@ -1,26 +1,26 @@
-@import url(//fonts.googleapis.com/css?family=Roboto:100,300,400);
+@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400);
 @import 'variables';
 @import '../node_modules/materialize-css/sass/materialize.scss';
 
 body {
-    background-color: $color-grey;
+    background-color: $color-primary;
     .wrapper {
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
 
         .title {
-            margin: 0 32px;
+            margin: $title-margin;
             text-align: center;
 
             &__text {
-                margin: .5em 0 .3em;
-                font-size: 15vmin;
-                font-weight: 100;
+                margin: $text-margin;
+                font-size: $title-font-size;
+                font-weight: $title-font-weight;
 
                 &__colour {
                     color: $color-red;
-                    font-weight: 300;
+                    font-weight: $title-colored-font-weight;
                 }
 
                 a {
@@ -30,7 +30,7 @@ body {
 
             .menu {
                 list-style-type: none;
-                margin: 8px 0;
+                margin: $menu-margin;
                 padding: 0;
                 overflow: hidden;
                 display: flex;
@@ -52,10 +52,10 @@ body {
     &__title {
         width: auto;
         display: inline;
-        font-weight: 300;
+        font-weight: $day-title-font-weight;
 
         &__bold {
-            font-weight: 500;
+            font-weight: $day-title-font-weight-bold;
         }
     }
 }
@@ -66,9 +66,9 @@ body {
     &__time {
         float: left;
         display: inline-block;
-        font-size: 1.5vh;
+        font-size:$event-time-font-size;
         width: 15%;
-        margin-right: 1em;
+        margin: $event-time-margin;
         max-width: 5em;
     }
 
@@ -85,11 +85,11 @@ body {
 }
 
 p {
-    font-weight: 300;
+    font-weight: $p-font-weight;
 }
 
 ul {
-    margin-bottom: 2vh;
+    margin: $ul-margin;
 }
 
 .collapsible-header {
@@ -110,7 +110,7 @@ ul {
     }
 
     .collapsible-body, .collapsible-header {
-        border-top: 1px solid $color-lightish-grey;
+        border-top: $collapsible-body-border;
     }
 }
 
@@ -126,7 +126,7 @@ ul {
 
         span {
             display: block;
-            font-size: 2em;
+            font-size: $countdown-font-size;
         }
     }
 }
@@ -143,10 +143,10 @@ ul {
 
 .collapsible.popout > li {
     background-color: $color-white;
-    margin: 0 16px;
+    margin: $popout-element-margin;
 
     &.active {
-        margin: 0 8px;
+        margin: $popout-element-margin-active;
     }
 }
 

css/variables.scss

@@ -5,6 +5,25 @@ $large-phone: 560px;
 // Colour variables
 $color-red: red;
 $color-black: black;
-$color-grey: #eee;
+$color-primary: #eee;
 $color-lightish-grey: #ddd;
 $color-white: white;
+
+
+$title-font-size: 15vmin;
+$title-font-weight: 100;
+$title-colored-font-weight: 300;
+$day-title-font-weight: 300;
+$day-title-font-weight-bold: 500;
+$event-time-font-size: 1.5vh;
+$p-font-weight: 300;
+$countdown-font-size: 2em;
+
+$title-margin: 0 32px;
+$text-margin: .5em 0 .3em;
+$menu-margin: 8px 0;
+$event-time-margin: 0 1em 0 0;
+$ul-margin: 0 0 2vh 0;
+$popout-element-margin: 0 16px;
+$popout-element-margin-active: 0 8px;
+$collapsible-body-border: 1px solid $color-lightish-grey;

gulpfile.js

@@ -7,7 +7,7 @@ var rename = require('gulp-rename');
 var connect = require('gulp-connect');
 var jsonSchema = require('gulp-json-schema');
 
-gulp.task('dev', ['compress', 'scss', 'webserver', 'validate'], function () {
+gulp.task('dev', ['compress', 'scss', 'fonts', 'webserver', 'validate'], function () {
     gulp.watch(['./css/*.scss', './js/*.js', './**/*.html'], ['scss', 'compress', 'html']);
 });
 
@@ -41,6 +41,12 @@ gulp.task('webserver', function() {
   });
 });
 
+
+gulp.task('fonts', function() {
+   return gulp.src('./node_modules/materialize-css/fonts/**')
+       .pipe(gulp.dest('dist/fonts'))
+});
+
 gulp.task('html', function() {
   gulp.src('./**/*.html')
     .pipe(connect.reload());
@@ -51,4 +57,4 @@ gulp.task('validate', () => {
     .pipe(jsonSchema('schema.json'));
 });
 
-gulp.task('default', ['compress', 'scss', 'validate']);
+gulp.task('default', ['compress', 'scss', 'fonts', 'validate']);