jade views updates, sticky footer in css

src/css/_base.scss

@@ -15,6 +15,8 @@ $dark-grey: #261e26;
 html {
   font-size: 100%;
   overflow-y: auto;
+  min-height: 100%;
+  position: relative;
   -webkit-overflow-scrolling: touch;
   -webkit-tap-highlight-color: rgba(0,0,0,0);
   -webkit-text-size-adjust: 100%;
@@ -82,7 +84,10 @@ body, html {
   font-size: 16px;
   line-height: 1.5;
   font-weight: 400;
-  height: 100%;
+}
+
+body {
+  margin-bottom: 100px;
 }
 
 a { 

src/css/_layout.scss

@@ -78,12 +78,19 @@ a.btn {
 }
 
 footer {
-  font-size: 1rem;
+  position: absolute;
+  bottom: 0;
+  left: 0;
   width: 100%;
+  height: 100px;
   line-height: 2em;
   text-align: center;
-  border-bottom: 4px solid darken($grey, 10%);
-  box-shadow: inset 0 -4px darken($grey, 10%);
+  border-bottom: 8px solid darken($grey, 10%);
+
+  p, a {
+    font-size: .85rem;
+    margin-bottom: 0;
+  }
 
   a {
     color: darken($grey, 45%);

src/js/components/Index.js

@@ -21,9 +21,6 @@ const Index = React.createClass({
   componentDidMount() {
     const io = this.props.io;
 
-    /**
-     * Socket.IO events
-     */
     io.on('created', data => {
       const {time, inc} = this.state;
 
@@ -44,9 +41,10 @@ const Index = React.createClass({
              height="122"
              className="knight" />
         <h1>Reti Chess</h1>
+
         <p style={{margin: '50px 0'}} className="center">
           A lightweight real-time chess app build in Node, Express, 
-          Socket.IO and React.
+          Socket.IO, React, Flux and Immutable.
         </p>
 
         <div id="create-game">
@@ -56,6 +54,7 @@ const Index = React.createClass({
             inc={this.state.inc}
             onChangeForm={this._onChangeForm}
             createGame={this._createGame} />
+            
           <p id="game-status">
             {this.state.link ?
               'Waiting for opponent to connect'
@@ -68,7 +67,7 @@ const Index = React.createClass({
         <p>
           Click the button to create a game. Send the link to your friend.
           Once the link is opened your friend‘s browser, game should begin 
-          shortly. Colours are picked randomly by computer.
+          shortly. Colors are picked randomly by computer.
         </p>
         <p>
           <a href="/about" className="alpha">Read more about Reti Chess</a>
@@ -82,6 +81,7 @@ const Index = React.createClass({
   },
   _createGame(e) {
     e.preventDefault();
+
     const {time, inc} = this.state;
     const isInvalid = [time, inc].some(val => {
       val = parseInt(val, 10);

views/about.jade

@@ -1,35 +1,32 @@
 extends layout
 
 block content
-  h1.knight
-  h2 About Reti Chess
-  p.margin-fifty Reti Chess is opensource chess app built in 
-    a(href='http://nodejs.org/') Node.js 
-    |  with use of 
-    a(href='http://expressjs.com/') Express framework 
-    |  and 
+  img(src='/img/knight.png', width='122', height='122', class='knight')
+  h1 About Reti Chess
+  p(style='margin: 50px 0;') Reti Chess is open source chess app built in 
+    a(href='http://nodejs.org/') Node.js
+    | ,  
+    a(href='http://expressjs.com/') Express
+    | , 
     a(href='http://socket.io/') Socket.IO
-    |  . Reti Chess also uses 
-    a(href='https://github.com/jhlywa/chess.js') chess.js
+    | , 
+    a(href='http://facebook.github.io/react/') React
+    | , 
+    a(href='http://facebook.github.io/flux/') Flux
+    | , and 
+    a(href='http://facebook.github.io/immutable-js/') Immutable
+    | . Reti Chess also uses 
+    a(href='http://github.com/jhlywa/chess.js') chess.js
     |  for move validation and check/mate/draw detection.
 
-  h3 Why Reti?
+  h2 Why Reti?
   p The project is named after famous Czechoslovakian chess player Richard Réti. 
     | After him is also named a chess opening which begins with the moves: 1. Nf3 d5, 2. d4.
 
-  h3 What features chess supports?
+  h2 What features are supported?
   p This is a lightweight version of chess. You can only play real-time against the human, an AI is not available. 
     | Reti Chess supports simple chat and also timer. You can set timer up to 50 minutes with increment of max 50 seconds per side. 
     | If you reload the window or disconnect from the game, the game will be cancelled.
 
-  h3 People behind this project
-  p
-    a(href='https://github.com/romanmatiasko/') Roman Matiasko
-    | , 
-    a(href='https://github.com/stepanbujnak') Stepan Bujnak 
-    | and 
-    a(href='https://github.com/lukasmatiasko') Lukas Matiasko
-    | .
-
-  p
-    a(href='/', class='button') Home
+  p(style='margin-top: 50px')
+    a(href='/', class='btn', style='float: none;') Home

views/error.jade

@@ -1,6 +1,5 @@
 extends layout
 
 block content
-  h1= message
-  h2= error.status
+  h1 #{error.status}  #{message}
   pre #{error.stack}

views/layout.jade

@@ -8,22 +8,23 @@ html(lang='en')
     meta(charset='utf-8')
     meta(name='robots', content='index, follow')
     meta(itemprop='name=Reti Chess')
-    meta(name='description', content='Reti Chess is a lightweight real-time chess app built in Node.js with use of Express framework and Socket.IO')
+    meta(author='Roman Matiasko')
+    meta(name='description', content='A lightweight real-time chess app built in Node, Express, Socket.IO, React, Flux and Immutable.')
     meta(name='viewport', content='width=device-width, initial-scale=1')
-    link(rel='shortcut icon', href='/img/logo.png')
+    link(rel='shortcut icon', href='/img/favicon.png')
     link(rel='stylesheet', href='/css/main.css')
     link(href='http://fonts.googleapis.com/css?family=Cherry+Swash|Open+Sans:400,600', rel='stylesheet', type='text/css')
 
   body
     #container-wrapper.clearfix
-        block content
+      block content
         
     footer
       #footer.clearfix
-        p.center Distributed under 
+        p.center 2015  –  Reti Chess is distributed under 
           a(href='http://opensource.org/licenses/MIT') the MIT License
-          |   •  
-          a(href='http://github.com/romanmatiasko/reti-chess') Github repo
+          |   –  
+          a(href='http://github.com/romanmatiasko/reti-chess') Github
 
     - if (process.env.NODE_ENV === 'development')
       script(src='/js/vendor.js')