Next pass on Casper refactor

* New Helpers
* Updated Helpers
* New reponsive header styles
* New global blog icon
* Responsive styles adjustments

assets/css/screen.css

@@ -266,29 +266,30 @@ table.plain {
    1. General
    ========================================================================== */
 
-#sitehead {
+#site-head {
     position: relative;
     width: 100%;
     height: 60%;
     text-align: center;
     color: #fff;
-    background: #909396 url(http://f.cl.ly/items/1N2205280l2u1l0h190o/bg.jpg) no-repeat center center;
+    background: #303538 url(http://f.cl.ly/items/1N2205280l2u1l0h190o/bg.jpg) no-repeat center center;
     background-size: cover;
 }
 
-.blog-icon {
+#blog-icon {
     position: absolute;
     top: 40px;
     left: 40px;
+    z-index: 900;
     border: #fff 3px solid;
     -webkit-border-radius: 100%;
     -moz-border-radius: 100%;
     border-radius: 100%;
     overflow: hidden;
-    box-shadow: rgba(0,0,0,0.1) 0 1px 2px;
+    background: #303538;
 }
 
-.blog-icon img {
+#blog-icon img {
     height: 80px;
     width: auto;
     min-width: 80px;
@@ -296,29 +297,28 @@ table.plain {
     line-height: 0;
 }
 
-#sitehead .wrap {
+#site-head .wrap {
     display: inline-block;
     position: absolute;
-    top: 50%;
+    bottom: 40%;
     left: 0;
     right: 0;
-    margin-top: -100px;
+    margin: 0 auto -60px auto;
+    width: 80%;
+    max-width: 700px;
 }
 
-#sitehead h1 {
+.blog-title {
-    margin:0;
+    margin: 0 0 10px 0;
-    font-size: 10rem;
+    font-size: 7rem;
-    font-family: Lato, "Open Sans", sans-serif;
+    letter-spacing: -3px;
-    font-weight: 100;
 }
 
-#sitehead h2 {
+.blog-description {
-    font-size: 1.8rem;
+    font-size: 2rem;
     line-height: 1.5em;
     font-weight: 300;
-    opacity: 0.6;
+    opacity: 0.8;
-    max-width: 700px;
-    margin: 0 auto;
 }
 
 .post-template .content {
@@ -330,7 +330,8 @@ table.plain {
     width:80%;
     max-width: 700px;
     border-bottom: #DDE6EB 1px solid;
-    margin: 1.6em auto;
+    margin: 3.2em auto;
+    padding-bottom: 1.6em;
     word-break: break-word;
     hyphens: auto;
 }
@@ -484,7 +485,7 @@ table.plain {
 
 @media only screen and (max-width: 900px) {
 
-    #sitehead {
+    #site-head {
         -webkit-box-sizing: border-box; 
         -moz-box-sizing: border-box;
         box-sizing: border-box; 
@@ -493,6 +494,30 @@ table.plain {
         padding-top: 50%;
     }
 
+    #site-head .wrap {
+        margin: 0 auto -50px auto;
+    }
+    
+    #blog-icon {
+        left: 50%;
+        margin-left: -41px;
+    }
+
+    .home-template #blog-icon {
+        top: auto;
+        bottom: -41px;
+    }
+
+    .blog-title {
+        font-size: 5rem;
+        letter-spacing: -3px;
+    }
+
+    .blog-description {
+        font-size: 1.9rem;
+        line-height: 1.5em;
+    }
+
     .post {
         font-size: 0.9em;
         line-height: 1.6em;
@@ -500,7 +525,10 @@ table.plain {
 
     h1 {
         font-size: 4.8rem;
-        line-height: 1.2em;
+    }
+
+    h2 {
+        font-size: 3.8rem;
     }
 
 }/* max 900 */
@@ -516,8 +544,26 @@ table.plain {
         line-height: 1.6em;
     }
 
+    #blog-icon {
         
-    h1 {
+    }
+
+    #site-head .wrap {
+        margin: 0 16px -30px 16px;
+        width: auto;
+    }
+
+    .blog-title {
+        font-size: 3rem;
+        letter-spacing: 0;
+    }
+
+    .blog-description {
+        font-size: 1.5rem;
+    }
+
+
+    h1, h2 {
         font-size: 3rem;
         line-height: 1.1em;
         letter-spacing: 0;

assets/js/index.js

@@ -1,5 +1,5 @@
 /**
- * Placeholder JS file for Casper behaviours
+ * Main JS file for Casper behaviours
  */
 
 /*globals jQuery, document */
@@ -8,6 +8,11 @@
 
     $(document).ready(function(){
 
+        // On the home page, move the blog icon inside the header 
+        // for better relative/absolute positioning.
+        
+        $("#blog-icon").prependTo("#site-head");
+
     });
 
 }(jQuery));

default.hbs

@@ -16,13 +16,24 @@
     {{! 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">
+    
+    {{! Ghost outputs important style and meta data with this tag }}
+    {{ghost_head}}
 </head>
-<body class="{{bodyclass}}">
+<body class="{{body_class}}">
+
+    <figure id="blog-icon">
+        <a href="/" title="Home">
+            <img src="http://f.cl.ly/items/1O1o3n05373h222G101k/gravatar-j7-100.jpg" alt="John" />
+        </a>
+    </figure>
 
     {{! This is where shit gets real }}
     {{{body}}}
 
-<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+    {{! Ghost outputs important scripts and data with this tag }}
+    {{ghost_foot}}
     <script type="text/javascript" src="assets/js/index.js"></script>
+
 </body>
 </html>

index.hbs

@@ -1,21 +1,17 @@
 {{!< default}}
 
-<header id="sitehead">
+<header id="site-head">
-    <figure class="blog-icon">
-        <img src="http://f.cl.ly/items/1O1o3n05373h222G101k/gravatar-j7-100.jpg" alt="John" />
-    </figure>
     <div class="wrap">
-        <h1>John O'Nolan</h1>
+        <h1 class="blog-title">{{settings.title}}</h1>
-        <h2>A designer, developer and entrepreneur. Spends his time travelling the world with a bag of kites. Likes to write.</h2>
+        <h2 class="blog-description">A designer, developer and entrepreneur. Spends his time travelling the world with a bag of kites. Likes journalism and publishing platforms.</h2>
     </div>
-
 </header>
 
 <main class="content" role="main">
 
     {{#foreach posts}}
 
-    <article class="post">
+    <article class="{{post_class}}">
         <header class="post-header">
             <h2 class="post-title"><a href="/{{slug}}">{{title}}</a></h2>
             <span class="post-meta"><time datetime="{{date published_at format='YYYY-MM-DD'}}">{{date published_at format='DD MMM YYYY'}}</time> in <a href="#">What I Learned Building...</a></span>

post.hbs

@@ -4,7 +4,7 @@
 
     {{#post}}
 
-    <article class="post">
+    <article class="{{post_class}}">
 
         <header class="post-header">
             <span class="post-meta"><a href="#">John O'Nolan</a> on <a href="#">What I Learned Building...</a></span>