Second pass 2.0

assets/css/components/global.css

@@ -373,7 +373,7 @@ dd {
 }
 
 blockquote {
-    margin: 1.6em 0;
+    margin: 1.5em 0;
     padding: 0 1.6em 0 1.6em;
     border-left: var(--whitegrey) 0.5em solid;;
 }

assets/css/screen.css

@@ -48,11 +48,12 @@ body {
 
 */
 
-/* Home page
+/* Special Template Styles
 /* ---------------------------------------------------------- */
 
 @media (min-width: 900px) {
-    .home-template .post-feed {
+    .home-template .post-feed,
+    .tag-template .post-feed {
         margin-top: -100px;
     }
     .home-template .site-nav {
@@ -214,6 +215,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
     display: flex;
     align-items: center;
     flex-shrink: 0;
+    height: 40px;
 }
 
 .social-links {
@@ -294,6 +296,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
 
 .post-card {
     flex: 1 1 300px;
+    order: unset;
     display: flex;
     flex-direction: column;
     margin: 0 15px 30px;
@@ -366,7 +369,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
     font-weight: 500;
 }
 
-/* Special Styling for first item (below):
+/* Special Styling for home page grid (below):
 
 The first (most recent) post in the list is styled to be bigger than the others and take over the full width of the grid to give it more emphasis. Wrapped in a media query to make sure this only happens on large viewports / desktop-ish devices.
 
@@ -374,45 +377,60 @@ The first (most recent) post in the list is styled to be bigger than the others
 
 @media (min-width: 795px) {
 
-    .post-feed .post-card:nth-child(6n+1) {
+    .home-template .post-feed .post-card:nth-child(6n+1) {
         flex: 1 1 100%;
         flex-direction: row;
     }
 
-    .post-feed .post-card:nth-child(6n+1) .post-card-image-link {
+    .home-template .post-feed .post-card:nth-child(6n+1) .post-card-image-link {
         flex: 1 1 auto;
     }
 
-    .post-feed .post-card:nth-child(6n+1) .post-card-image {
+    .home-template .post-feed .post-card:nth-child(6n+1) .post-card-image {
         width: 100%;
         height: 100%;
     }
 
-    .post-feed .post-card:nth-child(6n+1) .post-card-content {
+    .home-template .post-feed .post-card:nth-child(6n+1) .post-card-content {
         flex: 0 1 357px;
     }
 
-    .post-feed .post-card:nth-child(6n+1) h2 {
+    .home-template .post-feed .post-card:nth-child(6n+1) h2 {
         font-size: 2.6rem;
     }
 
-    .post-feed .post-card:nth-child(6n+1) p {
+    .home-template .post-feed .post-card:nth-child(6n+1) p {
         font-size: 1.8rem;
         line-height: 1.55em;
     }
 
-    .post-feed .post-card:nth-child(6n+1) .post-card-content-link {
+    .home-template .post-feed .post-card:nth-child(6n+1) .post-card-content-link {
         padding: 30px 30px 0;
     }
 
-    .post-feed .post-card:nth-child(6n+1) .post-card-meta {
+    .home-template .post-feed .post-card:nth-child(6n+1) .post-card-meta {
         padding: 0 30px 30px;
     }
 
+    /* Special Styling for Subscribe box
+
+    We've got a special subscribe box, this allows it to appear in the middle of the loop of posts without actually needing to interrupt the loop. Neat trickery courtesy of David Darnes.
+
+
+
+    .post-card:nth-of-type(2),
+    .post-card:nth-of-type(3) {
+      order: -1;
+    }
+
+    */
+
 }
 
 
 
+
+
 /* Single Post
 /* ---------------------------------------------------------- */
 
@@ -427,7 +445,7 @@ The first (most recent) post in the list is styled to be bigger than the others
 /* ^ Required to make .post-full-content:before/after z-index stacking work */
 
 .post-full-header {
-    max-width: 1000px;
+    max-width: 1040px;
     margin: 0 auto;
     padding: 10vw 3vw 6vw;
     text-align: center;
@@ -476,12 +494,11 @@ The first (most recent) post in the list is styled to be bigger than the others
 
 .post-full-content {
     position: relative;
-    max-width: 920px;
     min-height: 230px;
     padding: 70px 100px 0;
     margin: 0 auto;
     font-size: 2.2rem;
-    line-height: 1.55em;
+    line-height: 1.6em;
     font-family: Georgia, serif;
     background: #fff;
 }
@@ -514,27 +531,72 @@ The first (most recent) post in the list is styled to be bigger than the others
     filter: blur(5px);
 }
 
-.post-full-content > p:first-of-type {
+.kg-card-markdown {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    max-width: 920px;
+}
+
+.post-full-content p {
+    min-width: 100%;
+}
+
+.kg-card-markdown > p:first-child {
     font-size: 2.7rem;
     line-height: 1.55em;
 }
 
+.post-full-content a {
+    box-shadow: var(--blue) 0 -1px 0 inset;
+}
+
+.post-full-content a:hover {
+    text-decoration: none;
+}
+
+.post-full-content img {
+    width: 100vw;
+    max-width: 1040px;
+}
+
+/*
+If an image url has #full on the end, give it special wide styles.
+Super neat trick courtesy of @JoelDrapper
+*/
+.post-full-content img[src$="#full"] {
+    max-width: 100vw;
+}
+
 .post-full-content blockquote {
+    margin: 0 0 1.5em 0;
     padding: 0;
     border: 0;
     text-align: center;
     font-size: 3rem;
-    line-height: 1.5em;
+    line-height: 1.6em;
     color: var(--blue);
 }
 
+.post-full-content blockquote:before {
+    content: open-quote;
+}
+
+.post-full-content blockquote p {
+    margin: 0;
+}
+
 @media (min-width: 1000px) {
     .post-full-content blockquote {
-        margin-left: -150px;
+        width: 100vw;
-        margin-right: -150px;
+        max-width: 1060px;
     }
 }
 
+.post-full-content .fluid-width-video-wrapper {
+    margin-bottom: 1.5em;
+}
+
 
 /* Post Footer
 /* ---------------------------------------------------------- */
@@ -674,6 +736,8 @@ The first (most recent) post in the list is styled to be bigger than the others
 .read-next-card {
     position: relative;
     flex: 1 1 300px;
+    display: flex;
+    flex-direction: column;
     margin: 0 15px 30px;
     padding: 25px;
     color: #fff;
@@ -692,7 +756,9 @@ The first (most recent) post in the list is styled to be bigger than the others
     right: 0;
     bottom: 0;
     left: 0;
-    background: linear-gradient(135deg, rgba(62,176,239,0.90) 0%,rgba(46,138,172,0.80) 100%);
+    background: linear-gradient(135deg, rgba(0,40,60,0.60) 0%,rgba(0,20,40,0.50) 100%);
+    border-radius: 5px;
+    backdrop-filter: blur(2px);
 }
 
 .read-next-card-header {
@@ -711,6 +777,8 @@ The first (most recent) post in the list is styled to be bigger than the others
 }
 
 .read-next-card-content {
+    flex-grow: 1;
+    display: flex;
     position: relative;
     z-index: 50;
     font-size: 1.7rem;
@@ -721,6 +789,9 @@ The first (most recent) post in the list is styled to be bigger than the others
 }
 
 .read-next-card-content ol {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
     margin: 0;
     padding: 0 0 0 2em;
 }

assets/js/jquery.fitvids.js

@@ -1,4 +1,3 @@
-/*global jQuery */
 /*jshint browser:true */
 /*!
 * FitVids 1.1
@@ -9,20 +8,21 @@
 *
 */
 
-(function( $ ){
+;(function( $ ){
 
-  "use strict";
+  'use strict';
 
   $.fn.fitVids = function( options ) {
     var settings = {
-      customSelector: null
+      customSelector: null,
+      ignore: null
     };
 
     if(!document.getElementById('fit-vids-style')) {
       // appendStyles: https://github.com/toddmotto/fluidvids/blob/master/dist/fluidvids.js
       var head = document.head || document.getElementsByTagName('head')[0];
       var css = '.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%;}';
-      var div = document.createElement('div');
+      var div = document.createElement("div");
       div.innerHTML = '<p>x</p><style id="fit-vids-style">' + css + '</style>';
       head.appendChild(div.childNodes[1]);
     }
@@ -33,35 +33,55 @@
 
     return this.each(function(){
       var selectors = [
-        "iframe[src*='player.vimeo.com']",
+        'iframe[src*="player.vimeo.com"]',
-        "iframe[src*='youtube.com']",
+        'iframe[src*="youtube.com"]',
-        "iframe[src*='youtube-nocookie.com']",
+        'iframe[src*="youtube-nocookie.com"]',
-        "iframe[src*='kickstarter.com'][src*='video.html']",
+        'iframe[src*="kickstarter.com"][src*="video.html"]',
-        "object",
+        'object',
-        "embed"
+        'embed'
       ];
 
       if (settings.customSelector) {
         selectors.push(settings.customSelector);
       }
 
+      var ignoreList = '.fitvidsignore';
+
+      if(settings.ignore) {
+        ignoreList = ignoreList + ', ' + settings.ignore;
+      }
+
       var $allVideos = $(this).find(selectors.join(','));
-      $allVideos = $allVideos.not("object object"); // SwfObj conflict patch
+      $allVideos = $allVideos.not('object object'); // SwfObj conflict patch
+      $allVideos = $allVideos.not(ignoreList); // Disable FitVids on this video.
 
       $allVideos.each(function(){
         var $this = $(this);
+        if($this.parents(ignoreList).length > 0) {
+          return; // Disable FitVids on this video.
+        }
         if (this.tagName.toLowerCase() === 'embed' && $this.parent('object').length || $this.parent('.fluid-width-video-wrapper').length) { return; }
+        if ((!$this.css('height') && !$this.css('width')) && (isNaN($this.attr('height')) || isNaN($this.attr('width'))))
+        {
+          $this.attr('height', 9);
+          $this.attr('width', 16);
+        }
         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')){
+        if(!$this.attr('name')){
-          var videoID = 'fitvid' + Math.floor(Math.random()*999999);
+          var videoName = 'fitvid' + $.fn.fitVids._count;
-          $this.attr('id', videoID);
+          $this.attr('name', videoName);
+          $.fn.fitVids._count++;
         }
-        $this.wrap('<div class="fluid-width-video-wrapper"></div>').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+"%");
+        $this.wrap('<div class="fluid-width-video-wrapper"></div>').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+'%');
         $this.removeAttr('height').removeAttr('width');
       });
     });
   };
+
+  // Internal counter for unique video names.
+  $.fn.fitVids._count = 0;
+
 // Works with either jQuery or Zepto
 })( window.jQuery || window.Zepto );

default.hbs

@@ -47,6 +47,9 @@
 
     // TODO: Only include this on post.hbs - preferably put in floating-header.hbs and pass up to ghost_foot via block helper or similar.
     $(function() {
+        var $postContent = $(".post-full-content");
+        $postContent.fitVids();
+
         $(window).scroll(function() {
             var header = $(".floating-header");
             var title = $(".post-full-title");

index.hbs

@@ -25,10 +25,10 @@ into the {body} of the default.hbs template --}}
             <div class="site-nav-right">
                 <div class="social-links">
                     {{#if @blog.facebook}}
-                        <a class="social-link social-link-fb" href="{{facebook_url}}">{{> "icons/facebook"}}</a>
+                        <a class="social-link social-link-fb" href="{{facebook_url}}" target="_blank">{{> "icons/facebook"}}</a>
                     {{/if}}
                     {{#if @blog.twitter}}
-                        <a class="social-link social-link-tw" href="{{twitter_url}}">{{> "icons/twitter"}}</a>
+                        <a class="social-link social-link-tw" href="{{twitter_url}}" target="_blank">{{> "icons/twitter"}}</a>
                     {{/if}}
                 </div>
                 {{#if @labs.subscribers}}

page.hbs

@@ -1,13 +1,15 @@
 {{!< default}}
-
+{{!-- The tag above means: insert everything in this file
-{{!-- This is a page template. A page outputs content just like any other post, and has all the same
+into the {body} of the default.hbs template --}}
-    attributes by default, but you can also customise it to behave differently if you prefer. --}}
 
 {{!-- The big featured header, it uses blog cover image as a BG if available --}}
-<header class="site-header outer {{#if @blog.cover_image}}" style="background-image: url({{@blog.cover_image}}){{else}}no-cover{{/if}}">
+<header class="site-header outer">
     <div class="inner">
         <nav class="site-nav">
             <div class="site-nav-left">
+                {{#if @blog.logo}}
+                    <a class="site-nav-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>
+                {{/if}}
                 {{#if @blog.navigation}}
                     {{!-- The blog navigation links from /ghost/settings/design --}}
                     {{navigation}}
@@ -32,21 +34,30 @@
     </div>
 </header>
 
-{{!-- Everything inside the #post tags pulls data from the page --}}
+{{!-- Everything inside the #post tags pulls data from the post --}}
 {{#post}}
 
+<main id="site-main" class="site-main outer" role="main">
+    <div class="inner">
 
-<main class="content" role="main">
+        <article class="post-full {{post_class}}">
-    <article class="{{post_class}}">
 
-        <header class="post-header">
+            <header class="post-full-header">
-            <h1 class="post-title">{{title}}</h1>
+                <h1 class="post-full-title">{{title}}</h1>
-        </header>
+            </header>
 
-        <section class="post-content">
+            {{#if feature_image}}
-            {{content}}
+            <figure class="post-full-image" style="background-image: url({{feature_image}})">
-        </section>
+            </figure>
+            {{/if}}
 
-    </article>
+            <section class="post-full-content">
+                {{content}}
+            </section>
+
+        </article>
+
+    </div>
 </main>
+
 {{/post}}

partials/loop.hbs

@@ -1,5 +1,10 @@
 <div class="post-feed">
     {{!-- This is the post loop - each post will be output using this markup --}}
+
+    {{!-- <aside class="post-card number-3">
+        <h1>SUBSCRIBE</h1>
+    </aside> --}}
+
     {{#foreach posts}}
     <article class="post-card {{post_class}}">
         {{#if feature_image}}
@@ -22,7 +27,7 @@
                 {{/if}}
                 <span class="post-card-author">{{author}}</span>
                 {{#if tags}}
-                    <span class="poar-card-tags"> in <a href="{{tags.[0].slug}}">{{tags.[0].name}}</a></span>
+                    <span class="poar-card-tags"> in <a href="{{@blog.url}}tag/{{tags.[0].slug}}">{{tags.[0].name}}</a></span>
                 {{/if}}
             </footer>
         </div>

post.hbs

@@ -37,6 +37,7 @@ into the {body} of the default.hbs template --}}
 {{!-- Everything inside the #post tags pulls data from the post --}}
 {{#post}}
 
+{{!-- Floating header which appears on-scroll, pulled from includes/floating-header.hbs --}}
 {{> floating-header}}
 
 <main id="site-main" class="site-main outer" role="main">
@@ -48,7 +49,7 @@ into the {body} of the default.hbs template --}}
                 <section class="post-full-meta">
                     <time class="post-full-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMMM YYYY"}}</time>
                     {{#if tags}}
-                        <span class="date-divider">/</span> <a href="{{tags.[0].slug}}">{{tags.[0].name}}</a>
+                        <span class="date-divider">/</span> <a href="{{@blog.url}}tag/{{tags.[0].slug}}">{{tags.[0].name}}</a>
                     {{/if}}
                 </section>
                 <h1 class="post-full-title">{{title}}</h1>
@@ -126,7 +127,14 @@ into the {body} of the default.hbs template --}}
         <div class="read-next-feed">
 
             {{#get "posts" filter="tags:{{tags.[0].slug}}+id:-{{id}}" limit="3"}}
-            <article class="read-next-card read-next-card {{post_class}}"{{#if ../tags.[0].feature_image}} style="background-image: url({{../tags.[0].feature_image}})"{{/if}}>
+            <article class="read-next-card"
+                {{#if ../tags.[0].feature_image}}
+                    style="background-image: url({{../tags.[0].feature_image}})"
+                {{else}}
+                    {{#if @blog.cover_image}}
+                        style="background-image: url({{@blog.cover_image}})"{{/if}}
+                {{/if}}
+            >
                 <header class="read-next-card-header">
                     <h3 class="read-next-card-header-title">Read more posts like this</h3>
                 </header>

tag.hbs

@@ -2,10 +2,14 @@
 {{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
 
 {{!-- The big featured header, it uses blog cover image as a BG if available --}}
-<header class="site-header outer {{#if @blog.cover_image}}" style="background-image: url({{@blog.cover_image}}){{else}}no-cover{{/if}}">
+{{#tag}}
+<header class="site-header outer {{#if feature_image}}" style="background-image: url({{feature_image}}){{else}}no-cover{{/if}}">
     <div class="inner">
         <nav class="site-nav">
             <div class="site-nav-left">
+                {{#if @blog.logo}}
+                    <a class="site-nav-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>
+                {{/if}}
                 {{#if @blog.navigation}}
                     {{!-- The blog navigation links from /ghost/settings/design --}}
                     {{navigation}}
@@ -14,10 +18,10 @@
             <div class="site-nav-right">
                 <div class="social-links">
                     {{#if @blog.facebook}}
-                        <a class="social-link social-link-fb" href="{{facebook_url}}">{{> "icons/facebook"}}</a>
+                        <a class="social-link social-link-fb" href="{{facebook_url}}" target="_blank">{{> "icons/facebook"}}</a>
                     {{/if}}
                     {{#if @blog.twitter}}
-                        <a class="social-link social-link-tw" href="{{twitter_url}}">{{> "icons/twitter"}}</a>
+                        <a class="social-link social-link-tw" href="{{twitter_url}}" target="_blank">{{> "icons/twitter"}}</a>
                     {{/if}}
                 </div>
                 {{#if @labs.subscribers}}
@@ -27,16 +31,9 @@
                 {{/if}}
             </div>
         </nav>
-    </div>
+        <div class="site-header-content">
-</header>
+            <h1 class="site-title">{{name}}</h1>
-
+            <h2 class="site-description">
-{{!-- If we have a tag cover, display that - else blog cover - else nothing --}}
-<header class="main-header tag-head {{#if tag.image}}" style="background-image: url({{tag.image}}){{else}}{{#if @blog.cover}}" style="background-image: url({{@blog.cover}}){{else}}no-cover{{/if}}{{/if}}">
-    <div class="vertical">
-        {{#tag}}
-        <div class="main-header-content inner">
-            <h1 class="page-title">{{name}}</h1>
-            <h2 class="page-description">
                 {{#if description}}
                     {{description}}
                 {{else}}
@@ -44,9 +41,9 @@
                 {{/if}}
             </h2>
         </div>
-        {{/tag}}
     </div>
 </header>
+{{/tag}}
 
 {{!-- The main content area --}}
 <main id="site-main" class="site-main outer" role="main">