Kampot

A responsive theme for Ghost blogs

Kampot is built to display your Ghost blog beautifully on any device, at any screen size. It's also built for performance so your posts should be snappy to load.

If you are a blog author and are not yet familiar with Ghost or writing articles in Markdown then start there.

Using Kampot

Navigation

Kampot makes use of Ghost's custom navigation.

For any items in the navigation named Twitter, Instagram, Youtube or Pinterest Kampot will replace the text in the navigation with an icon.

Image layout

By default when you add an image to a blog post it will be displayed by Kampot as 100% of the post width.

However, Kampot allows you to layout your images pretty much how you like by adding a tiny bit of HTML to the markdown of your blog post.

For example, let's say we have two images in our blog post. Our markdown might look like this:

  ![First image](/path/to/image-1.jpg)
  ![Second image](/path/to/image-2.jpg)

This would display each image in our post at 100% width, stacked one on top of the other.

What if we wanted to display the two images side by side?

We need to mix a bit of HTML into our markdown to accomplish that. First, wrap both images inside a p element, including the class attribute of group. Then wrap each of the markdown images inside a span element.

<p class="group">

  <span>
    ![First image](/path/to/image-1.jpg)
  </span>

  <span>
    ![Second image](/path/to/image-2.jpg)
  </span>

</p>

That's it! Kampot will now display your images side by side on large screens.

This works just as well with three or four images. You could even build up multiple groups to create grid-like image layouts.

Code injection

Kampot makes use of Ghost's code injection. The blog footer is where you should add your code for third-party services such as Google Analytics.

If you're a Disqus user, on each post page there is a #disqus_thread element for you to hook your Javascript onto.

Performance tips

Kampot is lightweight and speedy. However, you must take care to optimise your images before adding them to your blog posts. If not, your readers may be waiting minutes for images to appear and left with their data plan drained.

• Make sure your images are no more than 1000px wide at 72dpi.
• Use Photoshop's save for web and reduce the quality down to between 50% and 80%.
• Save your images as progressive jpegs.
• Check to make sure each image is (way) below 200KB.
• Run your images through something like ImageOptim to squeeze out the final KBs.

License

Copyright (c) 2015, Colin Meinke - ISC license