bring up to date with upstream/master and bring to ghost 0.4 standard…

… practice (i.e. asset support, and authoring)
tmack8001 · Feb 15, 2014 · 4cffdc7 · 4cffdc7
2 parents 66c6308 + 48bf106
commit 4cffdc7
Show file tree

Hide file tree

Showing 7 changed files with 157 additions and 47 deletions.
diff --git a/LICENSE b/LICENSE
@@ -1,4 +1,4 @@
-Copyright (c) 2013 Trevor Mack - Released under The MIT License.
+Copyright (c) 2014 Trevor Mack - Released under The MIT License.
 
 Permission is hereby granted, free of charge, to any person
 obtaining a copy of this software and associated documentation

diff --git a/README.md b/README.md
@@ -13,11 +13,11 @@ The default theme for [Ghost](http://github.com/tryghost/ghost/).
 
 ## Configuration
 
-All configurable files are located in ghostium/partials/custom.
+All configurable files are located in skeletor-casper/partials/custom.
 
 ## Copyright & License
 
-Copyright (C) 2013 Trevor Mack - Released under the MIT License.
+Copyright (C) 2014 Trevor Mack - Released under the MIT License.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

diff --git a/assets/css/screen.css b/assets/css/screen.css
@@ -338,6 +338,15 @@ margin on the iframe, cause it breaks stuff. */
    3. Utilities - These things get used a lot
    ========================================================================== */
 
+/* Clears shit */
+.clearfix:before,
+.clearfix:after {
+    content: " ";
+    display: table;
+}
+.clearfix:after { clear: both; }
+.clearfix { *zoom: 1; }
+
 /* Hides shit */
 .hidden {
     text-indent: -9999px;
@@ -548,6 +557,12 @@ margin on the iframe, cause it breaks stuff. */
    5. Single Post - When you click on an individual post
    ========================================================================== */
 
+/* Stop .full-img from creating horizontal scroll - slight hack due to 
+   imperfections with browser width % calculations and rounding */
+.post-template .content {
+    overflow: hidden;
+}
+
 /* Tweak the .post wrapper style */
 .post-template .post {
     margin-top: 0;
@@ -585,12 +600,21 @@ margin on the iframe, cause it breaks stuff. */
     text-decoration: none;
 }
 
-/* Keep large images within the bounds of the post-width */
+/* Keep images centred and within the bounds of the post-width */
 .post-content img {
     display: block;
     max-width: 100%;
-    margin: 0 auto;
     height: auto;
+    margin: 0 auto;
+    padding: 0.6em 0;
+}
+
+/* Break out larger images to be wider than the main text column
+   the class is applied with jQuery */
+.post-content .full-img {
+    width: 126%;
+    max-width: none;
+    margin: 0 -13%;    
 }
 
 /* The author credit area after the post */
@@ -612,6 +636,38 @@ margin on the iframe, cause it breaks stuff. */
     line-height: 1.6em;
 }
 
+/* list of author links - location / url */
+.author-meta {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    font-size: 1.4rem;
+    line-height: 1;
+    font-style: italic;
+    color: #9EABB3;
+}
+
+.author-meta li {
+    float: left;
+    margin-left: 10px; /* space to the left of the bullet */
+}
+
+/* bullet divider */
+.author-meta li:before {
+    content: "•";
+    display: inline-block;
+    margin-right: 10px; /* space to the right of the bullet */
+    color: #BBC7CC;
+}
+
+/* disable the bullet divider for the first item in the list */
+.author-meta li:first-child { margin-left: 0; }
+.author-meta li:first-child:before { display: none; }
+
+.author-meta a {
+    color: #9EABB3;
+}
+
 /* Create some space to the right for the share links */
 .post-footer .author {
     margin-right: 180px;
@@ -631,7 +687,7 @@ margin on the iframe, cause it breaks stuff. */
 .post-footer .share a {
     font-size: 1.8rem;
     display: inline-block;
-    margin: 1.4rem 1.6rem 1.6rem 0;
+    margin: 1rem 1.6rem 1.6rem 0;
     color: #BBC7CC;
     text-decoration: none;
 }
@@ -956,6 +1012,18 @@ margin on the iframe, cause it breaks stuff. */
         padding: 30px 0;
     }
 
+    .post-content img {
+        padding: 0;
+    }
+
+    .post-content .full-img { 
+        width: auto;
+        width: calc(100% + 32px); /* expand with to image + margins */
+        margin: 0 -16px; /* get rid of margins */
+        min-width: 0;
+        max-width: 112%; /* fallback when calc doesn't work */
+    }
+
     .post-meta {
         font-size: 1.3rem;
     }

diff --git a/assets/js/index.js b/assets/js/index.js
@@ -10,6 +10,50 @@
 
         $(".post-content").fitVids();
 
+        function casperFullImg() {
+            $("img").each( function() {
+                var contentWidth = $(".post-content").outerWidth(); // Width of the content
+                var imageWidth = $(this)[0].naturalWidth; // Original image resolution
+
+                if (imageWidth >= contentWidth) {
+                    $(this).addClass('full-img');
+                } else {
+                    $(this).removeClass('full-img');
+                }
+            });
+        };
+
+        casperFullImg();
+        $(window).smartresize(casperFullImg);
+
     });
 
