diff --git a/.DS_Store b/.DS_Store deleted file mode 100644 index 61d050a..0000000 Binary files a/.DS_Store and /dev/null differ diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..fd4f2b0 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +node_modules +.DS_Store diff --git a/README.md b/README.md index 1e3e350..ae2af86 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,7 @@ FAST === +Install with `npm install`. Run `gulp` to compile SASS and host with livereloading. + Put html files in `html/` and stylesheets in `css/` ### How to keep your fork up to date diff --git a/css/_common.scss b/css/_common.scss new file mode 100644 index 0000000..d718a9c --- /dev/null +++ b/css/_common.scss @@ -0,0 +1,23 @@ +@import 'styleguide'; + +/* structural stuff */ +body, html { + margin: 0; + height: 100%; + width: 100%; + + color: $offblack; + font-family: $font-body; + background-color: $offwhite; + + font-size: $base-unit; +} + +/* Adjustments to tag defaults */ +::selection { + background-color: $yellow; +} + +p { + line-height: 1.5; +} diff --git a/css/_styleguide.scss b/css/_styleguide.scss new file mode 100644 index 0000000..62d9f43 --- /dev/null +++ b/css/_styleguide.scss @@ -0,0 +1,14 @@ +$font-body : 'Lato', sans-serif; +$font-heading : 'Montserrat', sans-serif; +$offwhite : #fEfDf8; +$offblack : #454545; +$lightgrey : #ddd; +$grey : #888; +$darkgrey : #333; +$yellow : #FFDE00; +$fast : 0.3s; +$slow : 0.6s; +$extraslow : 1.2s; + +/* use n*$base-unit for all font-sizing, (vertical) spacing */ +$base-unit : 24px; diff --git a/css/style.css b/css/banners.css similarity index 100% rename from css/style.css rename to css/banners.css diff --git a/css/compiled/fast.css b/css/compiled/fast.css new file mode 100644 index 0000000..e5a9ec1 --- /dev/null +++ b/css/compiled/fast.css @@ -0,0 +1,17 @@ +/* use n*$base-unit for all font-sizing, (vertical) spacing */ +/* structural stuff */ +body, html { + margin: 0; + height: 100%; + width: 100%; + color: #454545; + font-family: "Lato", sans-serif; + background-color: #fEfDf8; + font-size: 24px; } + +/* Adjustments to tag defaults */ +::selection { + background-color: #FFDE00; } + +p { + line-height: 1.5; } diff --git a/css/fast.scss b/css/fast.scss new file mode 100644 index 0000000..313d6a1 --- /dev/null +++ b/css/fast.scss @@ -0,0 +1 @@ +@import 'common'; diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..af3eafe --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,33 @@ +var gulp = require('gulp'); +var browserSync = require('browser-sync').create(); +var sass = require('gulp-sass'); + +gulp.task('sass', _ => { + return gulp.src('./css/**/*.scss') + .pipe(sass().on('error', sass.logError)) + .pipe(gulp.dest('./css/compiled')) + .pipe(browserSync.stream()); +}); + +gulp.task('serve', ['sass'], _ => { + browserSync.init({ + server: { + baseDir: "./" + // middleware: [ + // function (req, res, next) { + // res.setHeader('cache-control', 'max-age=600'); + // next(); + // } + // ] + } + }); + + gulp.watch("./css/**/*.scss", ['sass']); + gulp.watch("./*.html").on('change', browserSync.reload); +}); + +gulp.task('watch', _ => { + gulp.watch(['./css/**/*.scss'], ['sass']); +}); + +gulp.task('default', ['serve']); diff --git a/html/.DS_Store b/html/.DS_Store deleted file mode 100644 index 5008ddf..0000000 Binary files a/html/.DS_Store and /dev/null differ diff --git a/html/banners.html b/html/banners.html index 71155c1..e76cc75 100644 --- a/html/banners.html +++ b/html/banners.html @@ -7,25 +7,25 @@ - + @@ -33,12 +33,12 @@ - +
- +