Updated README, remove duplicate Open Graph tags, SEO optimization, featured image and more

README.md

@@ -1,6 +1,6 @@
 # Crisp
 
-A minimalist, responsive, and open-source two-column theme for the [Ghost](http://ghost.org) publishing platform by [Kathy Qian](http://kathyqian.com). Last tested with Ghost v2.1.1. For the last version tested with pre-2.0 Ghost releases, see the [ghost-sub-2](https://github.com/kathyqian/crisp/tree/ghost-sub-2) branch.
+A minimalist, responsive, and open-source two-column theme for the [Ghost](http://ghost.org) publishing platform by [Kathy Qian](http://kathyqian.com). Last tested with Ghost v4. For the last version tested with pre-2.0 Ghost releases, see the [ghost-sub-2](https://github.com/kathyqian/crisp/tree/ghost-sub-2) branch.
 
 ![Desktop Screenshot](https://raw.github.com/kathyqian/crisp/master/assets/screenshot-desktop.png)   
 

assets/js/jquery.fitvids.js

@@ -0,0 +1,87 @@
+/*jshint browser:true */
+/*!
+* FitVids 1.1
+*
+* 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/
+*
+*/
+
+;(function( $ ){
+
+  'use strict';
+
+  $.fn.fitVids = function( options ) {
+    var settings = {
+      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");
+      div.innerHTML = '<p>x</p><style id="fit-vids-style">' + css + '</style>';
+      head.appendChild(div.childNodes[1]);
+    }
+
+    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 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(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('name')){
+          var videoName = 'fitvid' + $.fn.fitVids._count;
+          $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.removeAttr('height').removeAttr('width');
+      });
+    });
+  };
+
+  // Internal counter for unique video names.
+  $.fn.fitVids._count = 0;
+
+// Works with either jQuery or Zepto
+})( window.jQuery || window.Zepto );

assets/styles/crisp.css

