From 2b847c0530df9642e23cefed2eff59b10f87704b Mon Sep 17 00:00:00 2001
From: John O'Nolan <john@onolan.org>
Date: Sun, 25 Aug 2013 00:57:39 +0200
Subject: [PATCH] Massive overhaul / update.

Introducing
* New helpers
* New header image
* Responsive / mobile styles
* Mobile device metatags and optimisations
* Initial blog icon support
* Restyled homepage feed
---
 assets/css/screen.css | 110 ++++++++++++++++++++++++++++++++++++------
 default.hbs           |   8 ++-
 index.hbs             |   8 +--
 post.hbs              |   2 +-
 4 files changed, 107 insertions(+), 21 deletions(-)

diff --git a/assets/css/screen.css b/assets/css/screen.css
index 9fb89ec..36e5272 100644
--- a/assets/css/screen.css
+++ b/assets/css/screen.css
@@ -19,16 +19,18 @@
    ========================================================================== */
 
 html {
+    height: 100%;
+    max-height: 100%;
     font-size: 62.5%;
 }
 
 body {
+    height: 100%;
+    max-height: 100%;
     font-family: 'Open Sans', sans-serif;
     font-size: 2.0rem;
     line-height: 1.6em;
     color: #50585D;
-    word-break: break-word;
-    hyphens: auto;
 }
 
 ::-moz-selection {
@@ -265,21 +267,33 @@ table.plain {
    ========================================================================== */
 
 #sitehead {
+    position: relative;
+    width: 100%;
+    height: 60%;
     text-align: center;
     color: #fff;
-    background: #222;
-    position: relative;
+    background: #909396 url(http://f.cl.ly/items/1N2205280l2u1l0h190o/bg.jpg) no-repeat center center;
+    background-size: cover;
 }
 
-#sitehead img {
+.blog-icon {
+    position: absolute;
+    top: 40px;
+    left: 40px;
+    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;
+}
+
+.blog-icon img {
+    height: 80px;
+    width: auto;
+    min-width: 80px;
     display: block;
-    width: 100%;
-    height: auto;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -o-user-select: none;
-    user-select: none;
+    line-height: 0;
 }
 
 #sitehead .wrap {
@@ -307,13 +321,35 @@ table.plain {
     margin: 0 auto;
 }
 
-.content {
+.post-template .content {
     padding-top: 120px;
 }
 
 .post {
+    position: relative;
+    width:80%;
     max-width: 700px;
-    margin: 0 auto;
+    border-bottom: #DDE6EB 1px solid;
+    margin: 1.6em auto;
+    word-break: break-word;
+    hyphens: auto;
+}
+
+.post:after {
+    display: block;
+    content: "";
+    width: 7px;
+    height: 7px;
+    border: #DDE6EB 1px solid;
+    position: absolute;
+    bottom: -5px;
+    left: 50%;
+    margin-left: -5px;
+    background: #fff;
+    -webkit-border-radius: 100%;
+    -moz-border-radius: 100%;
+    border-radius: 100%;
+    box-shadow: #fff 0 0 0 5px;
 }
 
 .post-title {
@@ -444,4 +480,48 @@ table.plain {
 
 .related-content p {
     margin: 0;
-}
\ No newline at end of file
+}
+
+@media only screen and (max-width: 900px) {
+
+    #sitehead {
+        -webkit-box-sizing: border-box; 
+        -moz-box-sizing: border-box;
+        box-sizing: border-box; 
+        height: auto;
+        min-height: 240px;
+        padding-top: 50%;
+    }
+
+    .post {
+        font-size: 0.9em;
+        line-height: 1.6em;
+    }
+
+    h1 {
+        font-size: 4.8rem;
+        line-height: 1.2em;
+    }
+
+}/* max 900 */
+
+
+@media only screen and (max-width: 500px) {
+
+    .post {
+        width:auto;
+        margin-left: 1.6rem;
+        margin-right: 1.6rem;
+        font-size: 0.8em;
+        line-height: 1.6em;
+    }
+
+
+    h1 {
+        font-size: 3rem;
+        line-height: 1.1em;
+        letter-spacing: 0;
+    }
+
+}/* max 500 */
+
diff --git a/default.hbs b/default.hbs
index ff5677f..811f801 100644
--- a/default.hbs
+++ b/default.hbs
@@ -8,12 +8,16 @@
     {{! Page Meta }}
     <title>{{settings.title}}</title>
     <meta name="description" content="{{settings.description}}" />
+
+    <meta name="HandheldFriendly" content="True">
+    <meta name="MobileOptimized" content="320">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     
     {{! 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=Lato:100|Open+Sans:400italic,700,400">
+    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,700,400">
 </head>
-<body>
+<body class="{{bodyclass}}">
     
     {{! This is where shit gets real }}
     {{{body}}}
diff --git a/index.hbs b/index.hbs
index b86b5f3..cde25fe 100644
--- a/index.hbs
+++ b/index.hbs
@@ -1,7 +1,9 @@
 {{!< default}}
 
 <header id="sitehead">
-    <img src="http://f.cl.ly/items/1N2205280l2u1l0h190o/bg.jpg" alt="" />
+    <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>
         <h2>A designer, developer and entrepreneur. Spends his time travelling the world with a bag of kites. Likes to write.</h2>
@@ -16,10 +18,10 @@
     <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>
+            <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>
         </header>
         <section class="post-excerpt">
-            {{content words="50"}}
+            <p>{{excerpt}}&hellip;</p>
         </section>
     </article>
 
diff --git a/post.hbs b/post.hbs
index 1774dda..452e8ea 100644
--- a/post.hbs
+++ b/post.hbs
@@ -23,7 +23,7 @@
             </section>
             <section class="publish-meta">
                 <span class="publish-heading">Published</span>
-                <time class="publish-date" datetime="{{dateFormat published_at format='YYYY-MM-DD'}}">{{dateFormat published_at format='DD MMMM YYYY'}}</time>
+                <time class="publish-date" datetime="{{date published_at format='YYYY-MM-DD'}}">{{date published_at format='DD MMM YYYY'}}</time>
             </section>
         </footer>