-}(jQuery));
+}(jQuery));
+
+(function($,sr){
+
+  // debouncing function from John Hann
+  // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
+  var debounce = function (func, threshold, execAsap) {
+      var timeout;
+
+      return function debounced () {
+          var obj = this, args = arguments;
+          function delayed () {
+              if (!execAsap)
+                  func.apply(obj, args);
+              timeout = null;
+          };
+
+          if (timeout)
+              clearTimeout(timeout);
+          else if (execAsap)
+              func.apply(obj, args);
+
+          timeout = setTimeout(delayed, threshold || 100);
+      };
+  }
+  // smartresize 
+  jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
+
+})(jQuery,'smartresize');
diff --git a/default.hbs b/default.hbs
@@ -10,11 +10,12 @@
     <meta name="description" content="{{meta_description}}" />
 
     <meta name="HandheldFriendly" content="True" />
-    <meta name="MobileOptimized" content="320" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <link rel="shortcut icon" href="{{asset "favicon.ico"}}">
+
     {{! Styles'n'Scripts }}
-    <link rel="stylesheet" type="text/css" href="/assets/css/screen.css" />
+    <link rel="stylesheet" type="text/css" href="{{asset "css/screen.css"}}" />
     <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Noto+Serif:400,700,400italic|Open+Sans:700,400" />
     <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
 
@@ -39,8 +40,8 @@
     {{ghost_foot}}
 
     {{! The main JavaScript file for Casper }}
-    <script type="text/javascript" src="/assets/js/jquery.fitvids.js"></script>
-    <script type="text/javascript" src="/assets/js/index.js"></script>
+    <script type="text/javascript" src="{{asset "js/jquery.fitvids.js"}}"></script>
+    <script type="text/javascript" src="{{asset "js/index.js"}}"></script>
 
     {{! Google Prettify for Code Highlighting }}
     <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

diff --git a/page.hbs b/page.hbs
@@ -1,34 +1,29 @@
 {{!< default}}
 
-{{! The comment above "< default" means - insert everything in this file into
-    the {body} of the default.hbs template, which contains our header/footer. }}
+{{! This is a page template. A page outputs content just like any other post, and has all the same
+    attributes by default, but you can also customise it to behave differently if you prefer. }}
 
 <main class="content" role="main">
 
     <article class="{{post_class}}">
 
-        {{! Each post has the blog logo at the top, with a link back to the home page }}
         <header class="post-header">
             <a class="blog-logo" href="{{@blog.url}}">
                 {{#if @blog.logo}}
                     <img src="{{@blog.logo}}" alt="Blog Logo" />
                 {{else}}
-                    {{@blog.title}}
+                    <span class="blog-title">{{@blog.title}}</span>
                 {{/if}}
             </a>
         </header>
 
-        {{! Everything inside the #post tags pulls data from the post }}
         {{#post}}
 
-        {{! Everything below outputs content of the the post which has been published }}
-
+            <h1 class="post-title">{{{title}}}</h1>
 
-        <h1 class="post-title">{{{title}}}</h1>
-
-        <section class="post-content">
-            {{content}}
-        </section>
+            <section class="post-content">
+                {{content}}
+            </section>
 
         {{/post}}
 

diff --git a/post.hbs b/post.hbs
@@ -22,38 +22,40 @@
         {{#post}}
 
         {{! Everything below outputs content of the the post which has been published }}
-        <span class="post-meta"><i class="fa fa-calendar"></i> <time datetime="{{date format="YYYY-MM-DD"}}">{{date format='DD MMM YYYY'}}</time> <i class="fa fa-tags"></i> {{tags prefix="" separator=", "}}</span>
+        <span class="post-meta"><time datetime="{{date format="YYYY-MM-DD"}}">{{date format='DD MMM YYYY'}}</time> {{tags prefix="on " separator=" | "}}</span>
 
-        <h1 class="post-title">{{{title}}}</h1>
+            <h1 class="post-title">{{{title}}}</h1>
 
-        <section class="post-content">
-            {{content}}
-        </section>
+            <section class="post-content">
+                {{content}}
+            </section>
 
-        <footer class="post-footer">
+            <footer class="post-footer">
 
-            {{#if author}}
                 <section class="author">
                     <h4>{{author.name}}</h4>
                     <p>{{author.bio}}</p>
+                    <ul class="author-meta clearfix">
+                        {{#if author.location}}<li>{{author.location}}</li>{{/if}}
+                        {{#if author.website}}<li><a href="{{author.website}}">{{author.website}}</a></li>{{/if}}
+                    </ul>
+                </section>
+
+                <section class="share">
+                    <h4>Share this post</h4>
+                    <a class="icon-twitter" href="https://twitter.com/share?text={{encode title}}&url={{url absolute="true"}}"
+                        onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;">
+                        <span class="hidden">Twitter</span>
+                    </a>
+                    <a class="icon-facebook" href="https://www.facebook.com/sharer/sharer.php?u={{url absolute="true"}}"
+                        onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">
+                        <span class="hidden">Facebook</span>
+                    </a>
+                    <a class="icon-google-plus" href="https://plus.google.com/share?url={{url absolute="true"}}"
+                       onclick="window.open(this.href, 'google-plus-share', 'width=490,height=530');return false;">
+                        <span class="hidden">Google+</span>
+                    </a>
                 </section>
-            {{/if}}
-
-            <section class="share">
-                <h4>Share this post</h4>
-                <a class="icon-twitter" href="http://twitter.com/share?text={{encode title}}&url={{url absolute="true"}}"
-                    onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;">
-                    <span class="hidden">Twitter</span>
-                </a>
-                <a class="icon-facebook" href="https://www.facebook.com/sharer/sharer.php?u={{url absolute="true"}}"
-                    onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">
-                    <span class="hidden">Facebook</span>
-                </a>
-                <a class="icon-google-plus" href="https://plus.google.com/share?url={{url absolute="true"}}"
-                   onclick="window.open(this.href, 'google-plus-share', 'width=490,height=530');return false;">
-                    <span class="hidden">Google+</span>
-                </a>
-            </section>
 
         </footer>