@@ -1,7 +1,7 @@
 * {
 	padding: 0;
 	margin: 0;
-} 
+}
 /* Basic Typography */
 html, body {
 	font-size: 1em;
@@ -16,7 +16,7 @@ html {
 }
 body {
 	padding: 2em 2.5em 1em 20em;
-}                  
+}
 /* Blocks */
 header {
 	border-right: 1px #eee solid;
@@ -63,13 +63,13 @@ h2 {
 	font-size:1.9em;
 	line-height: 1.2em;
 	margin-top: 0.7em;
-	margin-bottom: 0.7em;	
+	margin-bottom: 0.7em;
 }
 h3 {
 	font-size:1.4em;
 	line-height: 1.3em;
 	margin-top: 0.8em;
-	margin-bottom: 0.8em;	
+	margin-bottom: 0.8em;
 }
 h4 {
 	font-size:1.3em;
@@ -87,7 +87,7 @@ img, iframe {
 a {
 	font-weight:700;
 	text-decoration:none;
-	color: #5cc265; /* Change Link Color */
+	color: var(--ghost-accent-color); /* Change Link Color */
 }
 a:hover {
 	text-decoration:underline;
@@ -109,7 +109,7 @@ hr{
 	background: #eee;
 }
 ul, ol {
-	margin-left: 3em; 
+	margin-left: 3em;
 }
 code {
 	font-size:1.4em;
@@ -125,22 +125,27 @@ pre {
 	white-space: pre;
 	white-space: -moz-pre-wrap;
 	white-space: pre-wrap;
-	white-space: pre\9; 
+	white-space: pre\9;
 }
 input {
 	font-size:1em;
 	padding: 0.3em;
 }
 /* Sidebar */
-header h1 {
+header .site-title {
 	font-size:1.9em;
 	margin-top:0.8em;
 	margin-bottom:0.6em;
+  line-height: 1.1em;
+ 	font-family: "Bree Serif", serif;
+	display:block;
 }
-header h1 a {
+
+header .site-title a {
 	color:#444;
-}  
-header h1 a:hover {
+ 	font-weight: 400 !important;
+}
+header .site-title a:hover {
 	text-decoration:none;
 }
 header #logo img {
@@ -158,7 +163,7 @@ header #logo img {
 }
 #follow-icons a {
 	color: #ccc;
-}	
+}
 #follow-icons span {
 	vertical-align:top;
 	margin-left:-0.15em;
@@ -173,32 +178,40 @@ header h6 {
 }
 /* Posts */
 article span.post-stamp {
-	color:#888;     
+	color:#888;
 }
 h1.post-title {
 	margin-top:0.35em;
 	margin-bottom: 0.6em;
 }
-h3.post-title {
+h3.post-title, .post-meta {
+	font-size: 1.2em;
+	color: #444;
+	display:inline;
+}
+.post-listing {
 	margin-top:0.4em;
+	margin-bottom:0.8em;
 	padding-bottom:0.9em;
 	border-bottom: 1px solid #eee;
-	font-size: 1.2em;
-	color: #444;
 }
-.post-title .feature-star {
+.post-meta .feature-star {
 	font-size: 0.9em;
 }
+.post-meta {
+ 	font-family: "Bree Serif", serif;
+	font-weight: 400 !important;
+}
 .separator, .taglist, .feature-star {
 	color: #ccc;
 }
 .taglist a {
 	background-color:#ccc;
 	color:#fff;
-	display: inline-block;   
+	display: inline-block;
 	line-height: 1.5em;
 	padding:0.3em 0.6em 0.3em 0.6em;
-	vertical-align:20%;  
+	vertical-align:20%;
 	font-size:0.5em;
 	font-family: "Open Sans", sans-serif;
 	font-weight: 700 !important;
@@ -208,6 +221,9 @@ h3.post-title {
 	-moz-border-radius: 0.25em;
 	-webkit-border-radius: 0.25em;
 }
+.article-excerpt {
+	font-size: 1.5em;
+}
 #social-bar {
 	margin-top:1.5em;
 	background-color:#eee;
@@ -218,6 +234,12 @@ h3.post-title {
 	padding-bottom: 0.2em;
 	border-bottom: 1px solid #eee;
 }
+.post .article-image img {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    width: 100%;
+}
 /* Footer */
 .pagination {
 	margin-bottom:1em;
@@ -226,7 +248,7 @@ footer a {
 	font-weight:300;
 	color:#888;
 	text-decoration: underline;
-} 
+}
 footer a:hover {
 	color:#444;
 	text-decoration: none;
@@ -235,10 +257,10 @@ footer a:hover {
 @media only screen and (min-width: 1281px) {
 	html, body {
 		font-size: 1.1em;
-	} 
+	}
 }
 /* Small Screens */
-@media only screen and (max-width: 800px) { 
+@media only screen and (max-width: 800px) {
 	body {
 		padding:0;
 	}
@@ -259,9 +281,15 @@ footer a:hover {
 	footer {
 		padding: 0 2.5em 2em 2.5em;
 	}
+	.post-meta {
+		display:block;
+	}
+	.m-hide {
+		display:none;
+	}
 }
 /* Tiny Screens */
-@media only screen and (max-width: 320px) { 
+@media only screen and (max-width: 320px) {
 	header {
 		padding: 1.2em 1.2em 0.6em 1.2em;
 	}
@@ -272,7 +300,7 @@ footer a:hover {
 		padding: 0 1.5em 1.2em 1.5em;
 	}
 	ul, ol {
-		margin-left: 2em; 
+		margin-left: 2em;
 	}
 }
 
@@ -414,4 +442,4 @@ footer a:hover {
 
 .kg-gallery-image:not(:first-of-type) {
     margin: 0 0 0 0.75em;
-}
+}

default.hbs

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="{{@site.locale}}">
 	<head>
 	    {{! Document Settings }}
 	    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
@@ -26,7 +26,11 @@
 	<body class="{{body_class}}">
 		<header id="header" {{#if @site.cover_image}}style="background-image: url('{{@site.cover_image}}')"{{/if}}>
 			{{#if @site.logo}}<a id="logo" href="{{@site.url}}"><img src="{{@site.logo}}" alt="{{@site.title}}" /></a>{{/if}}
-			<h1><a href="{{@site.url}}">{{@site.title}}</a></h1>
+			{{#is "home"}}
+			<h1 class="site-title"><a href="{{@site.url}}">{{@site.title}}</a></h1>
+			{{else}}
+			<span class="site-title"><a href="{{@site.url}}">{{@site.title}}</a></span>
+			{{/is}}
 			<p>{{@site.description}}</p>
 			{{> follow}}
 			{{navigation}}
@@ -35,9 +39,16 @@
 			{{{body}}}
 		</main>
 		<footer id="footer">
-			<section id="footer-message">&copy; {{date format='YYYY'}} {{@site.title}}. All rights reserved. Powered by <a href="http://ghost.org" target="_blank">Ghost</a>. <a href="https://github.com/kathyqian/crisp" target="_blank">Crisp</a> theme by <a href="http://kathyqian.com" target="_blank">Kathy Qian</a>.</section>
+			<section id="footer-message">&copy; {{date format='YYYY'}} {{@site.title}}. {{t "All rights reserved" }}. {{t "Powered" }} {{t "by" }} <a href="http://ghost.org" target="_blank">Ghost</a>. <a href="https://github.com/kathyqian/crisp" target="_blank">Crisp</a> {{t "theme" }} {{t "by" }} <a href="http://kathyqian.com" target="_blank">Kathy Qian</a>.</section>
 		</footer>
 	{{ghost_foot}}
+	<script src="{{asset '/js/jquery.fitvids.js'}}"></script>
+	<script>
+	  $(document).ready(function(){
+	    // Target your .container, .wrapper, .post, etc.
+	    $(".kg-embed-card").fitVids();
+	  });
+	</script>
 	<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
 	<script>hljs.initHighlightingOnLoad();</script>
 	</body>

locales/en.json

@@ -0,0 +1,10 @@
+{
+    "Older": "Older",
+    "Newer": "Newer",
+    "Powered": "Powered",
+    "All rights reserved": "All rights reserved",
+    "Page": "Page",
+    "theme": "theme",
+    "by": "by",
+    "of": "of"
+}

locales/sv.json

@@ -0,0 +1,10 @@
+{
+    "Older": "Äldre",
+    "Newer": "Nyare",
+    "Powered": "Drivs",
+    "All rights reserved": "Alla rättigheter reserverade",
+    "Page": "Sida",
+    "theme": "tema",
+    "by": "av",
+    "of": "av"
+}