Merge pull request #90 from stencila/style-updates

New styling

.editorconfig

@@ -0,0 +1,32 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+[*]
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+indent_style = space
+indent_size = 4
+
+[*.js]
+indent_style = space
+indent_size = 4
+
+[*.yml]
+indent_style = space
+indent_size = 2
+
+[*.sass]
+indent_style = space
+indent_size = 4
+
+[*.html]
+indent_style = space
+indent_size = 4
+
+[*.{diff,md}]
+trim_trailing_whitespace = false

.gitmodules

@@ -0,0 +1,4 @@
+[submodule "style"]
+    path = style
+    url = https://github.com/stencila/style.git
+    branch = master

README.md

@@ -1,6 +1,12 @@
-## `stencila/website`: Stencila on the web
+# `stencila/website`: Stencila on the web
 
 Hello! This is the repository for Stencila's website at http://stenci.la.
 
 Did you spot a typo or another mistake? Do you have a suggestion for a better wording?
 Would you like to write a blog post for Stencila? Great! See [CONTRIBUTING.md](CONTRIBUTING.md).
+
+## Development Environment
+
+Once you have checked out this repo, make sure you init & update the sub-modules.
+
+`git submodule init; git submodule update`

gulpfile.js

@@ -17,9 +17,25 @@ const replaceExt = require('replace-ext')
 const through = require('through2')
 const yamlFront = require('yaml-front-matter')
 const accumulate = require('vinyl-accumulate')
+const sass = require('gulp-sass')
+const autoprefixer = require('gulp-autoprefixer')
+const moduleImporter = require('sass-module-importer')
 
 const root = path.join(__dirname, 'src')
 
+const autoprefixerOptions = {
+    remove: false
+}
+
+const sassOptions = {
+    errLogToConsole: true,
+    outputStyle: 'expanded',
+    sourceMap: true,
+    importer: moduleImporter()
+}
+
+sass.compiler = require('node-sass')
+
 function markdown2object (file, includeContent = true) {
   const md = file.contents.toString()
 
@@ -118,7 +134,8 @@ gulp.task('css', function () {
   gulp.src([
     './src/css/**',
     './node_modules/docsearch.js/dist/cdn/docsearch.min.css',
-    './node_modules/prismjs/themes/prism.css'
+    './node_modules/prismjs/themes/prism.css',
+    './style/css/**'
   ])
     .pipe(gulp.dest('./build/css'))
 })
@@ -132,10 +149,11 @@ gulp.task('webfonts', function () {
 
 gulp.task('js', function () {
   gulp.src([
-    './src/js/**',
     './node_modules/docsearch.js/dist/cdn/docsearch.min.js',
     './node_modules/prismjs/prism.js',
-    './node_modules/prismjs/components/prism-{bash,json,r,python,sql}.min.js'
+    './node_modules/waypoints/lib/noframework.waypoints.js',
+    './node_modules/prismjs/components/prism-{bash,json,r,python,sql}.min.js',
+    './src/js/**'
   ])
     .pipe(gulp.dest('./build/js'))
 })
@@ -208,11 +226,18 @@ gulp.task('community/events', function () {
 })
 
 
-
-
+gulp.task('sass', function() {
+    return gulp.src([
+            './src/sass/**/*.sass',
+            './style/sass/**/*.sass'
+        ])
+        .pipe(sass(sassOptions).on('error', sass.logError))
+        .pipe(autoprefixer())
+        .pipe(gulp.dest('./src/css'))
+})
 
 gulp.task('build', ['clean'], function () {
-  gulp.start(['css', 'js', 'webfonts', 'img', 'nunjucks', 'markdown', 'blog/index', 'community/events'])
+  gulp.start(['sass', 'css', 'js', 'webfonts', 'img', 'nunjucks', 'markdown', 'blog/index', 'community/events'])
 })
 
 gulp.task('connect', function () {
@@ -223,6 +248,9 @@ gulp.task('connect', function () {
 })
 
 gulp.task('watch', function () {
+  gulp.watch(['./style/css/**/*.css'], ['sass', 'css'])
+  gulp.watch(['./style/sass/**/*.sass'], ['sass', 'css'])
+  gulp.watch(['./src/sass/**/*.sass'], ['sass', 'css'])
   gulp.watch(['./src/css/*'], ['css'])
   gulp.watch(['./src/js/*'], ['js'])
   gulp.watch(['./src/webfonts/*'], ['webfonts'])