Finsihed first pass on the homepage

client/naturalCrit/home/home.jsx

@@ -2,6 +2,8 @@ var React = require('react');
 var _ = require('lodash');
 var cx = require('classnames');
 
+var Router = require('pico-router');
+
 var Icon = require('naturalCrit/icon.svg.jsx');
 
 var Logo = require('naturalCrit/logo/logo.jsx');
@@ -12,6 +14,10 @@ var CombatIcon = require('naturalCrit/combatIcon.svg.jsx');
 
 var Home = React.createClass({
 
+	navigate : function(){
+
+	},
+
 	render : function(){
 		var self = this;
 		return(
@@ -20,21 +26,24 @@ var Home = React.createClass({
 
 				<div className='top'>
 					<Logo />
-					<p>Tip-top tools for the discerning DM</p>
+					<p>Top-tier tools for the discerning DM</p>
 				</div>
 
 				<div className='tools'>
 
-					<div className='homebrew toolContainer' href='/homebrew'>
+					<div className='homebrew toolContainer' onClick={Router.navigate.bind(self, '/homebrew')}>
-						<HomebrewIcon />
+						<div className='content'>
-						<h2>The Homebrewery</h2>
+							<HomebrewIcon />
-						<p>Make authentic-looking 5e homebrews using just <a href='https://help.github.com/articles/markdown-basics/'>Markdown</a></p>
+							<h2>The Homebrewery</h2>
-
+							<p>Make authentic-looking 5e homebrews using Markdown</p>
+						</div>
 					</div>
-					<div className='combat toolContainer underConstruction'>
+					<div className='combat toolContainer underConstruction' onClick={Router.navigate.bind(self, '/combat')}>
-						<CombatIcon />
+						<div className='content'>
-						<h2>Combat Manager</h2>
+							<CombatIcon />
-						<p>Easily create and manage complex encouters for your party</p>
+							<h2>Combat Manager</h2>
+							<p>Easily create and manage complex encouters for your party</p>
+						</div>
 					</div>
 				</div>
 			</div>

client/naturalCrit/home/home.less

@@ -1,58 +1,104 @@
+
 .home{
-	background-color: white;
+	height           : 100vh;
-
+	background-color : white;
 	.top{
-		text-align: center;
+		.fadeInTop(1s);
-
+		.delay(0.5);
+		margin-bottom : 100px;
+		padding-top   : 100px;
+		text-align    : center;
 		.logo{
-			font-size: 4em;
+			font-size : 4em;
-			color : black;
+			color     : black;
 			svg{
 				fill : black;
 			}
 		}
-
 		p{
-			margin-top: 15px;
+			margin-top : 10px;
-			font-size: 1.5em;
+			font-size  : 1.3em;
-			font-style: italic;
+			font-style : italic;
-			color : @grey;
+			color      : @grey;
 		}
 	}
-
 	.tools{
-
+		width      : 100%;
+		text-align : center;
 		.toolContainer{
-			display: inline-block;
+			.sequentialDelay(0.5s, 1s);
-			width : 500px;
+			.fadeInDown(1s);
-			cursor : pointer;
+			.keep();
+			opacity      : 0;
+			display      : inline-block;
 
+
+			cursor       : pointer;
+
+			text-align   : center;
 			border-right : 5px solid @silver;
-
+			&:last-child{
-			padding : 40px;
+				border : none;
-
+			}
-			svg{
+			.content{
+				.addSketch(360px);
+				.animate(background-color, 0.5s);
+				padding      : 40px;
+				width        : 500px;
 
 				&:hover{
-					path, line, polyline, circle, rect, polygon{
+					background-color: fade(@red, 20%);
-
+					svg, h2{
-						stroke-dashoffset : 0px;
+						.transform(scale(1.3));
 					}
 				}
 
-				path, line, polyline, circle, rect, polygon {
+				h2{
-
+					font-family : 'CodeBold';
-
+					font-size   : 2em;
-					stroke-dasharray  : 300px;
+					.animateAll(0.5s);
-					stroke-dashoffset : 300px;
+				}
-
+				p{
-					.animateAll(1s);
+					max-width : 300px;
+					margin    : 20px auto;
+				}
+				svg{
+					.animateAll(0.5s);
+					height : 10em;
 				}
-
 
 			}
 
 		}
 	}
-
+}
+.addSketch(@length, @color : black){
+	&:hover{
+		path, line, polyline, circle, rect, polygon{
+			.sketch(@length, @color, 2s)
+		}
+	}
+	path, line, polyline, circle, rect, polygon {
+		stroke-dasharray  : @length;
+		stroke-dashoffset : 0px;
+		stroke            : @color;
+		stroke-width      : 0.5px;
+		fill              : @color;
+		//.animateAll(3s);
+	}
+}
+.sketch(@length, @color : black, @duration : 3s, @easing : @defaultEasing){
+	.createAnimation(bounce, @duration, @easing);
+	.sketchKeyFrames(){
+		0% { stroke-dashoffset : 0px; fill:@color;}
+		15% { stroke-dashoffset : 0px; fill : transparent}
+		50% { stroke-dashoffset : @length; fill: transparent}
+		85% { stroke-dashoffset : 0px; fill:transparent;}
+		100% { stroke-dashoffset : 0px; fill:@color;}
+	}
+	@-webkit-keyframes bounce {.sketchKeyFrames();}
+	@-moz-keyframes bounce {.sketchKeyFrames();}
+	@-ms-keyframes bounce {.sketchKeyFrames();}
+	@-o-keyframes bounce {.sketchKeyFrames();}
+	@keyframes bounce {.sketchKeyFrames();}
 }

client/template.dot

@@ -9,7 +9,6 @@
 		{{=vitreum.globals}}
 		<title>Natural Crit - D&D Tools</title>
 
-
 		{{? vitreum.inProduction}}
 			<script>
 				(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
@@ -21,7 +20,6 @@
 				ga('send', 'pageview');
 			</script>
 		{{?}}
-
 	</head>
 	<body>
 		<div id="reactContainer">{{=vitreum.component}}</div>