Fixing Ghost's Default Casper Theme

As mentioned a post or two ago, I've switched from Hugo to Ghost. And I'm in love with it. Writing posts in Ghost's markdown window is beautifully simple, and I'd actually forgotten how much I missed authoring a blog post via a web interface (as opposed to a text editor/command window.) It's not that I mind publishing posts via Git, but there's something about the simplicity of clicking "publish" and having your content be live. Oh, and spell check. I've missed that.

Browsing the selection of Ghost themes really didn't turn up anything that caught my eye. At least not more than the default theme, Casper, which I actually really like. It gives off a Medium-like vibe, which has always appealed to me. Plus, the team over at Ghost has done a great job of making it responsive and lightweight as well.

But as always, nothing is perfect.

With a few minor tweaks, I've fixed the few annoyances I've had.

Code Blocks

The default way that pre blocks display are meh. I don't like the way that it formats the text, adds hyphens, etc. This is a simple fix, though. Initially, I made the changes directly to the theme CSS itself. But if years of Wordpress has taught me anything, it's that you never make changes to the code directly. Any official update to the theme will completely wipe out those changes.

Adding the following CSS via the "Code Injection" section of the admin panel fixed almost all my qualms.

<style>  
  pre {
    word-wrap: normal;
    -moz-hyphens: none;
    -ms-hyphens: none;
    -webkit-hyphens: none;
    hyphens: none;
    color: #333;
  }
  pre code, pre tt {
    white-space: pre;
  }
</style>

Now, code displays properly, isn't broken up automatically by word breaks, and even shows a sideways scroll bar for those exceptionally long code snippets.

Syntax Highlighting

Highlight.js and Prism seem to be the two main players at the moment, as far as code highlighting goes. I've played with Prism a little, but I've had more luck with highlight.js.

This one is simple too. Add the following code to the "Blog Header" section of the Code Injection tab, placing it above the CSS from the previous step.

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/styles/github.min.css">  
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js">
</script>  
<script>hljs.initHighlightingOnLoad();</script>

I can hear some people screaming, "But wait! That's loading an external library! That'll result in page bloat." Please. I'll take the 35ms hit to add syntax highlighting.

Full Screen Landing Image

By default, this is what the stock blog looks like without a cover image. A little bland, if you ask me.

Simple! We'll just add an image via the "General" tab on the left-hand side. Easy enough.

But then we're greeted with this full-page monstrosity:

No thanks. Let's add a few more CSS styles.

This is easy enough. Simply add a rule to the .main-header class:

.main-header {
    height: 50vh;
}

For those not familiar with vh units in CSS, this stands for 'viewport height'. Basically, the area of your web browser that isn't occupied by toolbars -- the parts you actually see. I set this at 50, which is essentially the same thing as 50% of your screen. If you'd like, you can toy with this to make it larger or smaller depending on what you like, but this is how it looks:

MUCH better. Now, the only other thing that we need to take care of is the bouncing down-arrow. When the landing image covered the entire screen, this arrow was beneficial. Where the content is already visible from the get-go, it has less of a purpose. I personally like the look of the arrow still, but if you'd like to change that, we just have to add one last small piece of code:

.scroll-down {
    display: none;
}

Voila! Those fixed my three biggest annoyances with the the Casper theme.

Update: 8/10/17

I've made a few more tweaks to my Casper theme. If you'd like to implement those, here they are:

.nav li a:after {
    display: none;
}
.nav li:before {
    display: none;
}
.read-more {
    display: none;
}
.nav li a {
    font-size: 1.8rem;
}
.subscribe-button {
    display: none;
}
@media only screen and (max-width: 500px) {
    body:not(.post-template) .post-title {
            font-size: 2.5rem;
            margin: 30px 0;
    }
}