add font awesome icons

bower.json

@@ -13,5 +13,6 @@
     "tests"
   ],
   "dependencies": {
+    "font-awesome": "~4.2.0"
   }
 }

gulpfile.coffee

@@ -1,10 +1,13 @@
 browserify = require 'browserify'
 chalk      = require 'chalk'
+concat     = require 'gulp-concat'
 CSSmin     = require 'gulp-minify-css'
 ecstatic   = require 'ecstatic'
+es         = require 'event-stream'
 gulp       = require 'gulp'
 gutil      = require 'gulp-util'
 jade       = require 'gulp-jade'
+less       = require 'gulp-less'
 livereload = require 'gulp-livereload'
 path       = require 'path'
 prefix     = require 'gulp-autoprefixer'
@@ -27,11 +30,13 @@ config =
     watch: './src/jade/*.jade'
     destination: './public/'
   styles:
-    source: './src/stylus/style.styl'
-    watch: './src/stylus/*.styl'
+    source: './src/styles/style.styl'
+    icons: './src/styles/icons.less'
+    filename: 'style.css'
+    watch: './src/styles/*.*'
     destination: './public/css/'
   assets:
-    source: './src/assets/**/*.*'
+    source: ['./src/assets/**/*.*', './bower_components/font-awesome/fonts*/*.*']
     watch: './src/assets/**/*.*'
     destination: './public/'
 
@@ -68,11 +73,17 @@ gulp.task 'templates', ->
   pipeline
 
 gulp.task 'styles', ->
+
   styles = gulp
     .src config.styles.source
     .pipe stylus
       'include css': true
 
+  icons = gulp.src(config.styles.icons)
+    .pipe less()
+
+  styles = es.merge(styles, icons)
+    .pipe concat config.styles.filename
     .on 'error', handleError
     .pipe prefix 'last 2 versions', 'Chrome 34', 'Firefox 28', 'iOS 7'
 

package.json

@@ -29,9 +29,12 @@
     "deamdify": "^0.1.1",
     "debowerify": "~0.9.1",
     "ecstatic": "~0.5.3",
+    "event-stream": "^3.2.1",
     "gulp": "~3.8.1",
     "gulp-autoprefixer": "1.0.1",
+    "gulp-concat": "^2.4.3",
     "gulp-jade": "~0.9.0",
+    "gulp-less": "^2.0.1",
     "gulp-livereload": "~2.1.0",
     "gulp-minify-css": "~0.3.5",
     "gulp-streamify": "0.0.5",

src/jade/index.jade

@@ -21,7 +21,12 @@ html
             h3 Liity mukaan
 
       .footer
-        a(href='https://koodiklinikka.slack.com') koodiklinikka.slack.com
+
+        a(href='https://koodiklinikka.slack.com')
+          i.fa.fa-slack
+
+        a(href='https://github.com/koodiklinikka/koodiklinikka.fi')
+          i.fa.fa-github
 
       a(href='https://github.com/koodiklinikka/koodiklinikka.fi')
         img(style='position: absolute; top: 0; right: 0; border: 0;', src='https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67', alt='Fork me on GitHub', data-canonical-src='https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png')

src/js/components/inviteForm.js

@@ -22,7 +22,7 @@ function render(props, state) {
         className={inputClasses}
         type='text'
         name='email'
-        placeholder='email'
+        placeholder='Email'
         value={state.email}
         onkeydown={props.onChange} />
       <button

src/styles/icons.less

@@ -0,0 +1,6 @@
+@import '../../bower_components/font-awesome/less/variables.less';
+@import '../../bower_components/font-awesome/less/path.less';
+@import '../../bower_components/font-awesome/less/core.less';
+
+.@{fa-css-prefix}-github:before { content: @fa-var-github; }
+.@{fa-css-prefix}-slack:before { content: @fa-var-slack; }

src/styles/style.styl

@@ -105,23 +105,12 @@ a
   &:hover
     text-decoration underline
 
-#logo
-  width 80px
-  height 80px
-  background url('../images/logo-js.png')
-  background-size 100% 100%
-  border 5px solid #fff
-  border-radius 50%
-  margin auto
-  position absolute
-  top 1.5em
-  left 1.5em
-  box-shadow 1px 1px 3px rgba(0, 0, 0, 0.1)
-
 .footer
   font-size 1em
-  height 40px
-  line-height 40px
-  padding 0 1em
+  padding 0.5em
   position absolute
   bottom 0
+  i
+    margin 0 7px
+    font-size 1.5em
+    color #3090de