Switching to Casper (sort of)


For a long time I've been using the Velox theme for this blog. However recently I found myself wanting to use some of the features the default Casper theme now provides. Aside from the fact a lot of work has gone into this theme over the past two years that makes it look really good.

The fact that Casper is developed by the same folks who develop Ghost means that new features the Ghost platform provides are integrated into this theme, such as the You might enjoy at the bottom of this page.

In order to make it easier for myself to track local modifications I've forked Casper to, well, Jasper.

Currently there are three local modifications:

Here's a quick breakdown of how to add drop caps and proper quotation marks.

drop caps

As I'd rather not use a CDN to serve me dropcaps.js I've added a local asset to my theme. Either way, you can then load and configure it with the following:

<script type="text/javascript" src="{{asset "js/dropcap.min.js"}}"></script>
<script>
    var dropcap = document.getElementById("dropcap");
    window.Dropcap.layout(dropcap, 3);
</script>

Where the 3 is the number of lines to span. Then use it as such:

<span id='dropcap'>F</span>

quotation marks

Proper quotation marks have a swoosh and they shouldn't be two perfect parallel lines like they're oftentimes rendered. I'm using a a simple stylesheet like this:

.quote:before
{
        content: '\201C';
}

.quote:after { content: '\201D'; }

And quotes are simply written as:
<span class="quote">Proper</span>

For those interested I will publish my Jasper theme on GitHub soon-ish.