Post Image

Readium 1.3 Ghost Theme

Meet Readium

A medium like Ghost theme



I love building themes & I love Ghost. And I always wanted to have a possibility to blog that's similar to Medium, but without the drawbacks (like no control over your data & loss of all rights to your content, etc.). So I made myself a theme for Ghost that takes the good parts from Medium.com & mixes them with stuff I would do differently. And this is what I ended up with.

See it live here: http://mark-read.info

You can grab it here: https://github.com/starburst1977/Readium

And don't forget to check out my two premium themes Marisa & Chiara and the underlying principle.


Features

  • Mobile-First Design Aproach
  • Fully Responsive layout
  • Use header images in articles, if you want to
  • Valid HTML5/CSS3
  • WAI-ARIA & Rich Snippets(microdata) roles
  • Minimal design
  • Needs Ghost 0.4
  • Designed for Readability & Sharability
  • Works with the Ghost Hosting platform
  • Handles static pages
  • Featured article support
  • Fluidbox included (Mediums Lightbox variant)
  • FontAwesome implemented for easy use of icons fonts
  • Google Analytics integrated
  • Highlight.js integrated for Syntax highlighting - Highlight JS
  • OpenGraph & Twitter Cards meta's
  • Free & Open Source Font usage
  • Theoretically ready for multiple users (here is how to hack Ghost for Mulit-User)

If your Ghost blog is self hosted:

  1. Copy the contents of the .zip file into /content/themes/.
  2. You need to restart your Ghost instance. After that you can switch themes inside your Ghost admin (http://your.domain.com/ghost/settings/general/). Scroll down and choose "Readium" from the theme dropdown.
  3. Now you can customize your logo, langing page image (if you choose to have one), as well as user images and texts to fit the theme.
  4. Have fun.

If your Ghost blog is hosted on the Ghost hosting platform:

  1. Upload your Zip file via the Ghost admin panel.
  2. Switch your theme to the Readium theme.
  3. Have fun.

Usage for Header images

  • If you want a big article image, just give it the this alt attribute -> alt="img-post-cover".
  • Give your article the "BigImage" tag.
  • You should pay attention to image size. Don't go to crazy.
  • Some style configuration possible inside essentials.less.

Usage for Figcaptures

  • Wrap a figure tag aroung the element you want to annotate.
  • Below the wrapped tag, add the figcaputre tag and enter your content.
  • Now close both tags again. Have fun.

Future Todos

  • Automatic linking for static pages

Thanks go to...

  • FontAwesome by Dave Gandy
  • Highlight JS by Ivan Sagalaev
  • Friedrich Althausen for Vollkorn & Adobe for Source Sans Pro
  • Marc Binder & Kevin Read for helping with JS
  • The awesome guys that make Ghost
  • The really rad guys that design Medium

Check it out

You can download the theme:
https://github.com/starburst1977/readium

Installation help included inside via the Readme file.

Have fun and let me know what you think about it.