2013 => 2014

Because a post always has an author. Except when Ghost first runs, and there is the welcome post with no author. But in this case Ghost simply outputs nothing - I haven’t been able to make anything explode.

LICENSE

@@ -1,4 +1,4 @@
-Copyright (c) 2013 Ghost Foundation - Released under The MIT License.
+Copyright (c) 2014 Ghost Foundation - Released under The MIT License.
 
 Permission is hereby granted, free of charge, to any person
 obtaining a copy of this software and associated documentation

README.md

@@ -4,7 +4,7 @@ The default theme for [Ghost](http://github.com/tryghost/ghost/).
 
 ## Copyright & License
 
-Copyright (C) 2013 Ghost Foundation - Released under the MIT Lincense.
+Copyright (C) 2014 Ghost Foundation - 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:
 

assets/css/normalize.css

@@ -1,4 +1,4 @@
-/*! normalize.css v2.1.2 | MIT License | git.io/normalize */
+/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
 
 /* ==========================================================================
    HTML5 display definitions
@@ -339,8 +339,8 @@ html input[disabled] {
 }
 
 /**
- * 1. Address box sizing set to `content-box` in IE 8/9.
- * 2. Remove excess padding in IE 8/9.
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
  */
 
 input[type="checkbox"],

assets/css/screen.css

@@ -3,9 +3,19 @@
    ========================================================================== */
 
 /*
+
     0.  Includes
-   1.   General
-   2.   Something else
+    1.  Icons
+    2.  General
+    3.  Utilities
+    4.  General
+    5.  Single Post
+    6.  Third Party Elements
+    7.  Pagination
+    8.  Footer
+    9.  Media Queries (Tablet)
+    10. Media Queries (Mobile)
+
  */
 
 /* ==========================================================================
@@ -32,7 +42,11 @@
 }
 
 /* Apply these base styles to all icons */
-.icon-ghost, .icon-feed, .icon-twitter, .icon-google-plus, .icon-facebook {
+.icon-ghost:before, 
+.icon-feed:before, 
+.icon-twitter:before, 
+.icon-google-plus:before, 
+.icon-facebook:before {
     font-family: 'icons';
     speak: none;
     font-style: normal;
@@ -65,7 +79,7 @@
 
 
 /* ==========================================================================
-   1. General - Setting up some base styles
+   2. General - Setting up some base styles
    ========================================================================== */
 
 html {
@@ -77,7 +91,7 @@ html {
 body {
     height: 100%;
     max-height: 100%;
-    font-family: 'Droid Serif', serif;
+    font-family: 'Noto Serif', serif;
     font-size: 2.0rem;
     line-height: 1.6em;
     color: #3A4145;
@@ -148,7 +162,7 @@ h4 a, h5 a, h6 a {
 }
 
 
-p, ul, ol {
+p, ul, ol, dl {
     margin: 1.6em 0;
 }
 
@@ -157,6 +171,23 @@ ul ol, ol ul {
     margin: 0.4em 0;
 }
 
+dl dt {
+    float: left;
+    width: 180px;
+    overflow: hidden;
+    clear: left;
+    text-align: right;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-weight: bold;
+    margin-bottom: 1em
+}
+
+dl dd {
+    margin-left: 200px;
+    margin-bottom: 1em
+}
+
 hr {
     display: block;
     height: 1px;
@@ -181,7 +212,7 @@ blockquote p {
 
 blockquote small {
     display: inline-block;
-    margin: 0.8em 0 0.8em 1.5em;;
+    margin: 0.8em 0 0.8em 1.5em;
     font-size:0.9em;
     color: #ccc;
 }
@@ -194,28 +225,6 @@ blockquote cite {
 
 blockquote cite a { font-weight: normal; }
 
-
-dl {
-    margin: 1.6em 0;
-}
-
-dl dt {
-    float: left;
-    width: 180px;
-    overflow: hidden;
-    clear: left;
-    text-align: right;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-weight: bold;
-    margin-bottom: 1em
-}
-
-dl dd {
-    margin-left: 200px;
-    margin-bottom: 1em
-}
-
 mark {
     background-color: #ffc336;
 }
@@ -224,7 +233,7 @@ code, tt {
     padding: 1px 3px;
     font-family: Inconsolata, monospace, sans-serif;
     font-size: 0.85em;
-    white-space: pre;
+    white-space: pre-wrap;
     border: 1px solid #E3EDF3;
     background: #F7FAFB;
     border-radius: 2px;
@@ -308,16 +317,25 @@ table tbody > tr:nth-child(odd) > th {
     background-color: #f6f6f6;
 }
 
-table.plain {
-    tbody > tr:nth-child(odd) > td,
-    tbody > tr:nth-child(odd) > th {
+table.plain tbody > tr:nth-child(odd) > td,
+table.plain tbody > tr:nth-child(odd) > th {
    background: transparent;
 }
+
+iframe, .fluid-width-video-wrapper {
+    display: block;
+    margin: 1.6em 0;
+}
+
+/* When a video is inside the fitvids wrapper, drop the
+margin on the iframe, cause it breaks stuff. */
+.fluid-width-video-wrapper iframe {
+    margin: 0;
 }
 
 
 /* ==========================================================================
-   1. Utilities - These things get used a lot
+   3. Utilities - These things get used a lot
    ========================================================================== */
 
 /* Hides shit */
@@ -343,11 +361,11 @@ table.plain {
 
 
 /* ==========================================================================
-   1. General
+   4. General - The main styles for the the theme
    ========================================================================== */
 
 /* Big cover image on the home page */
-#site-head {
+.site-head {
     position: relative;
     display: table;
     width: 100%;
@@ -359,8 +377,12 @@ table.plain {
     background-size: cover;
 }
 
+.blog-logo {
+    text-decoration: none;
+}
+
 /* Yo-logo. Yolo-go. Upload one in ghost/settings/ */
-#blog-logo img {
+.blog-logo img {
     display: block;
     max-height: 100px;
     width: auto;
@@ -368,20 +390,14 @@ table.plain {
     line-height: 0;
 }
 
-#back {
-    color: rgba(0,0,0,0.2);
-    position: fixed;
-    top: 8px;
-    left: 8px;
-    padding: 6px;
-    font-size: 16px;
-}
-
 /* The details of your blog. Defined in ghost/settings/ */
 .blog-title {
     margin: 10px 0 10px 0;
     font-size: 5rem;
     letter-spacing: -1px;
+    font-weight: bold;
+    font-family: 'Open Sans', sans-serif;
+    text-shadow: 0 1px 6px rgba(0,0,0,0.1);
 }
 
 .blog-description {
@@ -389,8 +405,9 @@ table.plain {
     font-size: 1.8rem;
     line-height: 1.5em;
     font-weight: 300;
-    font-family: 'Droid Serif', serif;
+    font-family: 'Noto Serif', serif;
     letter-spacing: 0;
+    text-shadow: 0 1px 3px rgba(0,0,0,0.15);
 }
 
 /* Every post, on every page, gets this style on its <article> tag */
@@ -499,7 +516,7 @@ table.plain {
 }
 
 /* ==========================================================================
-   1. Single Post - When you click on an individual post
+   5. Single Post - When you click on an individual post
    ========================================================================== */
 
 /* Tweak the .post wrapper style */
@@ -517,6 +534,12 @@ table.plain {
 /* Insert some mad padding up in the header for better spacing */
 .post-template .post-header {
     padding: 60px 0;
+    text-align: center;
+}
+
+.post-template .blog-title {
+    display: inline-block;
+    padding: 2.5rem 0;
 }
 
 /* Keep large images within the bounds of the post-width */
@@ -524,6 +547,7 @@ table.plain {
     display: block;
     max-width: 100%;
     margin: 0 auto;
+    height: auto;
 }
 
 /* The author credit area after the post */
@@ -566,6 +590,7 @@ table.plain {
     display: inline-block;
     margin: 1.4rem 1.6rem 1.6rem 0;
     color: #BBC7CC;
+    text-decoration: none;
 }
 
 .post-footer .share a:hover {
@@ -574,7 +599,24 @@ table.plain {
 
 
 /* ==========================================================================
-   1. Pagination
+   6. Third Party Elements - Embeds from other services
+   ========================================================================== */
+
+/* Github */
+
+.gist table {
+    margin: 0;
+    font-size: 1.4rem;
+}
+
+.gist .line-number {
+    min-width: 25px;
+    font-size: 1.1rem;
+}
+
+
+/* ==========================================================================
+   7. Pagination - Tools to let you flick between pages
    ========================================================================== */
 
 /* The main wrapper for our pagination links */
@@ -625,7 +667,7 @@ table.plain {
 
 
 /* ==========================================================================
-   1. Footer - The bottom of every page
+   8. Footer - The bottom of every page
    ========================================================================== */
 
 .site-footer {
@@ -685,7 +727,7 @@ table.plain {
     color: #D2DEE3;
     font-size: 10px;
     position: absolute;
-    top: 2px;
+    top: 9px;
     left: 9px;
     font-weight: bold;
     transition: color 0.5s ease;
@@ -708,10 +750,9 @@ table.plain {
     padding: 4px 8px 5px 8px;
     position:absolute;
     top: -23px;
-    left: -23px;
+    left: -21px;
     color: rgba(255,255,255,0.9);
     font-size: 1.1rem;
-    font-weight: bold;
     line-height: 1em;
     text-align: center;
     background: #50585D;
@@ -743,7 +784,7 @@ table.plain {
 
 
 /* ==========================================================================
-   1. Media Queries - Smaller than 900px
+   9. Media Queries - Smaller than 900px
    ========================================================================== */
 
 @media only screen and (max-width: 900px) {
@@ -752,7 +793,7 @@ table.plain {
         margin-left: 0;
     }
 
-    #site-head {
+    .site-head {
         -webkit-box-sizing: border-box; 
         -moz-box-sizing: border-box;
         box-sizing: border-box; 
@@ -804,13 +845,13 @@ table.plain {
 }
 
 /* ==========================================================================
-   1. Media Queries - Smaller than 500px
+   10. Media Queries - Smaller than 500px
    ========================================================================== */
 
 
 @media only screen and (max-width: 500px) {
 
-    #blog-logo img {
+    .blog-logo img {
         max-height: 80px;
     }
 
@@ -829,7 +870,7 @@ table.plain {
         line-height: 1.6em;
     }
 
-    #site-head {
+    .site-head {
         padding: 10% 0;
     }
 
@@ -888,7 +929,18 @@ table.plain {
         margin: 1.4rem 0.8rem 0 0.8rem;
     }
 
+    .older-posts,
+    .newer-posts {
+        position: static;
+        margin: 10px 0;
+    }
+
+    .page-number {
+        display: block;
+    }
+
     .site-footer {
+        margin-top: 6rem;
         font-size: 1.1rem;
     }
 

assets/js/index.js

@@ -8,10 +8,7 @@
 
     $(document).ready(function(){
 
-        // On the home page, move the blog icon inside the header 
-        // for better relative/absolute positioning.
-
-        //$("#blog-logo").prependTo("#site-head-content");
+        $(".post-content").fitVids();
 
     });
 

assets/js/jquery.fitvids.js

@@ -0,0 +1,74 @@
+/*global jQuery */
+/*jshint multistr:true browser:true */
+/*!
+* FitVids 1.0.3
+*
+* Copyright 2013, Chris Coyier - http://css-tricks.com + Dave Rupert - http://daverupert.com
+* Credit to Thierry Koblentz - http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
+* Released under the WTFPL license - http://sam.zoy.org/wtfpl/
+*
+* Date: Thu Sept 01 18:00:00 2011 -0500
+*/
+
+(function( $ ){
+
+  "use strict";
+
+  $.fn.fitVids = function( options ) {
+    var settings = {
+      customSelector: null
+    };
+
+    if(!document.getElementById('fit-vids-style')) {
+
+      var div = document.createElement('div'),
+          ref = document.getElementsByTagName('base')[0] || document.getElementsByTagName('script')[0],
+          cssStyles = '&shy;<style>.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}</style>';
+
+      div.className = 'fit-vids-style';
+      div.id = 'fit-vids-style';
+      div.style.display = 'none';
+      div.innerHTML = cssStyles;
+
+      ref.parentNode.insertBefore(div,ref);
+
+    }
+
+    if ( options ) {
+      $.extend( settings, options );
+    }
+
+    return this.each(function(){
+      var selectors = [
+        "iframe[src*='player.vimeo.com']",
+        "iframe[src*='youtube.com']",
+        "iframe[src*='youtube-nocookie.com']",
+        "iframe[src*='kickstarter.com'][src*='video.html']",
+        "object",
+        "embed"
+      ];
+
+      if (settings.customSelector) {
+        selectors.push(settings.customSelector);
+      }
+
+      var $allVideos = $(this).find(selectors.join(','));
+      $allVideos = $allVideos.not("object object"); // SwfObj conflict patch
+
+      $allVideos.each(function(){
+        var $this = $(this);
+        if (this.tagName.toLowerCase() === 'embed' && $this.parent('object').length || $this.parent('.fluid-width-video-wrapper').length) { return; }
+        var height = ( this.tagName.toLowerCase() === 'object' || ($this.attr('height') && !isNaN(parseInt($this.attr('height'), 10))) ) ? parseInt($this.attr('height'), 10) : $this.height(),
+            width = !isNaN(parseInt($this.attr('width'), 10)) ? parseInt($this.attr('width'), 10) : $this.width(),
+            aspectRatio = height / width;
+        if(!$this.attr('id')){
+          var videoID = 'fitvid' + Math.floor(Math.random()*999999);
+          $this.attr('id', videoID);
+        }
+        $this.wrap('<div class="fluid-width-video-wrapper"></div>').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+"%");
+        $this.removeAttr('height').removeAttr('width');
+      });
+    });
+  };
+// Works with either jQuery or Zepto
+})( window.jQuery || window.Zepto );

default.hbs

@@ -2,20 +2,22 @@
 <html>
 <head>
     {{! Document Settings }}
-    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
     {{! Page Meta }}
-    <title>{{@blog.title}}</title>
-    <meta name="description" content="{{@blog.description}}" />
+    <title>{{meta_title}}</title>
+    <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">
+    <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="http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic|Open+Sans:700,400">
+    <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" />
 
     {{! Ghost outputs important style and meta data with this tag }}
     {{ghost_head}}
@@ -26,10 +28,10 @@
     {{{body}}}
 
     <footer class="site-footer">
-        <a class="subscribe icon-feed" href="#"><span class="tooltip">Subscribe!</span></a>
+        <a class="subscribe icon-feed" href="{{@blog.url}}/rss/"><span class="tooltip">Subscribe!</span></a>
         <div class="inner">
-             <section class="copyright">All content copyright <a href="/">{{@blog.title}}</a> &copy; 2013 &bull; All rights reserved.</section>
-             <section class="poweredby">Proudly published with <a class="icon-ghost" href="http://tryghost.org">Ghost</a></section>
+             <section class="copyright">All content copyright <a href="{{@blog.url}}/">{{@blog.title}}</a> &copy; {{date format="YYYY"}} &bull; All rights reserved.</section>
+             <section class="poweredby">Proudly published with <a class="icon-ghost" href="http://ghost.org">Ghost</a></section>
         </div>
     </footer>
 
@@ -37,7 +39,8 @@
     {{ghost_foot}}
 
     {{! The main JavaScript file for Casper }}
-    <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>
 
 </body>
 </html>

index.hbs

@@ -4,11 +4,10 @@
     the {body} of the default.hbs template, which contains our header/footer. }}
 
 {{! The big featured header on the homepage, with the site logo and description }}
-<header id="site-head" {{! style="background-image: url()" }}>
+<header class="site-head" {{#if @blog.cover}}style="background-image: url({{@blog.cover}})"{{/if}}>
     <div class="vertical">
-        <div id="site-head-content" class="inner">
-
-            {{#if @blog.logo}}<a id="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a>{{/if}}
+        <div class="site-head-content inner">
+            {{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a>{{/if}}
             <h1 class="blog-title">{{@blog.title}}</h1>
             <h2 class="blog-description">{{@blog.description}}</h2>
         </div>
@@ -23,8 +22,8 @@
 
     <article class="{{post_class}}">
         <header class="post-header">
-            <span class="post-meta"><time datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMM YYYY"}}</time> {{#if tags}}on {{tags}}{{/if}}</span>
-            <h2 class="post-title"><a href="{{url}}">{{title}}</a></h2>
+            <span class="post-meta"><time datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMM YYYY"}}</time> {{tags prefix="on "}}</span>
+            <h2 class="post-title"><a href="{{url}}">{{{title}}}</a></h2>
 
         </header>
         <section class="post-excerpt">

page.hbs

@@ -0,0 +1,32 @@
+{{!< default}}
+
+{{! 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}}">
+
+        <header class="post-header">
+            <a class="blog-logo" href="{{@blog.url}}">
+                {{#if @blog.logo}}
+                    <img src="{{@blog.logo}}" alt="Blog Logo" />
+                {{else}}
+                    <span class="blog-title">{{@blog.title}}</span>
+                {{/if}}
+            </a>
+        </header>
+
+        {{#post}}
+
+            <h1 class="post-title">{{{title}}}</h1>
+
+            <section class="post-content">
+                {{content}}
+            </section>
+
+        {{/post}}
+
+    </article>
+
+</main>

post.hbs

@@ -9,11 +9,11 @@
 
         {{! Each post has the blog logo at the top, with a link back to the home page }}
         <header class="post-header">
-            <a id="blog-logo" href="{{@blog.url}}">
+            <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>
@@ -21,10 +21,9 @@
         {{! Everything inside the #post tags pulls data from the post }}
         {{#post}}
 
-        {{! Everything below outputs content of the the post which has been published }}
-        <span class="post-meta"><time datetime="{{date format="YYYY-MM-DD"}}">{{date format='DD MMM YYYY'}}</time> {{#if tags}}on {{tags}}{{/if}}</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}}
@@ -32,18 +31,25 @@
 
             <footer class="post-footer">
 
-            {{#if author}}
                 <section class="author">
                     <h4>{{author.name}}</h4>
                     <p>{{author.bio}}</p>
                 </section>
-            {{/if}}
 
                 <section class="share">
                     <h4>Share this post</h4>
-                <a class="icon-twitter" href="http://twitter.com/share?text={{title}}&url={{url absolute}}"><span class="hidden">Twitter</span></a>
-                <a class="icon-facebook" href="http://www.facebook.com/sharer.php?u={{url absolute}}"><span class="hidden">Facebook</span></a>
-                <a class="icon-google-plus" href="#"><span class="hidden">Google+</span></a>
+                    <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>