Added style to default page

Author: jhumbug

app/index.html

@@ -4,6 +4,9 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <title>_default</title>
+    
+    <link href='http://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'>
+    
     <link rel="stylesheet" href="css/app.css" />
   </head>
 

app/scripts/models/_default.js

@@ -2,7 +2,7 @@ var Backbone = require('backbone');
 
 module.exports = Backbone.Model.extend({
     defaults: {
-        _default: 'WHOA'
+        _default: 'HOLY CRAP'
     },
 
     initialize: function() {

app/scripts/templates/_default.ejs

@@ -1 +1,11 @@
-<div class=""><%= _default %></div>
+
+<div id="wrapper" class="container">
+	<div class="explantion">
+		<p><span class="bigger">Wait!</span>   Did you remember to rename the <strong>_default</strong> files?  You should do it file by file to get a feel for the structure of the project.</p>
+	</div>
+
+	<div class="exclamation">
+		<h1><%= _default %></h1>
+		<h6>It worked</h6>
+	</div>
+</div>

app/scripts/templates/content.ejs

@@ -1 +1 @@
-<div id="_default"></div>
+<div id="_default" class="section"></div>

app/scripts/views/_default.js

@@ -8,7 +8,7 @@ $._default = require('../lib/_default');
 
 module.exports = Backbone.View.extend({
 	el: "#_default",
-
+    
 	template: require('../templates/_default'),
 
     initialize: function() {

app/styles/_default.less

@@ -0,0 +1,60 @@
+.section {
+	display: inline-block;
+  	width: 100%;
+  	height: 100%;
+}
+
+#wrapper {
+	padding: 10% 10%;
+}
+
+
+
+div.explantion {
+	padding: 30px 20px;
+
+	@media (min-width: 768px) {
+		float: left;
+		width: 50%;
+		padding: 18% 50px;
+		background: #eeeeee;
+		box-shadow: 1px 1px 7px -2px rgba(0,0,0,0.3) inset;
+	}
+
+	p {
+		font-family: 'Oswald', sans-serif;
+		font-weight: 300;
+		font-size: 20px;
+		.bigger {
+			font-weight: 400;
+			font-size: 1.3em;
+		}
+	}
+	
+}
+
+
+
+
+div.exclamation {
+	@media (min-width: 768px) {
+		float: left;
+		width: 50%;
+	}
+
+	h1 {
+		text-align: center;
+		font-size: 157px;
+		font-family: 'Oswald', sans-serif;
+		font-weight: 700;
+		text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+	}	
+
+	h6 {
+		text-align: center;
+		font-family: 'Oswald', sans-serif;
+		font-size: 40px;
+		text-transform: uppercase;
+	}
+}
+

app/styles/app.less

@@ -4,7 +4,9 @@
 
 @import "vars";
 
+@import "mixins";
+
 // Libs
 @import "font-awesome/less/font-awesome";
 
-@import "main";
+@import "_default";

app/styles/main.less

@@ -0,0 +1,29 @@
+.vertical-center-mixin(@pos: absolute) {
+    position: @pos;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.horizontal-center-mixin(@pos: absolute) {
+    position: @pos;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.horizontal-vertical-center-mixin(@pos: absolute) {
+    position: @pos;
+    top: 50%; left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+}
+
+.cf() {
+	&:before,
+	&:after {
+	    content: " "; /* 1 */
+	    display: table; /* 2 */
+	}
+
+	&:after {
+	    clear: both;
+	}
+}