Add a styleguide stylesheet and setup SASS

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+.DS_Store

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

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;
+}

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;

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; }

css/fast.scss

@@ -0,0 +1 @@
+@import 'common';

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']);

html/banners.html

@@ -7,38 +7,38 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="description" content="">
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
-    
+
     <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
     <script>
     $(document).ready(function(){
         $(window).bind('scroll',function(e){
             parallaxScroll();
         });
-     
+
         function parallaxScroll(){
             var scrolledY = $(window).scrollTop();
             $('.banner').css('background-position','center -'+((scrolledY*0.25))+'px');
         }
 
-        $('.arrow').click(function(){    
+        $('.arrow').click(function(){
             $(this).parents(".banner").toggleClass('expand');
-            $(this).parents(".container").toggleClass('expand'); 
-            $(this).parent().next(".hide").toggleClass('excerpt');   
+            $(this).parents(".container").toggleClass('expand');
+            $(this).parent().next(".hide").toggleClass('excerpt');
         });
-     
+
     });
     </script>
 
     <link href="http://db.onlinewebfonts.com/c/0dabf6820744e4ed41f7ce1dd8a9e502?family=SackersGothicW01-Light" rel="stylesheet" type="text/css"/>
     <link href="http://db.onlinewebfonts.com/c/65bc711a745ac850f48c5e33d3e3e58c?family=DidotW01-Roman" rel="stylesheet" type="text/css"/>
     <link href='https://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'>
 
-    <link type="text/css" rel="stylesheet" href="../css/style.css"/>
+    <link type="text/css" rel="stylesheet" href="../css/banners.css"/>
 
   </head>
 
   <body>
-    
+
     <div class="banner one">
       <div class="container">
         <div class="header">
@@ -98,6 +98,6 @@
     </div>
     <div class="empty-space">
     </div>
-    
+
   </body>
 </html>

html/base.html

@@ -0,0 +1,8 @@
+<html>
+<head>
+  <title>Kevin Lee</title>
+  <link rel='stylesheet' href='../css/compiled/fast.css'>
+</head>
+<body>
+</body>
+</html>

html/blog.html

@@ -26,16 +26,15 @@ <h3 class="blog-description">March 16th 2014</h3>
 				</div>
 
 			</div>
-			
+
 			<div class="sidebar-container pure-u-1-6">
 				<h2>Instagram</h2>
 				<iframe src="http://snapwidget.com/in/?u=ZmFzdGNhbHxpbnwxMjV8M3wzfHxub3w1fG5vbmV8b25TdGFydHx5ZXN8bm8=&ve=090316" title="Instagram Widget" class="snapwidget-widget" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:250px; height:390px"></iframe>
-				
+
 				<h2>Twitter</h2>
 				<a class="twitter-grid" href="https://twitter.com/TwitterDev/timelines/539487832448843776">National Park Tweets</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
 			</div>
 		</div>
 	</body>
 
 </html>
-

html/landing-page.html

@@ -11,7 +11,7 @@
 <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
 <link rel="stylesheet" href="../css/style-landing.css">
-  
+
 </head>
 <body>
 

html/sponsor.html

@@ -3,8 +3,8 @@
   <link rel = 'stylesheet' href = 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
   <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
   <link rel = 'stylesheet' href = '../css/sponsor.css'>
-  <link rel="icon" 
-        type="image/png" 
+  <link rel="icon"
+        type="image/png"
         href="http://www.oystermag.com/sites/default/files/imagecache/article-image-650x580/images/kanye_head_photo.png">
 </head>
 <body>
@@ -31,7 +31,7 @@ <h2>We Be Chicken</h2>
       </p>
     </div>
     <div class = 'col-md-4'>
-      <img src = 'http://fastcal.net/wp-content/uploads/2014/06/slide1-1080x410.jpg' class = 'r-img'> 
+      <img src = 'http://fastcal.net/wp-content/uploads/2014/06/slide1-1080x410.jpg' class = 'r-img'>
       <img src = 'http://fastcal.net/wp-content/uploads/2014/12/lucy-19549361f959fe9-1080x410.jpg' class = 'r-img'>
     </div>
     <div class = 'col-md-2'></div>

package.json

@@ -0,0 +1,26 @@
+{
+  "name": "FAST",
+  "version": "1.0.0",
+  "description": "project",
+  "main": "gulpfile.js",
+  "dependencies": {},
+  "devDependencies": {
+    "babel-core": "^5.8.29",
+    "browser-sync": "^2.9.11",
+    "gulp": "^3.9.0",
+    "gulp-sass": "^2.0.4"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/InnoDWebDevTier/FAST.git"
+  },
+  "author": "Innovative Design",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/InnoDWebDevTier/FAST/issues"
+  },
+  "homepage": "https://github.com/InnoDWebDevTier/FAST#readme"
+}