From d6fec8d50fa249556bcec52859d51b53e51aba68 Mon Sep 17 00:00:00 2001
From: John O'Nolan <john@onolan.org>
Date: Tue, 20 Aug 2013 18:53:02 +0200
Subject: [PATCH] First pass at new Casper homepage

---
 assets/css/screen.css | 40 +++++++++++++++++++++++++++++++++++++++-
 assets/js/index.js    | 13 +++++++++++--
 default.hbs           |  5 +++--
 index.hbs             | 31 +++++++++++++++++++++----------
 4 files changed, 74 insertions(+), 15 deletions(-)
diff --git a/assets/css/screen.css b/assets/css/screen.css
index 6a18da1..2695161 100644
--- a/assets/css/screen.css
+++ b/assets/css/screen.css
@@ -67,8 +67,42 @@ a:hover {
    1. General
    ========================================================================== */
 
+#sitehead {
+    width: 100%;
+    height: 700px;
+    text-align: center;
+    color: #fff;
+    background: #4a4a4a url(http://cdn.travelllll.com/wp-content/uploads/2013/04/index.jpg) center center;
+    background-size: cover;
+    position: relative;
+}
+
+#sitehead .wrap {
+    display: inline-block;
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 0;
+    margin-top: -100px;
+}
+
+#sitehead h1 {
+    font-size: 8rem;
+    font-family: Lato, "Open Sans", sans-serif;
+    font-weight: 100;
+}
+
+#sitehead h2 {
+    font-size: 1.8rem;
+    line-height: 1.5em;
+    font-weight: 300;
+    opacity: 0.6;
+    max-width: 700px;
+    margin: 0 auto;
+}
+
 .content {
-    padding-top:120px;
+    padding-top: 120px;
 }
 
 .post {
@@ -84,6 +118,10 @@ a:hover {
             hyphens: auto;
 }
 
+.post-title a {
+    text-decoration: none;
+}
+
 .post-content {
     /* Breaking for long words in preview region */
     word-break: break-word;
diff --git a/assets/js/index.js b/assets/js/index.js
index 5f3e8ef..682e621 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -6,7 +6,16 @@
 (function ($) {
     "use strict";
 
-    $(document).ready(function () {
-        // code goes here
+    $(document).ready(function(){
+
+        sizeContent();
+        $(window).resize(sizeContent);
+
+        function sizeContent() {
+            var newHeight = $(window).height() - 30;
+            $("#sitehead").css("height", newHeight);
+        }
+
     });
+
 }(jQuery));
\ No newline at end of file
diff --git a/default.hbs b/default.hbs
index 2d104a3..ff5677f 100644
--- a/default.hbs
+++ b/default.hbs
@@ -11,13 +11,14 @@
     
     {{! Styles'n'Scripts }}
     <link rel="stylesheet" type="text/css" href="assets/css/screen.css">
-    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,700,400">
-    <script type="text/javascript" src="assets/js/index.js"></script>
+    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lato:100|Open+Sans:400italic,700,400">
 </head>
 <body>
     
     {{! This is where shit gets real }}
     {{{body}}}
 
+<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+<script type="text/javascript" src="assets/js/index.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/index.hbs b/index.hbs
index 89f6ea2..1f1544f 100644
--- a/index.hbs
+++ b/index.hbs
@@ -1,18 +1,29 @@
 {{!< default}}
+
+<header id="sitehead">
+
+    <div class="wrap">
+        <h1>John O'Nolan</h1>
+        <h2>A designer, developer and entrepreneur. Spends his time travelling the world with a bag of kites. Likes to write.</h2>
+    </div>
+
+</header>
+
 <main class="content" role="main">
-    <ul class="hfeed">
 
-        {{#foreach posts}}
+    {{#foreach posts}}
 
-            <li class="wrap">
-                <article class="post">
-                    <h2 class="entry-title"><a href="/{{slug}}" rel="bookmark">{{title}}</a></h2>
-                    <time datetime="2012-05-03">{{dateFormat published_at format="MMMM DD, YYYY"}}</time>
-                </article>
-            </li>
+    <article class="post">
+        <header class="post-header">
+            <h2 class="post-title"><a href="/{{slug}}">{{title}}</a></h2>
+            <span class="post-meta"><time datetime="2012-05-03">23 Aug 2013</time> in <a href="#">What I Learned Building...</a></span>
+        </header>
+        <section class="post-excerpt">
+            {{content words="50"}}
+        </section>
+    </article>
 
-        {{/foreach}}
+    {{/foreach}}
 
-    </ul>
     {{pagination}}
 </main>
\ No newline at end of file
